Your SlideShare is downloading. ×
2012-09-24 Workshop: Wireframe mockups
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2012-09-24 Workshop: Wireframe mockups


Published on

Bmore Skills Workshop …

Bmore Skills Workshop
Led by Catharine Robertson

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Wireframe mockups:You can do this right now.Catharine RobertsonThe Berndt Group
  • 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. 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 thestructure (and often the behavior) of eachpage (or interaction) on a site (or in anapplication).  Wireframe Mockups | Catharine Robertson
  • 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. Wireframe is another name for blueprint.,2 Wireframe Mockups | Catharine Robertson
  • 8. How will rooms be used?,*images*264skdpl.jpg/ Wireframe Mockups | Catharine Robertson
  • 9. This is a wireframe.h#p://‐interface/website‐wireframing/  Wireframe Mockups | Catharine Robertson
  • 10. This is a wireframe. Wireframe Mockups | Catharine Robertson
  • 11. This is a wireframe. Wireframe Mockups | Catharine Robertson
  • 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. 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 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. 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. “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. “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 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. 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. Catharine UX Book Wireframe Mockups | Catharine Robertson