ux israel - live - the right way to wireframe
DESCRIPTION
TRANSCRIPT
![Page 1: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/1.jpg)
THE RIGHT WAY TO WIREFRAMEUXI Live! 2011 | #rwtw
Russ Unger | @russuImage Source © Time Inc.
![Page 2: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/2.jpg)
OUR WORKWe don’t show
![Page 3: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/3.jpg)
DESIGNERSDo It
![Page 4: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/4.jpg)
DESIGNERSDo It
![Page 5: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/5.jpg)
DEVELOPERSDo It
![Page 6: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/6.jpg)
DEVELOPERSDo It
![Page 7: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/7.jpg)
WHAT ABOUT UX?
![Page 8: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/8.jpg)
OUR WORKWe don’t show
![Page 9: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/9.jpg)
MINE, TOO.“My work is proprietary.”
![Page 10: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/10.jpg)
A WIREFRAME FROM...Have you ever seen
![Page 11: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/11.jpg)
Peter Morville
![Page 12: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/12.jpg)
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
![Page 13: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/13.jpg)
Jared Spool
“I’ve never done a wireframe*”
*
![Page 14: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/14.jpg)
WIREFRAMING OR PROTOTYPINGWhat is the best tool?
![Page 15: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/15.jpg)
“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
![Page 16: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/16.jpg)
“Can, too!” “Cannot!”
“Can, too!” “Cannot!”
“Can, too!” “Cannot!”
“Can, too!” “Cannot!”
“Can, too!” “Cannot!”
![Page 17: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/17.jpg)
sigh.
![Page 18: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/18.jpg)
I <3 and...
![Page 19: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/19.jpg)
MISSING THE POINTArguing about wireframes vs. prototypes is
They are just Communication Tools.
![Page 20: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/20.jpg)
It was time toNUT UP OR SHUT UP
![Page 21: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/21.jpg)
4 DESIGNERS
![Page 22: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/22.jpg)
Russ Will Fred Todd
![Page 23: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/23.jpg)
WIREFRAMING OR PROTOTYPINGWhat is the best tool?
![Page 24: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/24.jpg)
Balsamiq Mockups Omnigraffle Axure RP
HTML & Fireworks
Wireframes Prototypes
![Page 25: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/25.jpg)
RULESThree
![Page 26: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/26.jpg)
- EVERYONE uses a different tool- EVERYTHING is documented- NO ONE talks to each other
RULESThree
![Page 27: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/27.jpg)
CASE STUDYThe
![Page 28: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/28.jpg)
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
![Page 29: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/29.jpg)
LEND4HEALTH.COMwww.
![Page 30: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/30.jpg)
whew.
![Page 31: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/31.jpg)
OBJECTIVEThe
Design the path for funding a loan.
![Page 32: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/32.jpg)
- 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
![Page 33: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/33.jpg)
whew.
![Page 34: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/34.jpg)
APPROACHThe
![Page 35: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/35.jpg)
Gabby Hon@gabbyhon
![Page 36: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/36.jpg)
User & CompanyRESEARCH
![Page 37: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/37.jpg)
UserPERSONAS
![Page 38: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/38.jpg)
Task AnalysisGRID
![Page 39: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/39.jpg)
InspirationLIBRARY
![Page 40: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/40.jpg)
This is howI DID IT
![Page 41: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/41.jpg)
RequirementsANALYSIS
![Page 42: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/42.jpg)
PersonaCONSIDERATION
![Page 43: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/43.jpg)
InformationARCHITECTURE
![Page 44: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/44.jpg)
InformationARCHITECTURE
![Page 45: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/45.jpg)
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/
![Page 46: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/46.jpg)
Lend4Health.comHome Page(0.0.0.0)
Search Loans to Fund(1.0.0.0)
Loan Details(1.1.0.0)
SKETCHINGPencil & Paper
![Page 47: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/47.jpg)
15 SKETCHES / 3 SCREENSQuantity over quality
![Page 48: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/48.jpg)
The OriginalPRESENTATION
![Page 49: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/49.jpg)
Lend4Health.comHome Page(0.0.0.0)
Search Loans to Fund(1.0.0.0)
Loan Details(1.1.0.0)
WIREFRAMINGBalsamiq Mockups
![Page 50: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/50.jpg)
Brad Simpson@simplybrad
![Page 51: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/51.jpg)
Lend4Health.comHome Page(0.0.0.0)
Search Loans to Fund(1.0.0.0)
Loan Details(1.1.0.0)
VISUAL DESIGNBrad Simpson
![Page 52: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/52.jpg)
Lend4Health.comHOME PAGE
Lend4Health.comSEARCH LOANS
Lend4Health.comLOAN DETAILS
![Page 53: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/53.jpg)
Pretty Cool.
![Page 54: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/54.jpg)
ENTIRE PROCESSHere’s the
![Page 55: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/55.jpg)
![Page 56: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/56.jpg)
Four DesignersLOTS OF OVERLAP
![Page 57: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/57.jpg)
InformationARCHITECTURE
![Page 58: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/58.jpg)
InformationARCHITECTURE
![Page 59: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/59.jpg)
InformationARCHITECTURE
![Page 60: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/60.jpg)
SKETCHINGPencil & Paper
![Page 61: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/61.jpg)
SKETCHINGPencil & Paper
![Page 62: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/62.jpg)
SKETCHINGPencil & Paper
![Page 63: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/63.jpg)
SKETCHINGPencil & Paper
![Page 64: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/64.jpg)
DESIGNVisual
![Page 65: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/65.jpg)
DESIGNVisual
![Page 66: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/66.jpg)
DESIGNVisual
![Page 67: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/67.jpg)
DESIGNVisual
![Page 68: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/68.jpg)
http://is.gd/curpN
VIDEOSOnline
http://is.gd/curw2http://is.gd/curowhttp://is.gd/curls
![Page 69: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/69.jpg)
- UNABLE to talk/collaborate- RESEARCH handed to us- NO FORMAL usability testing- DEVELOPER was unknown
CHALLENGESThe primary
![Page 70: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/70.jpg)
- SKETCHING (a lot) is THINKING (a lot)- CRITIQUE is extremely essential- BEST TOOL: the one you know
PRINCIPLESCore
![Page 71: UX Israel - Live - The Right Way to Wireframe](https://reader034.vdocuments.us/reader034/viewer/2022052618/54c7cc494a795910358b45e4/html5/thumbnails/71.jpg)
THANK YOU!UXI Live! 2011 | #rwtw
Russ Unger | @russuImage Source © Time Inc.