Download - The Right Way to Wireframe - WebVisions 2011

THE RIGHT WAY TO WIREFRAMEWebVisions 2011 | #rwtw

Russ Unger | @russu

Image Source © Time Inc.

OUR WORKWe don’t show...

DESIGNERS DO IT

DEVELOPERS DO IT

HAVE YOU EVER SEENA WIREFRAME FROM

jesse james garrettpeter morvillejared spool

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


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


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 garrett

“I’ve never done a wireframe*”

jared spool

*

WIREFRAMING/PROTOTYPINGWhat’s the best tool?

WIREFRAMING/PROTOTYPINGWhat’s 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!”





I <3and...

YOU’RE MISSING THE POINTIf you’re still arguing about wireframes vs. prototypes

OUR WORKWe don’t show...

NOT SO ANONYMOUS COWARD

“My work is proprietary.”

NUT UP OR SHUT UP

4 DESIGNERS 3 CAVEATS

1 PROBLEM

WILLRUSS (that’s me)

TODDFRED

CAVEATS.use a different tool

.no talking to each other

.document everything

OMNIGRAFFLEBALSAMIQ

HTML/FIREWORKSAXURE RP PRO

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

96 Loans for a total of $67,452

LEND4HEALTH.COM

THE APPROACH

@gabbyhon

REQUIREMENTS? IT’S BEEN YEARS

task analysis grid

inspiration library

THIS IS HOW I DID IT

requirements

personas

information architecture

Part-time working mother of 8 year old son Avery who is able to stay with a babysitter several hours a day. Angela has been through the gamut of testing and wants to help others.

http://www.flickr.com/photos/11762156@N06/2912606267/

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)

Meet AngelaThe Loan Funder

user journey

sketching

Lend4Health.comHome Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

15 SKETCHES / 3 SCREENSQuantity over quality

i even sketched this presentation

wireframing




@simplybrad

visual design




pretty cool

the entire process

THIS IS THE OVERLAPFour Different Designers

information architecture

sketching

visual design

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

http://is.gd/curpNhttp://is.gd/curw2

CHALLENGES.couldn’t talk to each other

.research handed to us

.no “formal” usability testing

PRINCIPALS.sketch (a lot)

.practice critique

.the best tool is the one you know