Embed Size (px)
Citation preview
Essential Prototyping for EntrepreneursTest Your Business Idea in 1 Day
By Bow KraivanichCofounder of daydash.co
http://bow.im@bowkraivanich
Who am I ?
• Mentor at Hubba Stadium & Startup Weekend (Bangkok)
• Hubba Academy Instructor
• Managing Director at Blankspace Co., Ltd. (A UX/UI/Web design company)
• Partner at Dinsor Co., Ltd. (Visual communication design studio in Bangkok)
• Ex. Co-founder & CXO at Fastinflow
Cofounder of daydash.co A lifestyle events & activities discovery and booking platform
Course Outline
⇾ Section 1: Prototyping Basics
⇾ Section 2: The Prototyping Processes
——————————— LAUNCH ————————————
⇾ Section 3: Picking the Right Tools for Your Project
⇾ Section 4: Workshop
⇾ Section 5: Testing & Evaluating Your Prototype
Today’s Rule
80/20
Prototyping Basics
⇾ UX Vocab 101
⇾ What is a Prototype?
⇾ Why Creating Prototype?
⇾ Building effective prototypes
SECTION: 1
" UX
VOCAB 101
SKETCH
WIREFRAME
VISUAL DESIGN
Brainstorming idea
Structure, functional
Ready for development
SKETCH WIREFRAME
VISUAL DESIGNMOCKUPPROTOTYPE
What is a Prototype?
A Prototype is
“A plan for how it WORKS not how it LOOKS, yet”
PROTOTYPE
cr: www.itaxsmart.com
Can navigate
Can interact with
Can have many different looks(sketch, wireframe, final visual design)
Why Creating Prototype?
“To Answer Questions and to Generate New Ones”
Why Prototype?Validate idea
Communicate idea
Provide clear understanding
Make a decision base on real feedback
Force you to talk to users
and.. It helps you start doing something toward your idea
Building Effective Prototypes?
Building Effective Prototypes
It doesn’t have to be perfect
Know your audience, what they are expect
Always set goals
Build only what necessary
Don’t waste time on every detail
The Prototyping Processes
⇾ Overview
⇾ Clarify your idea
⇾ Select your core features
⇾ Understand Prototype Fidelity
SECTION: 2
1. Clarify your idea
2. Planning
3. Create prototype
4. Testing & validation
The Processes Overview
Clarify Your Idea with Lean Canvas
Select your core featuresFor idea “Street Food Delivery”
List all features(5 mins)
1
Prioritize2
(5 mins)
EASYHARD
IMPORTANT
NOT IMPORTANT
EASYHARD
IMPORTANT
NOT IMPORTANT
Get rid of unnecessary features
3
(5 mins)
EASYHARD
IMPORTANT
NOT IMPORTANT
EASYHARD
IMPORTANT
NOT IMPORTANT
EASYHARD
IMPORTANT
NOT IMPORTANT
Understand Prototype Fidelity
Low-Fidelity vs
High-Fidelity
Low-Fidelity (Lo-Fi)
Hight-Fidelity (Hi-Fi)
GET READY FOR THE AFTER SESSION
1. download popapp (ios, android) - https://popapp.in
2 download balsamiq (mac, window)- https://balsamiq.com
3. signup for proto.io (online) - https://proto.io
Picking the Right Tools
⇾ Things to consider when picking the tool
⇾ Popular tools
⇾ More Tools
SECTION: 3
Things to consider when picking the tool
Can share to get feedbacks and opinions
Can export / publish
Can view and test on the real devices
Popular tools
Lo-Fi
POP appbalsamiq mockups 3
indigo studio
Proto.iomoqups
Adobe Xd
Hi-Fi (with stencil)
Invision AppFlintomarvel
FramerOrigami
etc.
AdvancedHi-Fi
(import design)
Workshop
⇾ Create lo-fi prototype using POP app (mobile app)
⇾ Create lo-fi prototype using Balsamiq (web)
⇾ Create hi-fi prototype using Proto.io (web & mobile app)
SECTION: 4
Before we start, you should have these tools ready!
1. download popapp (ios, android) - https://popapp.in
2 download balsamiq (mac, window)- https://balsamiq.com
3. signup for proto.io (online) - https://proto.io
WORKSHOP 3
Create lo-fi prototype using POP app Massage Guru (mobile app)
1. Sketch main pages on paper (2-4 pages)
2. Snap your sketches
3. Create Hotspot areas to link between each page
4. Create slide, popup, animation
15 mins
WORKSHOP 2
Create lo-fi prototype using Balsamiq Google Search Clone (web)
1. Create 2 pages: homepage and search result page
2. Basic tools: using preset stencils, icons, import images
3. Link between page
4. Export & Publish
30 mins
WORKSHOP 4
Create hi-fi prototype using Proto.io Instagram (mobile app)
1. Create 2 pages: Home and Profile
2. Basic tools: using preset stencils, icons, import images
3. Use Pattern
4. Link between page
5. Basic Interactions and effects
6. Export & Publish
60 mins
WORKSHOP 3
Create hi-fi prototype using Proto.io airbnb (web)
1. Create 2 pages: Browse & Detail Page
2. Set up web canvas
3. Link between page
4. Export & Publish
30 mins
Testing & Evaluating
⇾ Create lo-fi prototype using POP app (mobile app)
⇾ Create lo-fi prototype using Balsamiq (web)
⇾ Create hi-fi prototype using Moqups (web)
⇾ Create hi-fi prototype using Proto.io
SECTION: 5
What is the most important part
of prototyping process?
Circles Of Feedback
Friend/Family
Experts in The field
Target Users
Basic Testing & Interviewing
1. Know your user
2. Introduce your idea in 1 minutes
3. Let them look and try to use your prototype
4. Interview
5. Collection message from body language
6. Try to sell them your idea
Collecting Data
1. Basic information
2. Positive Feedbacks
3. Comments
4. Rating
How many users do we need for testing?
You only need at least 3-5 users to start seeing trend
“Don’t stop here, get out of the building and use your prototype to test with users!”
Q&AFeel free to connect with me :) http://bow.im@bowkraivanich
