Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Essential Prototyping for Entrepreneurs

10,780 views

Published on

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.

  • Be the first to comment

Essential Prototyping for Entrepreneurs

  1. 1. Essential Prototyping for Entrepreneurs Test Your Business Idea in 1 Day By Bow Kraivanich
 Cofounder of daydash.co http://bow.im @bowkraivanich
  2. 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. 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. 4. Today’s Rule 80/20
  5. 5. Prototyping Basics ⇾ UX Vocab 101 ⇾ What is a Prototype? ⇾ Why Creating Prototype? ⇾ Building effective prototypes SECTION: 1
  6. 6. " UX VOCAB 101
  7. 7. cr: zykinetics.com SKETCH
  8. 8. WIREFRAME cr: blog.mockupbuilder.com
  9. 9. UI DESIGN/VISUAL DESIGN cr: www.invisionapp.com
  10. 10. SKETCH WIREFRAME VISUAL DESIGN Brainstorming idea Structure, functional Ready for development
  11. 11. SKETCH WIREFRAME VISUAL DESIGN MOCKUP PROTOTYPE
  12. 12. What is a Prototype?
  13. 13. A Prototype is “A plan for how it WORKS not how it LOOKS, yet”
  14. 14. PROTOTYPE cr: www.itaxsmart.com Can navigate Can interact with Can have many different looks
 (sketch, wireframe, final visual design)
  15. 15. Why Creating Prototype?
  16. 16. “To Answer Questions and to Generate New Ones”
  17. 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. 18. Building Effective Prototypes?
  19. 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. 20. The Prototyping Processes ⇾ Overview ⇾ Clarify your idea ⇾ Select your core features ⇾ Understand Prototype Fidelity SECTION: 2
  21. 21. 1. Clarify your idea 2. Planning 3. Create prototype 4. Testing & validation The Processes Overview
  22. 22. Clarify Your Idea with Lean Canvas
  23. 23. Select your core features For idea “Street Food Delivery”
  24. 24. List all features (5 mins) 1
  25. 25. Prioritize 2 (5 mins)
  26. 26. EASYHARD IMPORTANT NOT IMPORTANT
  27. 27. EASYHARD IMPORTANT NOT IMPORTANT
  28. 28. Get rid of unnecessary features 3 (5 mins)
  29. 29. EASYHARD IMPORTANT NOT IMPORTANT
  30. 30. EASYHARD IMPORTANT NOT IMPORTANT
  31. 31. EASYHARD IMPORTANT NOT IMPORTANT
  32. 32. Understand Prototype Fidelity
  33. 33. Low-Fidelity vs High-Fidelity
  34. 34. Low-Fidelity (Lo-Fi)
  35. 35. Hight-Fidelity (Hi-Fi)
  36. 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. 37. Picking the Right Tools ⇾ Things to consider when picking the tool ⇾ Popular tools ⇾ More Tools SECTION: 3
  38. 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. 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. 40. More tools https://www.cooper.com/prototyping-tools
  41. 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. 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. 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. 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. 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. 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. 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. 48. What is the 
 most important part 
 of prototyping process?
  49. 49. Circles Of Feedback Friend/ Family Experts in The field Target Users
  50. 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. 51. Collecting Data 1. Basic information 2. Positive Feedbacks 3. Comments 4. Rating
  52. 52. How many users do we need for testing? You only need at least 3-5 users to start seeing trend
  53. 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

×