2012-09-24 Workshop: Wireframe mockups


Published on

Bmore Skills Workshop
Led by Catharine Robertson

Published in: Technology

2012-09-24 Workshop: Wireframe mockups

  1. 1. Wireframe mockups:You can do this right now.Catharine RobertsonThe Berndt Group
  2. 2. What I bring to the Lean conversation:I work for a successful entrepreneur whofounded 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. 3. My role: Wireframe Mockups | Catharine Robertson
  4. 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. 5. What is a wireframe?A non-graphical drawing showing thestructure (and often the behavior) of eachpage (or interaction) on a site (or in anapplication).  Wireframe Mockups | Catharine Robertson
  6. 6. WireframesServe 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. 7. Wireframe is another name for blueprint. http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2 Wireframe Mockups | Catharine Robertson
  8. 8. How will rooms be used? http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2australianfloorplans.com*images*264skdpl.jpg/ Wireframe Mockups | Catharine Robertson
  9. 9. This is a wireframe.h#p://sixrevisions.com/user‐interface/website‐wireframing/  Wireframe Mockups | Catharine Robertson
  10. 10. This is a wireframe.http://www.itendures.com/2012/04/paper-wireframes-for-a-meal-planning-touch-application/ Wireframe Mockups | Catharine Robertson
  11. 11. This is a wireframe.https://mockupstogo.mybalsamiq.com/projects/web/Coming+Soon+Landing+Page/ Wireframe Mockups | Catharine Robertson
  12. 12. BalsamiqPros:CHEAP! (from $79)Use demo for freeDesktop or pluginsHand drawn lookDrag & drop = instantAnnotationsCons:No templatingCrude prototypingHand drawn lookBad for big projects Wireframe Mockups | Catharine Robertson
  13. 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. 14. 5 Questions to Choose the Right ToolWho are you How quickly do you need acommunicating with? clickable prototype?•  Clients/customers •  At every step•  Developers •  When wireframes are done•  Team members•  End users What is the prototype for? •  Communicating functionalityWhat are you •  User testingcommunicating?•  How it works What is your budget?•  How to build it•  Process management Wireframe Mockups | Catharine Robertson
  15. 15. Things to Know Before DrawingGoals of the site/app What is the wireframe for?•  Direct sales? •  Explain to peers, partners•  Sales leads? •  Explain to developers,•  Brand awareness? designers •  User testingUser types•  Their goals Value proposition•  Their motivations User data•  Their likely tasks Competitive analysis Wireframe Mockups | Catharine Robertson
  16. 16. “ABC Home Insurance” CompanyGoals 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. 17. “ABC Home Insurance” wireframe Wireframe Mockups | Catharine Robertson
  18. 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. 19. Theater ticketing interface requirementsSystem 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. 20. Go mock something up!Choose the right tool: Know before drawing:Who are you communicating Goals of the sitewith? User typesWhat are you communicating? What is the wireframe for?How quickly do you need a Value propositionclickable prototype? User dataWhat is the prototype for? Competitive analysisWhat is your budget? System requirements Be nice to the users Wireframe Mockups | Catharine Robertson
  21. 21. Catharine Robertsoncatharinerobertson@gmail.com@cathroBaltimore UX Book Clubmeetup.com/Baltimore-UX-Book-Club/http://www.irise.com/ Wireframe Mockups | Catharine Robertson