Best Practices: Wireframing - From Vision to Reality

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

Meet Joe…• 4 time founder / CEO• Raised $20 Million, 2 Exits

• Opinionated Guy…

• Entrepreneur teacher (60+ companies)

Vision

--> ?

Modus Operandi (from SourcePad)

1 Used by the majority of SourcePad clients

Why wireframing?

Clarify

Level of detail --> Cost

Open up next level of Cust Development 1

1 Steve Blank's term

Who should be wireframing?

UI / UX Person

Tech person

Entrepreneur

Marketing / Sales

<--- definitely

<--- perhaps (more on this later)

Entrepreneur "I'm not technical"

Wireframing is not a technical chore

A lot easier than learning how to program

Fact 1:

Fact 2:

What is wireframing?

Sketch - NOT beautiful

Focus on functionality

Aesthetics as it affects usability

The 20-second wireframe

The 20-second wireframe

Link: http://bit.ly/yBzAok

Approach / Best Practices

KISS

Functional Comparables

Test Test & Test (or at least Zen)

Side Note:

• UI/UX are professionals

How is this differentfrom hiring UI/UX

Side Note:

• Testing is the rising tide that lifts all


Side Note:

• UI/UX can be great


- if you have the $$

- if you can find a good one (they are rare)

BTW - if they don't mention testing --> run!

Functional Comparables

Similar functions (not competitive)

Successful sites

- Have overcome usability- Have set conventions

Case Study : GoodAdvice

Functional comparables

Blogs -- Posting

Premise: Allow entrepreneurs to communicate with their advisors

Yammer -- Notifications

Facebook -- Comments


Wireframe : Main functionality page


Comparable : Wordpress blog


Comparable : commenting function


Comparable : Facebook commenting


Wireframe : Email reminder


Comparable : Yammer Email reminder

Case Study : Participame

Premise: Web marketplace for Mexico

Main functional comparable: xyz.com

Successful, fast-growing

Case Study : ParticipameWireframe: Fastest way possible

Case Study : Venuedex

Premise: Marketplace for venues

Artistry: not high

Wireframes: awesome

Case Study : VenuedexMain page wireframe

Sponsor

Web Mobile RoR iPhone Android

We build ideas

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

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)

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

Important Tips

Remember - doesn't have to be pretty

KISS

Put in the work / effort and JUST DO IT !

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

Technology

Best Practices: Wireframing - From Vision to Reality