Bmore Skills Workshop Led by Catharine Robertson

1. Wireframe mockups:
You can do this right now.
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 owned
• 90% client retention
• High employee retention
Wireframe Mockups | Catharine Robertson

3. My role:
Wireframe Mockups | Catharine Robertson

4. Some of my tools:
• User task flows
• User personas
• Sitemaps
• Card sorting
• Affinity diagrams
• Mental models
• Content inventories
• Taxonomies
• Wireframes
Wireframe Mockups | Catharine Robertson

5. What is a wireframe?
A non-graphical drawing showing the
structure (and often the behavior) of each
page (or interaction) on a site (or in an
application).
Wireframe Mockups | Catharine Robertson

6. 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
Wireframe Mockups | Catharine Robertson

7. Wireframe is another name for blueprint.
http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2
Wireframe Mockups | Catharine Robertson

8. How will rooms be used?
http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2
australianfloorplans.com*images*264skdpl.jpg/
Wireframe Mockups | Catharine Robertson

9. This is a wireframe.
h#p://sixrevisions.com/user‐interface/website‐wireframing/
Wireframe Mockups | Catharine Robertson

10. This is a wireframe.
http://www.itendures.com/2012/04/paper-wireframes-for-a-meal-planning-touch-application/
Wireframe Mockups | Catharine Robertson

11. This is a wireframe.
https://mockupstogo.mybalsamiq.com/projects/web/Coming+Soon+Landing+Page/
Wireframe Mockups | Catharine Robertson

12. 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
Wireframe Mockups | Catharine Robertson

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

14. 5 Questions to Choose the Right Tool
Who are you How quickly do you need a
communicating with? clickable 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
Wireframe Mockups | Catharine Robertson

15. Things to Know Before Drawing
Goals of the site/app What is the wireframe for?
• Direct sales? • Explain to peers, partners
• Sales leads? • Explain to developers,
• Brand awareness? designers
• User testing
User types
• Their goals Value proposition
• Their motivations User data
• Their likely tasks Competitive analysis
Wireframe Mockups | Catharine Robertson

16. “ABC Home Insurance” Company
Goals of the site/app Value proposition
• Gather sales leads “Your deposit is 100% refundable
• Brand awareness anytime”
User types User data
• Maryland homeowners Most users come to site by
• Might have just bought a Googling “maryland homeowners
house insurance”
What is the wireframe for? Competitive analysis
• Explain to client how site will Company is unique; competitors
work offer different type of insurance.
Wireframe Mockups | Catharine Robertson

17. “ABC Home Insurance” wireframe
Wireframe Mockups | Catharine Robertson

18. “XYZ Children’s Theater”
Goals of the site/app Value proposition
• Sell event tickets “Play acting is a child’s rehearsal for
• Feature upcoming events life.”
• Advertise & sell spaces in theater
classes for children User data
• Take donations New business, no existing site data.
• Give directions/contact info Aiming to attract children of all socio-
economic backgrounds. But parents will
be the primary web site visitors.
User types
• Show attendees
• Prospective students Competitive analysis
• Children & adults The only other local competitor doesn’t
sell tickets online. As for other children’s
• Gift givers entertainment, movies are cheaper and
• Donors more plentiful than XYZ Children’s
Theater shows, so that’s a challenge.
What is the wireframe for?
• Explain to client how site will work
Wireframe Mockups | Catharine Robertson

19. Theater ticketing interface requirements
System requirements Be nice to the users
• List all shows • Don’t let users see what’s
• Sort by date not available
• Sort by event type • Let them cancel anytime
• Buy multiple tickets • Let them back up to a
• Buy tickets for multiple previous step
shows • Pre-fill everything possible
• Buy season tickets • Use a conversational tone
• Use credit cards
• Ask for donations at
checkout
Wireframe Mockups | Catharine Robertson

20. Go mock something up!
Choose the right tool: Know before drawing:
Who are you communicating Goals of the site
with? User types
What are you communicating? What is the wireframe for?
How quickly do you need a Value proposition
clickable prototype? User data
What is the prototype for? Competitive analysis
What is your budget? System requirements
Be nice to the users
Wireframe Mockups | Catharine Robertson

21. Catharine Robertson
catharinerobertson@gmail.com
@cathro
Baltimore UX Book Club
meetup.com/Baltimore-UX-Book-Club/
http://www.irise.com/
Wireframe Mockups | Catharine Robertson