best practices: wireframing - from vision to reality
DESCRIPTION
Serial entrepreneur and CEO Joe Chin explains the simple method of wireframing.TRANSCRIPT
![Page 1: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/1.jpg)
Live Video Event Lunch and Learn
Wed Mar 7
Joe ChinCEO of SourcePad, Founder of Best PracticesSerial entrepreneur, worked with 60+ startups
Wireframing your Application : from Vision to Reality
12:10 PM
livestream.com/bestpracticesbusiness
• Problem : Vision w/o a destination• Why wireframing• Who should be wireframing• Approach / Best Practices• Case Studies• Tools of Trade• Tips
![Page 2: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/2.jpg)
Meet Joe…• 4 time founder / CEO• Raised $20 Million, 2 Exits
• Opinionated Guy…
• Entrepreneur teacher (60+ companies)
![Page 3: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/3.jpg)
Vision
--> ?
![Page 4: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/4.jpg)
Modus Operandi (from SourcePad)
1 Used by the majority of SourcePad clients
![Page 5: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/5.jpg)
Why wireframing?
Clarify
Level of detail --> Cost
Open up next level of Cust Development 1
1 Steve Blank's term
![Page 6: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/6.jpg)
Who should be wireframing?
UI / UX Person
Tech person
Entrepreneur
Marketing / Sales
<--- definitely
<--- perhaps (more on this later)
![Page 7: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/7.jpg)
Entrepreneur "I'm not technical"
Wireframing is not a technical chore
A lot easier than learning how to program
Fact 1:
Fact 2:
![Page 8: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/8.jpg)
What is wireframing?
Sketch - NOT beautiful
Focus on functionality
Aesthetics as it affects usability
![Page 9: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/9.jpg)
The 20-second wireframe
![Page 10: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/10.jpg)
The 20-second wireframe
Link: http://bit.ly/yBzAok
![Page 11: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/11.jpg)
Approach / Best Practices
KISS
Functional Comparables
Test Test & Test (or at least Zen)
![Page 12: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/12.jpg)
Side Note:
• UI/UX are professionals
How is this differentfrom hiring UI/UX
![Page 13: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/13.jpg)
Side Note:
• Testing is the rising tide that lifts all
How is this differentfrom hiring UI/UX
![Page 14: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/14.jpg)
Side Note:
• UI/UX can be great
How is this differentfrom hiring UI/UX
- if you have the $$
- if you can find a good one (they are rare)
BTW - if they don't mention testing --> run!
![Page 15: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/15.jpg)
Functional Comparables
Similar functions (not competitive)
Successful sites
- Have overcome usability- Have set conventions
![Page 16: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/16.jpg)
Case Study : GoodAdvice
Functional comparables
Blogs -- Posting
Premise: Allow entrepreneurs to communicate with their advisors
Yammer -- Notifications
Facebook -- Comments
![Page 17: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/17.jpg)
Case Study : GoodAdvice
Wireframe : Main functionality page
![Page 18: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/18.jpg)
Case Study : GoodAdvice
Comparable : Wordpress blog
![Page 19: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/19.jpg)
Case Study : GoodAdvice
Comparable : commenting function
![Page 20: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/20.jpg)
Case Study : GoodAdvice
Comparable : Facebook commenting
![Page 21: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/21.jpg)
Case Study : GoodAdvice
Wireframe : Email reminder
![Page 22: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/22.jpg)
Case Study : GoodAdvice
Comparable : Yammer Email reminder
![Page 23: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/23.jpg)
Case Study : Participame
Premise: Web marketplace for Mexico
Main functional comparable: xyz.com
Successful, fast-growing
![Page 24: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/24.jpg)
Case Study : ParticipameWireframe: Fastest way possible
![Page 25: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/25.jpg)
Case Study : Venuedex
Premise: Marketplace for venues
Artistry: not high
Wireframes: awesome
![Page 26: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/26.jpg)
Case Study : VenuedexMain page wireframe
![Page 27: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/27.jpg)
Sponsor
Web Mobile RoR iPhone Android
We build ideas
![Page 28: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/28.jpg)
Testing (quick note)
User testing covered in previous BP
Dont Make me Think? - Steve Krug
Slidedeck: http://bit.ly/yIG1Fn
Video Playback : http://bit.ly/A0Y52z
![Page 29: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/29.jpg)
Zen
Clear your mind - take on use case
Go away and come back, early morning
Other person (partner, co-worker)
Not as good as testing - but better than nothing
Not everyone can do this (most can't)
![Page 30: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/30.jpg)
Tools of the TradeGoogle docs, Balsamiq, paper & pen
Functional comparable template
Google doc templates
Home page: http://bit.ly/A2XU9mBlue home page: http://bit.ly/x1anjoProduct page: http://bit.ly/wu27LA
iPhone Home: http://bit.ly/x4M0VAiPhone Detail: http://bit.ly/x5CWyq
http://bit.ly/z6bJ7U
![Page 31: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/31.jpg)
Important Tips
Remember - doesn't have to be pretty
KISS
Put in the work / effort and JUST DO IT !
![Page 32: Best Practices: Wireframing - From Vision to Reality](https://reader034.vdocuments.us/reader034/viewer/2022042623/54b1e9214a79595f7b8b45f9/html5/thumbnails/32.jpg)
Happy Wireframing !
"Creating a New Market "
Wed Mar 28 @ NYU 44 West Fourth Street, Room #1-70
Jared Hecht: Co-founder GroupMe (sold for $50 mil to Skype)
Ben Lerer: Co-founder/CEO Thrillist.com, (3 mil subscribers, $40 mil rev)
Register: http://www.eventbrite.com/event/3099126571
Web Mobile RoR iPhone Android
we build ideas
Site: sourcepad.com Email: [email protected]
(sign-up for notices on events)http://bit.ly/wuv3vp
If you like this event, PLEASE tell others (email,tweet,blog)
This slide deck: http://bit.ly/yelXxj