Essential Prototyping for Entrepreneurs

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

Today’s Rule

80/20

Prototyping Basics

⇾ UX Vocab 101

⇾ What is a Prototype?

⇾ Why Creating Prototype?

⇾ Building effective prototypes

SECTION: 1

" UX

VOCAB 101

cr: zykinetics.com

SKETCH

WIREFRAME

cr: blog.mockupbuilder.com

UI DESIGN/VISUAL DESIGN

cr: www.invisionapp.com

SKETCH

WIREFRAME

VISUAL DESIGN

Brainstorming idea

Structure, functional

Ready for development

SKETCH WIREFRAME

VISUAL DESIGNMOCKUPPROTOTYPE

What is a Prototype?

A Prototype is

“A plan for how it WORKS not how it LOOKS, yet”

PROTOTYPE

cr: www.itaxsmart.com

Can navigate

Can interact with

Can have many different looks(sketch, wireframe, final visual design)

Why Creating Prototype?

“To Answer Questions and to Generate New Ones”

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?

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

1. Clarify your idea

2. Planning

3. Create prototype

4. Testing & validation

The Processes Overview

Clarify Your Idea with Lean Canvas

Select your core featuresFor idea “Street Food Delivery”

List all features(5 mins)

1

Prioritize2

(5 mins)

EASYHARD

IMPORTANT

NOT IMPORTANT

EASYHARD

IMPORTANT

NOT IMPORTANT

Get rid of unnecessary features

3

(5 mins)

EASYHARD

IMPORTANT

NOT IMPORTANT

EASYHARD

IMPORTANT

NOT IMPORTANT

EASYHARD

IMPORTANT

NOT IMPORTANT

Understand Prototype Fidelity

Low-Fidelity vs

High-Fidelity

Low-Fidelity (Lo-Fi)

Hight-Fidelity (Hi-Fi)

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)

More toolshttps://www.cooper.com/prototyping-tools

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

What is the most important part

of prototyping process?

Circles Of Feedback

Friend/Family

Experts in The field

Target Users

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

Collecting Data

1. Basic information

2. Positive Feedbacks

3. Comments

4. Rating

How many users do we need for testing?

You only need at least 3-5 users to start seeing trend

“Don’t stop here, get out of the building and use your prototype to test with users!”

Q&AFeel free to connect with me :) http://bow.im@bowkraivanich