An introduction short class about how to validate business/startup idea by creating an interactive prototype and use it as a supplement to talk to your target user, business partner in just 1 day.

1. Mobile
Prototyping
with proto.io
Test Your Business Idea in 1 Day
By Bow Kraivanich
Cofounder of daydash.co
http://bow.im
@bowkraivanich

2. I have a startup idea!
What’s next?
Question
Answer
You have to validate it!

3. Talk to the target users
How to validate your business idea
Create your
“Business Model Canvas”
Share your ideas
Create a prototype

4. Why Create Prototype?
“To Answer Questions”
And to Generate New Ones.

5. Prototype is
“A plan for how it WORKS
not how it LOOKS, yet”
credit: Framebench

6. Prototype Stage
Sketch Low Fidelity High Fidelity

7. Validate idea and
main functionalities
Flow of the app,
navigation
More detail on each
screens, interaction
and design
Sketch Low Fidelity High Fidelity
FOCUS
Pen & Paper,
POP APP
Balsamiq, Illustrator,
Keynote etc.
proto.io,
InvisionApp, Flinto
TOOLS

8. Why making Prototype?
It’s help you communicate
the story of your app to users
To make a decision based
on real feedback

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

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

11. When creating prototype, think about…
Use Cases & User Flow

12. Let’s Get Started!
Agenda
1. The basic toolset in proto.io
2. Use an preset element to create screen
3. Create a scrollable screen
4. Create basic interaction and effect
5. Your 1st prototype: Instagram Clone
6. Share and test your prototype on mobile
device

13. Workshop: Instagram Clone Prototype
Demo: http://bit.ly/igproto

14. It’s time to make yourself
familiar with the tool!

15. สิ่งที่ต้องตอบให้ได้ในการทดสอบการใช้งาน
Sketch & Low-fidelity
1. ผู้ใช้เข้าใจคอนเซ็ปต์และฟังก์ชั่นหลักๆ ของ app หรือไม่
2. ผู้ใช้เห็นถึงความประโยชน์ และความสำคัญ ที่ app นี้นำเสนอรึเปล่า?
3. ผู้ใช้มีความคาดหวังในการใช้งาน app อย่างไร? ตรงกับที่เราวางไว้
หรือไม่?
4. ผู้ใช้สามารถใช้งาน app ได้ง่ายหรือไม่?
5. มีฟังก์ชั่นอะไรที่ผู้ใช้ต้องการ แต่ใน app ยังไม่ตอบโจทย์?

16. สิ่งที่ต้องตอบให้ได้ในการทดสอบการใช้งาน
Medium-fidelity & High-fidelity
1. ลองกำหนด task ให้ผู้ใช้ทำ แล้วดูว่าผู้ใช้จะมีวิธีใช้งาน app
อย่างไร เพื่อให้บรรลุเป้าหมายนั้น
2. ในแต่ละหน้าจอ ดีไซน์ที่ออกแบบมาช่วยให้ผู้ใช้สามารถใช้งานได้
ไหลลื่นหรือไม่?
3. สังเกตว่าผู้ใช้ สามารถหาวิธีการเข้าถึงฟังก์ชั่นต่างๆ ได้หรือไม่
4. ลงดีเทลในเรื่องของ interaction ต่างๆ เช่นเวลา tab ที่ element
แล้วสิ่งที่เกิดขึ้น ตรงกับสิ่งที่ผู้ใช้คาดหวังหรือไม่?

17. Recommended Tools
Test idea quickly with no-time
https://popapp.in

18. Recommended Tools
Best for high fidelity prototype and design communication
https://www.invisionapp.com

19. Recommended Tools
Best for high fidelity prototype and design communication
https://www.flinto.com

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