2012-09-24 Workshop: Wireframe mockups

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:


Some of my tools: •  User task flows •  User personas •  Sitemaps •  Card sorting •  Affinity diagrams •  Mental models •  Content inventories •  Taxonomies •  Wireframes


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).


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 is another name for blueprint.

http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2


How will rooms be used?

http://www.houseofmaupassant.com/Plans-de-la-maison-de-Maupassant,2


australianfloorplans.com*images*264skdpl.jpg/

This is a wireframe.

h#p://sixrevisions.com/user‐interface/website‐wireframing/




http://www.itendures.com/2012/04/paper-wireframes-for-a-meal-planning-touch-application/


https://mockupstogo.mybalsamiq.com/projects/web/Coming+Soon+Landing+Page/


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


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


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?


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


“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.


“ABC Home Insurance” wireframe


“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.


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


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


http://www.irise.com/

Catharine Robertson [email protected] @cathro Baltimore UX Book Club meetup.com/Baltimore-UX-Book-Club/


2012-09-24 Workshop: Wireframe mockups

Technology

Transcript of 2012-09-24 Workshop: Wireframe mockups