Opening the Kimono:A look behind the design process

Russ Unger | @russuDirector of Experience Planning

DraftfcbBig Design Conference

no one shows their work.

no one shows their work

IA Summit2009

http://pimpformationarchitect.com/?p=67

no one shows their work

have you ever seen a wireframe from:

JJG? Peter Morville?

Jared Spool?

no one shows their work

JJG?

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

1

2

Default state

Partially expanded state

Fully expanded state

4

3

6

more skills »more topics » more methods »8

5 7

Jesse James Garrett

no one shows their work

Peter Morville?

no one shows their work

Jared Spool?

no one shows their work

“My work is PROPRIETARY”

no one shows their work

it’s time to ask your boss to let you show your work.

wireframing was the obvious choice.

wireframing was the obvious choice

what is the best tool?

HTML

Omnigraffle

Axure

Flash Catalyst

iRise

Powerpoint

Visio

Fireworks

Balsamiq

Keynote

Pencil & Paper

wireframing was the obvious choice

“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

wireframing was the obvious choice

“Can, too!” “Cannot!”

“Can, too!” “Cannot!”

“Can, too!” “Cannot!”

“Can, too!” “Cannot!”

“Can, too!” “Cannot!”

wireframing was the obvious choice

WTF?!

wireframing was the obvious choice

I <3but...

wireframing was the obvious choice

it’s time to end the debate of wireframes vs. prototypes

wireframing was the obvious choice

if you’re still arguing about wireframes and prototypes, you are missing the point.

wireframing was the obvious choice

they’re just communication tools.

nut up or shut up.

nut up or shut up

i calleda few friends.

nut up or shut up

i calleda few friends.

Todd Zaki Warfel@zakiwarfelMessagefirst

Will Evans@semanticwill

Semantic Foundry

Fred Beecher@fred_beecher

eVantage

nut up or shut up

i calleda few friends.

Todd Zaki Warfel@zakiwarfelMessagefirst

Will Evans@semanticwill

Semantic Foundry

Fred Beecher@fred_beecher

eVantage

2 prototypers!(gasp!)

nut up or shut up

4 designers.1 problem.

nut up or shut up

2 rules.

nut up or shut up

each designer uses a different tool.

nut up or shut up

Balsamiq Mockups Fireworks

AxureOmnigraffle

nut up or shut up

no talking.

nut up or shut up

oh...

document everything.

sidebar

sidebar

we could have designedanything.

sidebar

a college website without

girls under trees.

sidebar

a website sellingaffordance faucets.

sidebar

the projecthad to be for a non-profit

and had to be real.

Tori Tuncan & Lend4Health

tori tuncan & lend4health

Tori Tuncan@lend4health

www.lend4health.com

“If we can lend a friend, or even a stranger, $5 at a coffee shop, why can't we do the same for

health?”

tori tuncan & lend4health

tori tuncan & lend4health

tori tuncan & lend4health

whew.

tori tuncan & lend4health

connecting people is a manual process.

tori tuncan & lend4health

Never doubt that a small group of thoughtful,

committed, citizens can change the world. Indeed,

it is the only thing that ever has.

~Margaret Mead

requirements & research

research & requirements

Gabby Hon@gabbyhon

http://linkedin.com/in/gabbyhon

@uxbookclubchicagohttp://uxbookclubchicago.org

Available: July 1st!

research & requirements

research & requirements

research & requirements

objective:

design the path for funding a loan.

research & requirements

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

research & requirements

whew.

research & requirements

a very manual process

this is how i do it.

requirements

Requirements Courtesy of:

Gabby Hon@gabbyhonstaywiththegroup.com

this is how i do it

this is how i do it

personas

information architecturethis is how i do it

information architecturethis is how i do it

information architecturethis is how i do it

user journey

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

this is how i do it

sketchingLend4Health.com

Home Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

this is how i do it

sketchingLend4Health.com

Home Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

this is how i do it

quantity over quality.

sketchingLend4Health.com

Home Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

15 sketches for 3 screens.

this is how i do it

quantity over quality.

sketchingthis is how i do it

sketchingthis is how i do it

i even sketched this presentation.

50% off code:friendofruss

(“friend of russ”)

wireframingthis is how i do it

wireframingLend4Health.com

Home Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

this is how i do it

visual design

Brad Simpson@simplybrad

http://i-rradiate.com

this is how i do it

visual designLend4Health.com

Home Page(0.0.0.0)

Search Loans to Fund(1.0.0.0)

Loan Details(1.1.0.0)

this is how i do it

kinda cool.

this is how i do it

the entire processthis is how i do it

this is how i do it

the overlap

the overlap

information architectureruss unger

the overlap

information architecturefred beecher

the overlap

information architecturewill evans

the overlap

sketchingruss unger

the overlap

sketchingtodd zaki warfel

the overlap

sketchingfred beecher

the overlap

sketchingwill evans

the overlap

visual designruss unger

the overlap

visual designtodd zaki warfel

the overlap

visual designfred beecher

the overlap

visual designwill evans

the overlap

the videosRuss UngerBalsamiq Mockupshttp://is.gd/curls

Todd Zaki WarfelFireworks / HTMLhttp://is.gd/curpN

Fred BeecherAxurehttp://is.gd/curw2

Will EvansOmnigrafflehttp://is.gd/curow