A UX Design Presentation

UX Cookbook for Startups

Sigit Adinugroho for Tech In Asia DevTalk 2016

Jakarta, Indonesia

A. K. A. How to cook a

“minimum delightful dish”

A little bit about me

2003-2007 Studied design

2007-2012 Started my career in UX design

2012-2014 Left comfort zone and joined multiple startups

2014 Tried corporate once again.

2015—2016 Trying to enjoy life more and share more

2011-2013 Went back to design school

Fast Food (Minimum Viable Product)

vs.

Home-Cooked Food (Minimum Delightful Product)

This is Mom. Mom cooks food everyday. Mom cares about nutrition & taste. Mom doesn’t get Michelin stars, but Mom’s cooking satisfies.

Be like Mom.

The UX Recipe Pyramid

Optimise the job & delight the users

FUNCTION

DELIGHT

Gets the job done & advocates the user

Satisfies appetites.

Business, Technology,

Customer Experience, Product Market Fit

and all that

Why product design fails

Technology PeopleBusiness

Because, these come first… …then this.(either one)

TechnologyBusinessPeople

It should be this

People

Start with this …and continue building with all 3 in mind

Product Myths

#1 My product will be the next big thing

#2 People will know how to use my product.

#3 Technology can solve everything.

The Recipe

#1 Design Sprints/Workshops

1

Understand

2

Ideation

3

Customer Journeys

#1 Design Sprints/Workshops

1

Understand

Stakeholders Pain Cure Aspirations

Users Business

2

Ideation

Product Ideas Brand Ideas

Storyboards Interaction

IA

Identity

Customer Experience

3

Customer Journey

Based on the product, create a list of most important journeys

when they interact with your product’s touchpoints.

Product Design

Nadia needs A

Joko needs B

Rangga needs B

Specific flows

Nadia needs to confirm receipt

Joko needs to buy a thing

Rangga needs to be a merchant

Check iPhone App

Browse

Signs up Pick Merchant

Fill forms

Wait

Pick Item Click Buy Checkout

Open Order List

Tick on Received

Step 1 Step 2 Step 3 Step 4

Step 5 Step 6

Detailed Customer Journey with Storyboard

#2 Prototype

Low fidelity

Sketches

Paper cards

#2 Prototype

High fidelity

Invision/Flinto/Atomic

HTML/JS/CSS

Source: http://get.boozerexperience.com/tag/sketches

Source: https://squashpartner.files.wordpress.com/2012/03/img_0072.jpg

Principle

#3 Validate

#3 Validate

Test screen usage (using online tools)

Interviews + observations

Stakeholder meetings

Source: https://squashpartner.files.wordpress.com/2012/03/img_0072.jpg

Invision

Lookback

#4 Design Backlogs

#4 Design Backlogs

Include design stories in backlogs

Assign somebody to groom it

#5 Design Quality Assurance

#5 Design Quality Assurance

Front-end results need to be QA-ed

Fix it quickly

Fix it properly

Thank you!

TWITTER @hellosigit

PERSONAL WEBSITE

serendipified.com

DRIBBBLE dribbble.com/sigit