UX Israel - Live - The Right Way to Wireframe

THE RIGHT WAY TO WIREFRAMEUXI Live! 2011 | #rwtw

Russ Unger | @russuImage Source © Time Inc.

OUR WORKWe don’t show

DESIGNERSDo It

DESIGNERSDo It

DEVELOPERSDo It

DEVELOPERSDo It

WHAT ABOUT UX?

OUR WORKWe don’t show

MINE, TOO.“My work is proprietary.”

A WIREFRAME FROM...Have you ever seen

Peter Morville

discover new approachesexpand your knowledge build your expertise

StrategyLeadershipOrganizational changeInformation & technologyGlobal business

Decision makingInterpersonal skillsProject managementManaging uncertaintyTime management

Business processesManagement by objectivesQuality managementForecastingKnowledge management

explore hbr

storecart

accountdownloads

today on hbr authorsblogs current

magazine books HBS

logo search

discover new approachesexpand your knowledge build your expertiseexplore hbr

storecart

accountdownloads

today on hbr authorsblogs current

magazine books HBS

logo search

1. Today on HBRThis new page highlights timely content from the blogs, magazine, and books sections.

2. Store areaThis area provides a focal point for all e-commerce related links.

3. AuthorsThis new page allows users to find aggregated links to content from popular authors across blogs, magazine, and books sections.

4. Explore drawerThis expandable area encourages and facilitates exploration of content by subject.

5. Expand your knowledgeThis area features editorially selected sub-categories from the current “Topics” category in search results.

6. Build your expertiseThis area features editorially selected sub-categories from the current “Management Skills” category in search results.

7. Discover new approachesThis area features editorially selected sub-categories from the current “Tools & Methodologies” category in search results.

8. “More” linksThese links drive users interested in exploring further to dedicated landing pages.

Global NavigationSeptember 24, 2009

Web Redesign | Harvard Business Review

Version 1.0

discover new approachesexpand your knowledge build your expertise

StrategyLeadershipOrganizational changeInformation & technologyGlobal business

Decision makingInterpersonal skillsProject managementManaging uncertaintyTime management

Business processesManagement by objectivesQuality managementForecastingKnowledge management

explore hbr

storecart

accountdownloads

today on hbr authorsblogs current

magazine books HBS

logo search

12

Default state

Partially expanded state

Fully expanded state

43

6

more skills »more topics » more methods »8

5 7

Jesse James Garrett

Jesse James Garret

Jared Spool

“I’ve never done a wireframe*”

*

WIREFRAMING OR PROTOTYPINGWhat is the best tool?

“Now that I’m a consumer of wireframes, I want to see prototypes!”

Christina Wodtke | @cwodtke

“You can’t say that 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!”

sigh.

I <3 and...

MISSING THE POINTArguing about wireframes vs. prototypes is

They are just Communication Tools.

It was time toNUT UP OR SHUT UP

4 DESIGNERS

Russ Will Fred Todd

WIREFRAMING OR PROTOTYPINGWhat is the best tool?

Balsamiq Mockups Omnigraffle Axure RP

HTML & Fireworks

Wireframes Prototypes

RULESThree

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

RULESThree

CASE STUDYThe

97 Loans for a total of $69,407

“If we can give $5 to a stranger at a coffee shop, why can’t we

do that for healthcare?”

Tori Tuncan

LEND4HEALTH.COMwww.

whew.

OBJECTIVEThe

Design the path for funding a loan.

- 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

TODAYHow it’s done

whew.

APPROACHThe

Gabby Hon@gabbyhon

User & CompanyRESEARCH

UserPERSONAS

Task AnalysisGRID

InspirationLIBRARY

This is howI DID IT

RequirementsANALYSIS

PersonaCONSIDERATION

InformationARCHITECTURE

InformationARCHITECTURE

Angela arrives at Lend4Health.com

(0.0.0.0)

Angela Searches for a Loan to Fund

(1.0.0.0)

Angela Reviews Details of Loan Request

(1.1.0.0)

USER JOURNEYAngela: Loan Funder

http://www.flickr.com/photos/

11762156@N06/2912606267/

Lend4Health.comHome Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

SKETCHINGPencil & Paper

15 SKETCHES / 3 SCREENSQuantity over quality

The OriginalPRESENTATION

Lend4Health.comHome Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

WIREFRAMINGBalsamiq Mockups

Brad Simpson@simplybrad

Lend4Health.comHome Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

VISUAL DESIGNBrad Simpson

Lend4Health.comHOME PAGE

Lend4Health.comSEARCH LOANS

Lend4Health.comLOAN DETAILS

Pretty Cool.

ENTIRE PROCESSHere’s the

Four DesignersLOTS OF OVERLAP

InformationARCHITECTURE

InformationARCHITECTURE

InformationARCHITECTURE

SKETCHINGPencil & Paper

SKETCHINGPencil & Paper

SKETCHINGPencil & Paper

SKETCHINGPencil & Paper

DESIGNVisual

DESIGNVisual

DESIGNVisual

DESIGNVisual

http://is.gd/curpN

VIDEOSOnline

http://is.gd/curw2http://is.gd/curowhttp://is.gd/curls

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

CHALLENGESThe primary

- SKETCHING (a lot) is THINKING (a lot)- CRITIQUE is extremely essential- BEST TOOL: the one you know

PRINCIPLESCore

THANK YOU!UXI Live! 2011 | #rwtw

Russ Unger | @russuImage Source © Time Inc.