Opening the Kimono - Big (D)esign Conference, Dallas, TX, May 29, 2010
81
Opening the Kimono: A look behind the design process Russ Unger | @russu Director of Experience Planning Draftfcb Big Design Conference
-
Upload
russ-unger -
Category
Design
-
view
112 -
download
3
description
This presentation takes a detailed, behind-the-scenes look at their processes, including: research, IA/interaction design, wireframing/prototyping and visual design. Audience members will have an opportunity to see the various work product and processes of 4 designers—–each using different tools to tackle the same problem, from requirements to visual design.
Transcript of Opening the Kimono - Big (D)esign Conference, Dallas, TX, May 29, 2010
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.
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
