Prototyping is a skill that every entrepreneur should have. As a UX designer who turns to startup founder myself, I crafted this course and hope it can help a non-technical people can get started doing something toward from their idea to the next step.
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
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
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
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.
45. 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
46. 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
47. 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
48. 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
49. What is the
most important part
of prototyping process?
51. 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
53. How many users do we need for testing?
You only need at least 3-5 users to start seeing trend
54. “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