1.
Essential
Prototyping for
Entrepreneurs
Test Your Business Idea in 1 Day
By Bow Kraivanich
Cofounder of daydash.co
http://bow.im
@bowkraivanich

2.
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

3.
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

4.
Today’s Rule
80/20

5.
Prototyping Basics
⇾ UX Vocab 101
⇾ What is a Prototype?
⇾ Why Creating Prototype?
⇾ Building effective prototypes
SECTION: 1

6.
"
UX
VOCAB
101

7.
cr: zykinetics.com
SKETCH

8.
WIREFRAME
cr: blog.mockupbuilder.com

9.
UI DESIGN/VISUAL DESIGN
cr: www.invisionapp.com

10.
SKETCH
WIREFRAME
VISUAL DESIGN
Brainstorming idea
Structure, functional
Ready for development

11.
SKETCH WIREFRAME
VISUAL DESIGN
MOCKUP
PROTOTYPE

12.
What is a Prototype?

13.
A Prototype is
“A plan for how it WORKS
not how it LOOKS, yet”

14.
PROTOTYPE
cr: www.itaxsmart.com
Can navigate
Can interact with
Can have many different looks
(sketch, wireframe, final visual design)

15.
Why Creating Prototype?

16.
“To Answer Questions and
to Generate New Ones”

17.
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

18.
Building Effective
Prototypes?

19.
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

20.
The Prototyping Processes
⇾ Overview
⇾ Clarify your idea
⇾ Select your core features
⇾ Understand Prototype Fidelity
SECTION: 2

21.
1. Clarify your idea
2. Planning
3. Create prototype
4. Testing & validation
The
Processes
Overview

22.
Clarify Your Idea with Lean Canvas

23.
Select your core features
For idea “Street Food Delivery”

24.
List all features
(5 mins)
1

25.
Prioritize
2
(5 mins)

26.
EASYHARD
IMPORTANT
NOT IMPORTANT

27.
EASYHARD
IMPORTANT
NOT IMPORTANT

28.
Get rid of unnecessary
features
3
(5 mins)

29.
EASYHARD
IMPORTANT
NOT IMPORTANT

30.
EASYHARD
IMPORTANT
NOT IMPORTANT

31.
EASYHARD
IMPORTANT
NOT IMPORTANT

32.
Understand
Prototype Fidelity

33.
Low-Fidelity
vs
High-Fidelity

34.
Low-Fidelity
(Lo-Fi)

35.
Hight-Fidelity
(Hi-Fi)

36.
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

37.
Picking the Right Tools
⇾ Things to consider when picking the tool
⇾ Popular tools
⇾ More Tools
SECTION: 3

38.
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

39.
Popular tools
Lo-Fi
POP app
balsamiq mockups 3
indigo studio
Proto.io
moqups
Adobe Xd
Hi-Fi
(with stencil)
Invision App
Flinto
marvel
Framer
Origami
etc.
Advanced
Hi-Fi
(import design)

40.
More tools
https://www.cooper.com/prototyping-tools

41.
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

42.
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

43.
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

44.
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

45.
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

46.
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

47.
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

48.
What is the
most important part
of prototyping process?

49.
Circles Of Feedback
Friend/
Family
Experts in
The field
Target
Users

50.
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

51.
Collecting Data
1. Basic information
2. Positive Feedbacks
3. Comments
4. Rating

52.
How many users do we need for testing?
You only need at least 3-5 users to start seeing trend

53.
“Don’t stop here, get out of the building and
use your prototype to test with users!”
Q&A
Feel free to connect with me :) http://bow.im@bowkraivanich