Configure bmfiddle.com to match the goals of the business model canvas.

The tools provided by bmfiddle.com are excellent. Based on earlier research, the following goals emerged:

  1. Fully digital business model canvas that uses the BMC correctly.
  2. Includes imagery + text in each sticky
  3. Business model canvas components with the right names in the right order
  4. Minimal visual distractions
  5. Box text headers only (DO NOT WRITE ON THE CANVAS)
  6. Allow for rapid upates
  7. Provide clear visual indicators that can be portable to other media quickly (zoom, export to png, screenshots, etc.)
  8. Encourage play

Here's how to use bmfiddle.com to meet these goals:

Sign in to bmfiddle Create a new fiddle

Title: Business Model Generation with Clarity

Description: Based on Steve Blanks Udacity course - add userstyles here: http://goo.gl/kjdfkjf

Template is the Business Model Canvas

Keep all access and sharing defaults

Click Customize template

Click Value Propositions box, change order from 2 to 1

Click Customer Segments box, change order from 1 to 2

Click Key Partners box, change order from 8 to 7

Click Key Activities box, change order from 7 to 8

Go through each box, eliminate all Block description and Block Help text items.

Keep all Labels and Metrics defaults

Save the fiddle. It should now look like this:

BMfiddle step1

Or, use the bmfiddle.com template here: Business Model Generation with Clarity

To eliminate more of the visual distractions, add the 'stylish' plugin to firefox. Click the extension icon, then write new style-> for bmfiddle.com. Add the contents of the box below, or click here for the user style bmfiddle clarity

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("bmfiddle.com") {

    /* make text color white on white to eliminate the visually
 * distracting
    component numbers*/
    .block .order { background-color: #ffffff;}

    /* hide all of the background iconagraphy */
    .bg {background-image: none;}

    /* hide the count of stickys in the lower right */
    .block .count {color: #ffffff;}

    /* make icons small on the canvas */
    .item-asset img.scale-with-grid { max-width: 20%; }
}

Give the style the name of bmfiddle_clarity, then save. Now the canvas should look like this:

BMfiddle step2

Add the following set of line drawn images to the resources area of the bmfiddle. The icons below are extracted from the uniicons pack.

uniicons/path4502.png uniicons/path4504.png uniicons/path4506.png uniicons/path4508.png uniicons/path4510.png uniicons/path4512.png uniicons/path4514.png uniicons/path4516.png uniicons/path4518.png uniicons/path4520.png uniicons/path4522.png uniicons/path4524.png uniicons/path4526.png uniicons/path4528.png uniicons/path4530.png uniicons/path4532.png uniicons/path4534.png uniicons/path4536.png uniicons/path4538.png uniicons/path4540.png uniicons/path4542.png uniicons/path4544.png uniicons/path4546.png uniicons/path4548.png uniicons/path4550.png uniicons/path4552.png uniicons/path4554.png uniicons/path4556.png uniicons/path4558.png uniicons/path4560.png uniicons/path4562.png uniicons/path4564.png uniicons/path4566.png uniicons/path4568.png uniicons/path4570.png uniicons/path4572.png uniicons/path4574.png uniicons/path4576.png uniicons/path4578.png uniicons/path4580.png uniicons/path4582.png uniicons/path4584.png uniicons/path4586.png uniicons/path4588.png uniicons/path4590.png uniicons/path4592.png uniicons/path4594.png uniicons/path4596.png uniicons/path4598.png uniicons/path4600.png uniicons/path4602.png uniicons/path4604.png uniicons/path4606.png uniicons/path4608.png uniicons/path4610.png uniicons/path4612.png uniicons/path4614.png uniicons/path4616.png uniicons/path4618.png uniicons/path4620.png uniicons/path4622.png uniicons/path4624.png uniicons/path4626.png uniicons/path4628.png uniicons/path4630.png uniicons/path4632.png uniicons/path4634.png uniicons/path4636.png uniicons/path4638.png uniicons/path4640.png uniicons/path4642.png uniicons/path4644.png uniicons/path4646.png uniicons/path4648.png uniicons/path4650.png uniicons/path4652.png uniicons/path4654.png uniicons/path4656.png uniicons/path4658.png uniicons/path4660.png uniicons/path4662.png uniicons/path4664.png uniicons/path4666.png uniicons/path4668.png uniicons/path4670.png uniicons/path4672.png uniicons/path4674.png uniicons/path4676.png uniicons/path4678.png uniicons/path4680.png uniicons/path4682.png uniicons/path4684.png uniicons/path4686.png uniicons/path4688.png uniicons/path4690.png uniicons/path4692.png uniicons/path4694.png uniicons/path4696.png uniicons/path4698.png uniicons/path4700.png

Download the full zip of the bmfiddle uniicons pngs.

The easiest way to get these into the canvas resources are is to e-mail them to @canvas.bmfiddle.com from the address used to create your bmfiddle.com account. On linux, this can look like:

cd uniicons/
mutt <canvas_id>@canvas.bmfiddle.com -s "PNGs" $( printf -- '-a %q ' *.png ) 

As of 2017-09-29 16:01, mailing these 100 files to bmfiddle will trigger them to be re-added at least 3 times, resulting in duplicates and confusion in the resources pane. Send them in groups of ten instead with:

if [[ $# -eq 0 ]] ; then
    echo 'You must specify a bmfiddle CANVASID'
    exit 0
fi

CANVASID="$1"

mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 1of10" $( printf -- '-a %q ' folder1/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 2of10" $( printf -- '-a %q ' folder2/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 3of10" $( printf -- '-a %q ' folder3/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 4of10" $( printf -- '-a %q ' folder4/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 5of10" $( printf -- '-a %q ' folder5/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 6of10" $( printf -- '-a %q ' folder6/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 7of10" $( printf -- '-a %q ' folder7/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 8of10" $( printf -- '-a %q ' folder8/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 9of10" $( printf -- '-a %q ' folder9/*.png )
mutt $CANVASID@canvas.bmfiddle.com -s "PNGs 10of10" $( printf -- '-a %q ' folder10/*.png )

You can use the sketch tool on bmfiddle, but it will not have a transparent background.

If you're making your own icons like those shown below, remember to create or verify the icons as SVG's with a transparent background. Save them in the bmfiddle_icons directory, then run the convert_svg_to_png.sh script, which will create the transparent png thumbnails. These are what will be uploaded to the resources area on bmfiddle.

channels costs customer relationships customer segments key activities key partners key resources revenue streams value propositions

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#!/bin/bash
# convert_svg_to_png.sh
for i in *.svg
do
convert -background none "$i" "${i%svg}png"
done

# Now convert them to thumbnails
for i in *.png
do
convert -resize 50x50 "$i" "thumbnails/$i"
done

Remember, the idea here is to tune bmfiddle.com into a tool you can use for the next 3 months at least. Don't get frustrated, don't give up. Don't think you are over-optimizing at this stage. The bare bones best version is still probably sticky notes on a white piece of paper with a team of people. You can make a better version that is fully digital and auto-backed up and is actually easier to share with people if you put in the tools up front, and have the disciplined flow in the future. The next disciplined flow will be:

Log in to bmfiddle.com 
Fork from the clarity canvas.
Upload the imagery resources.

Now for each update:
Take a snapshot first. 
when in doubt, just hit that snapshot button
Move stickies on and off to the stack, or maybe the archive. Never
delete them.

The process above was used to create a bmfiddle.com canvas that looks like this:

BMfiddle step3