ux israel - live - the right way to wireframe
DESCRIPTION
TRANSCRIPT
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.