FRONTEND 2011 - The Right Way To Wireframe

THE RIGHT WAY TO WIREFRAMEFRONTEND 2011 | #rwtwRuss Unger | @russu

We don’t show OUR WORK

DESIGNERS Do It

DEVELOPERS Do It

WHAT ABOUT UX?

We don’t show OUR WORK

“My work is proprietary.” MINE, TOO.

Have you ever seen A WIREFRAME FROM...

Peter Morville

al Navigation Default state store009 Version 1.0 logo search 2 Jesse James Garrett 1 cartn HBR today on current account blogs books authors HBS downloads page highlights timely content from the blogs, magazine, hbr magazine 3 s sections. explore hbr 4ea expand your knowledge build your expertise discover new approaches provides a focal point for all e-commerce related links. page allows users to ﬁnd aggregated links to content from Partially expanded state uthors across blogs, magazine, and books sections.drawer store logo searchandable area encourages and facilitates exploration of cart y subject. today on current account blogs books authors HBS downloadsyour knowledge hbr magazine features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes ategory in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality managementur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the currentment Skills” category in search results. new approaches features editorially selected sub-categories from the current 5 Global business expand your knowledge Jesse James Garret Time management build your expertise 6 Knowledge management discover new approaches 7Methodologies” category in search results. nks Fully expanded state ks drive users interested in exploring further to dedicated store ages. logo search cart today on current account blogs books authors HBS downloads hbr magazine explore hbr more topics » more skills » more methods » 8 Strategy Decision making Business processes Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches sign | Harvard Business Review

“I’ve never done a wireframe*”* Jared Spool

What is the best tool? WIREFRAMING OR PROTOTYPING

“Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t saythat works for everyone just because it works for you now!” Me | @russu

“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”

I <3 and...

They are just Communication Tools.Arguing about wireframes vs. prototypes is MISSING THE POINT

It was time to NUT UP OR SHUT UP

4 DESIGNERS

Russ Will Fred Todd

What is the best tool? WIREFRAMING OR PROTOTYPING

Balsamiq HTML & Omnigraffle Axure RPMockups Fireworks Wireframes Prototypes

Three RULES

Three RULES - EVERYONE uses a different tool - EVERYTHING is documented - NO ONE talks to each other

The CASE STUDY

“If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?” Tori Tuncan 98 Loans for a total of $72,848

www. LEND4HEALTH.COM

Design the path for funding a loan. The OBJECTIVE

How it’s done TODAY - user reviews profiles/needs in the blog format - user determines amount they can loan - user contacts lend4health - lend4health connects user and loan recipient - lend4health supplies loan agreement - user funds loan via paypal - lender repays funds via paypal per agreement - lender supplies updates to child’s progress to lend4health and lender lend4health updates progress on website - continues until loan is paid back

The APPROACH

Gabby Hon@gabbyhon

User & Company RESEARCH

User PERSONAS

Task Analysis GRID

Inspiration LIBRARY

This is how I DID IT

Requirements ANALYSIS

Persona CONSIDERATION

Information ARCHITECTURE

Angela: Loan Funder USER JOURNEY Angela Reviews Angela arrives at Angela Searches for a Details of Loan Lend4Health.com Loan to Fund com/photos/ Requesthttp://www.ﬂickr. 06/2912606267/ (0.0.0.0) (1.0.0.0)11762156@N (1.1.0.0)

Pencil & Paper SKETCHINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)

Quantity over quality 15 SKETCHES / 3 SCREENS

The Original PRESENTATION

Balsamiq Mockups WIREFRAMINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)

Brad Simpson@simplybrad

Brad Simpson VISUAL DESIGNLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)

Lend4Health.com LOAN PAGE SEARCH LOANS HOMEDETAILS

Pretty Cool.

Here’s the ENTIRE PROCESS

Four Designers LOTS OF OVERLAP

Information ARCHITECTURE

Pencil & Paper SKETCHING

Visual DESIGN

Online VIDEOShttp://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN

Changing Times & NEW CONSIDERATIONS

Responsive DESIGN

Biggest, Smallest, “Just Right” GOLDILOCKSMatthew Milan Source: Wireframes Magazine http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/ @mmilan

Localization & LANGUAGES

SoWHAT?

The primary CHALLENGES - UNABLE to talk/collaborate - RESEARCH handed to us - NO FORMAL usability testing - DEVELOPER was unknown

Core PRINCIPLES - SKETCHING (a lot) is THINKING (a lot) - CRITIQUE is extremely essential - BEST TOOL: the one you know Find Your Right Way Here!

THANK YOU! FRONTEND 2011 | #rwtwRuss Unger | @russu

http://www.frontend2011.com	280
http://www.russunger.com	88
http://a0.twimg.com	2

FRONTEND 2011 - The Right Way To Wireframe

by Russ Unger on Oct 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 370

Statistics

FRONTEND 2011 - The Right Way To Wireframe — Presentation Transcript