2012-09-24 Workshop: Wireframe mockups
- 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