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
Prototyping Basics
⇾ UX Vocab 101
⇾ What is a Prototype?
⇾ Why Creating Prototype?
⇾ Building effective prototypes
SECTION: 1
PROTOTYPE
cr: www.itaxsmart.com
Can navigate
Can interact with
Can have many different looks(sketch, wireframe, final visual design)
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
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
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
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