View
2.712
Download
3
Embed Size (px)
DESCRIPTION
Bmore Skills Workshop Led by Catharine Robertson
Citation preview
Wireframe mockups: You can do this right now. Catharine Robertson The Berndt Group
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
My role:
Wireframe Mockups | Catharine Robertson
Some of my tools: • User task flows • User personas • Sitemaps • Card sorting • Affinity diagrams • Mental models • Content inventories • Taxonomies • Wireframes
Wireframe Mockups | Catharine Robertson
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
Wireframes
Serve as: • Functional specification • Work order • Contractual agreement • Process management
document • Project artifact
Consumed by: • Team peers • Manager • Co-founder • Visual designer • Developer • QA tester • Client/customer
Wireframe Mockups | Catharine Robertson
Wireframe is another name for blueprint.
http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2
Wireframe Mockups | Catharine Robertson
How will rooms be used?
http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2
Wireframe Mockups | Catharine Robertson
australianfloorplans.com*images*264skdpl.jpg/
This is a wireframe.
h#p://sixrevisions.com/user‐interface/website‐wireframing/
Wireframe Mockups | Catharine Robertson
This is a wireframe.
Wireframe Mockups | Catharine Robertson
http://www.itendures.com/2012/04/paper-wireframes-for-a-meal-planning-touch-application/
This is a wireframe.
https://mockupstogo.mybalsamiq.com/projects/web/Coming+Soon+Landing+Page/
Wireframe Mockups | Catharine Robertson
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
Other wireframing tools
• Microsoft Visio • Omnigraffle (Mac only) • HotGloo • Mockflow • Cacoo • WireframeSketcher • FlairBuilder • Mockingbird • ProtoShare • JustInMind • iPlotz • Pidoco • Gliffy • JumpChart • Creately • Lovely Charts • Templatr
• Foundation – “coded wireframing” for rapid prototyping responsive design
• Sinatra – Ruby “micro-framework” for rapid prototyping
• Pencil - open source browser add-on wireframing & prototyping tool (available for Firefox, other versions coming soon)
• Stencil kits: – for Mac OS – Facebook apps – OmniGraffle, Visio – PSD files – Flex, Eclipse – Yahoo design stencils for many apps – EightShapes’ Unify for Adobe apps – Keynotopia for Keynote
Wireframe Mockups | Catharine Robertson
5 Questions to Choose the Right Tool
Who are you communicating with? • Clients/customers • Developers • Team members • End users What are you communicating? • How it works • How to build it • Process management
How quickly do you need a clickable prototype? • At every step • When wireframes are done What is the prototype for? • Communicating functionality • User testing
What is your budget?
Wireframe Mockups | Catharine Robertson
Things to Know Before Drawing
Goals of the site/app • Direct sales? • Sales leads? • Brand awareness? User types • Their goals • Their motivations • Their likely tasks
What is the wireframe for? • Explain to peers, partners • Explain to developers,
designers • User testing Value proposition User data Competitive analysis
Wireframe Mockups | Catharine Robertson
“ABC Home Insurance” Company
Goals of the site/app • Gather sales leads • Brand awareness
User types • Maryland homeowners • Might have just bought a
house
What is the wireframe for? • Explain to client how site will
work
Value proposition “Your deposit is 100% refundable anytime” User data Most users come to site by Googling “maryland homeowners insurance” Competitive analysis Company is unique; competitors offer different type of insurance.
Wireframe Mockups | Catharine Robertson
“ABC Home Insurance” wireframe
Wireframe Mockups | Catharine Robertson
“XYZ Children’s Theater”
Goals of the site/app • Sell event tickets • Feature upcoming events • Advertise & sell spaces in theater
classes for children • Take donations • Give directions/contact info
User types • Show attendees • Prospective students • Children & adults • Gift givers • Donors
What is the wireframe for? • Explain to client how site will work
Value proposition “Play acting is a child’s rehearsal for life.” User data New business, no existing site data. Aiming to attract children of all socio-economic backgrounds. But parents will be the primary web site visitors. Competitive analysis The only other local competitor doesn’t sell tickets online. As for other children’s entertainment, movies are cheaper and more plentiful than XYZ Children’s Theater shows, so that’s a challenge.
Wireframe Mockups | Catharine Robertson
Theater ticketing interface requirements
System requirements • List all shows • Sort by date • Sort by event type • Buy multiple tickets • Buy tickets for multiple
shows • Buy season tickets • Use credit cards • Ask for donations at
checkout
Be nice to the users • Don’t let users see what’s
not available • Let them cancel anytime • Let them back up to a
previous step • Pre-fill everything possible • Use a conversational tone
Wireframe Mockups | Catharine Robertson
Go mock something up!
Choose the right tool: Who are you communicating with? What are you communicating? How quickly do you need a clickable prototype? What is the prototype for? What is your budget?
Know before drawing: Goals of the site User types What is the wireframe for? Value proposition User data Competitive analysis System requirements Be nice to the users
Wireframe Mockups | Catharine Robertson
http://www.irise.com/
Catharine Robertson [email protected] @cathro Baltimore UX Book Club meetup.com/Baltimore-UX-Book-Club/
Wireframe Mockups | Catharine Robertson