A survey of wireframe tools for entrepreneurs & startups. Invited presentation given 7/24/12 at Baltimore Lean Startup's "Tools of the Lean Trade."

1. Wireframes:
Choose the Right Tool for the Job
Catharine Robertson
The Berndt Group

2. What I bring to the Lean conversation:
I work for a successful entrepreneur who
founded his startup in 1991.
“Successful” means
• Grew from 1 person to 30 people
• 20+ years of profitability, 0 layoffs
• Privately held
• 85% client retention
• High employee retention
Tools of the Lean Trade | Catharine Robertson

3. Full disclosure:
Not Lean, or even lean.
Not Agile, but occasionally agile(ish).
We do waterfall.
[Insert controversial statements here.]
Tools of the Lean Trade | Catharine Robertson

4. Our Project Process
Tools of the Lean Trade | Catharine Robertson

5. Our Project Process
Tools of the Lean Trade | Catharine Robertson

6. Our Project Process
luxury
of the
waterfall
Tools of the Lean Trade | Catharine Robertson

7. My role:
Tools of the Lean Trade | Catharine Robertson

8. Some of my tools:
• User task flows
• User personas
• Sitemaps
• Card sorting
• Affinity diagrams
• Mental models
• Content inventories
• Taxonomies
• Wireframes
Tools of the Lean Trade | Catharine Robertson

9. Wireframes
Serve as: Consumed by:
• Functional specification • Team peers
• Work order • Manager
• Contractual agreement • Co-founder
• Process management • Visual designer
document • Developer
• Project artifact • QA tester
! • Client/customer!
Tools of the Lean Trade | Catharine Robertson

10. Wireframe is another name for blueprint.
http://mffanrodders.wordpress.com/page/120/?archives-list
Tools of the Lean Trade | Catharine Robertson

11. This is a wireframe.
"##$%&&'()*+,('(-.'/0-1&2'+*3(.#+*450+&6+7'(#+36(*+4*51(.8&!
Tools of the Lean Trade | Catharine Robertson

12. This is a wireframe.
http://wireframes.linowski.ca/tag/annotation/
Tools of the Lean Trade | Catharine Robertson

13. Caveat & Caution
A wireframe that can’t be or become a working
prototype will cost you time and/or money.
(Sometimes worth it, sometimes not.)
Money and time you save up front on
wireframing tools will be spent later on html/css
production, on credibility with clients/customers,
or on realignment with designers/developers.
Tools of the Lean Trade | Catharine Robertson

14. Wireframing & Prototyping Tools
Tools of the Lean Trade | Catharine Robertson

15. Pen & paper
Pros:
FREE!
Limited only by paper
size & imagination
Group collaboration
Instant disambiguation
Cons:
Paper size limitation
Not digital
Annotations limited
Prototypes are hard
No rich interaction
Tools of the Lean Trade | Catharine Robertson

16. Paper Prototyping
For wireframes (specs) For prototypes (user testing)
http://www.interaction-design.org/encyclopedia/contextual_design.html http://courses.csail.mit.edu/6.831/wiki/index.php?title=Projects/Build-It-Yourself_Universe
Tools of the Lean Trade | Catharine Robertson

17. Paper
Prototyping
Pros:
CHEAP! Only the cost of
supplies
User testing
Group collaboration
Hi-fi ones look like the
real product
Cons:
Bad for big projects
PITA to prep
PITA to redraw digitally
Tools of the Lean Trade | Catharine Robertson

18. Until UX Pin,
that is.
Pros:
CHEAP! (from $37)
Pre-done kits save time
Paper prototype
recognition
Cons:
Proprietary kits = finite
App recognizes only UX
Pin paper prototypes
Bad for big projects
Tools of the Lean Trade | Catharine Robertson

19. Adobe
InDesign
Pros:
Sophisticated templating
Robust (history of print)
Excellent annotating
Layers
Navigation of app
Pixel-perfect
Good for big projects
Cons:
Expensive ($1000+)
High learning curve
No prototyping per se
Tools of the Lean Trade | Catharine Robertson

20. Adobe
Fireworks
Pros:
Hi-fi
Prototyped wireframes
Export to html or css
Clickable pdf prototypes
Templating system
Comes with templates
Adobe’s ConnectNow
Cons:
$300
Medium learning curve
Proprietary
Tools of the Lean Trade | Catharine Robertson

21. OmniGraffle
Pros:
CHEAP! ($100)
Easy to learn
Diagramming app
Many stencils available
Templating system
Outline view
Import/export; linking pdf
Cons:
No Windows
Not robust
Primitive templating
Tools of the Lean Trade | Catharine Robertson

22. Visio
Pros:
From $170
Easy to learn
Diagramming app
Many stencils available
Templating system
MS-connected
Cons:
No Mac
Not robust
Primitive templating
Tools of the Lean Trade | Catharine Robertson

23. iRise
Pros:
Most robust product
Simulations, not just
prototypes
No coding needed
Free, simplified version
for mobile only
Cons:
Made for enterprise
“Adoption center” http://www.irise.com/irise_in_action/
Full version $6000++
Tools of the Lean Trade | Catharine Robertson

24. Axure
Pros:
Hi-fi or lo-fi (sketching)
Rich html prototypes, no
coding
Sophisticated templating
Sophisticated func spec
system w/MS Word
Client review online
Change history
Feedback tracking
Cons:
Expensive (from $589)
Tools of the Lean Trade | Catharine Robertson

25. Balsamiq
Pros:
CHEAP! (from $79)
Use demo for free
Desktop or plugins
Hand drawn look
Drag & drop = instant
Annotations
Cons:
No templating
Crude prototyping
Hand drawn look
Bad for big projects
Tools of the Lean Trade | Catharine Robertson

26. Others
• HotGloo • Foundation – “coded wireframing”
• Mockflow for rapid prototyping responsive
• Cacoo design
• WireframeSketcher • Sinatra – Ruby “micro-framework”
for rapid prototyping
• FlairBuilder • Pencil - open source browser add-
• Mockingbird on wireframing & prototyping tool
• ProtoShare (available for Firefox, other
• JustInMind versions coming soon)
• iPlotz • Stencil kits:
• Pidoco – for Mac OS
– Facebook apps
• Gliffy – OmniGraffle, Visio
• JumpChart – PSD files
• Creately – Flex, Eclipse
• Lovely Charts – Yahoo design stencils for many apps
• Templatr – EightShapes’ Unify for Adobe apps
– Keynotopia for Keynote
!
Tools of the Lean Trade | Catharine Robertson

27. 5 Questions to Choose the Right Tool
Who are you How quickly do you need a
communicating with? prototype?
• Clients/customers • At every step
• Developers • When wireframes are done
• Team members
• End users What is the prototype for?
• Communicating functionality
What are you • User testing
communicating?
• How it works
What is your budget?
• How to build it
• Process management
!
Tools of the Lean Trade | Catharine Robertson

28. For more info
• smashingmagazine.com • alistapart.com
• uxmatters.org • mashable.com
• boxesandarrows.com • uxbooth.com
!
Tools of the Lean Trade | Catharine Robertson

29. Catharine Robertson
catharinerobertson@gmail.com
@cathro
http://www.irise.com/
Tools of the Lean Trade | Catharine Robertson