Principle of mobile app design

Mobile App

Design

Principle of

What will we cover?Your great subtitle in this line

JOBS-TO-BE-DONE

HOOKED MODEL

PRODUCT DESIGN PRINCIPLES AND MODELS

Deep Dive into popular Chinese App such as Alipay, Taobao, DianPing, Ele.me

DIVE INTO CHINESE MOBILE APP

Alipay AR for Hong Bao, OFO Join Marketing with Despicable Me 3, Power bank and Sleeping Pod

Sharing, Mobile Health Check Kiosk and etc.

FINALLY COVER SOME MOBILE CHINESE INNOVATION

01

03

02

Jobs-To-Be-Done FrameworkUnderstanding Customers Job and the Job Stories

“If I had asked people what they wanted,

they would have said faster horses.”

—Henry Ford

Why Jobs?

“People buy products and services to get jobs done; and while products come and go, the underlying jobs-to-be-done does not go away”

While most companies innovate by trying to

improve their existing products (faster

horse), the innovation process is

dramatically improved by instead trying to

find better ways to reach the destination (to

get the job done).

The Problem with User StoriesYour great subtitle in this line

EXPECTED

OUTCOME

So that

Too many assumptions

IrrelevantHow do we know this is the best

actions to take? Maybe there’s a

better way …

PERSONA

As a

ACTION

I Want to

User Story: As a developer, I want a badge on my profile that when I am

a top poster, so people know I am a top poster.

Job StorySITUATION, MOTIVATION, EXPECTED OUTCOME

SITUATION

When

MOTIVATION

I Want to

EXPECTED OUTCOME

So I can

Jobs Story: When I am one of the top posters for a topic I want it to

show on my profile so that people know that I am an expert in a subject

4 FORCES AFFECT PURCHASING DECISIONSThe Real Product Competition

Anxiety of a new choice

Habit of the present

Push of the

situations

Pull of a new

solutionHabit Pull

Anxiety Push

Drive ForwardHold Back

“Your product is competing not so much with other similar product

offerings, but mostly with the person’s existing habits, or the person’s mix

of cobbled-together solutions. Your real competitor is non-consumption.

Solve the Job well, and find a bigger market share.”

DESIGN TO COMPLETE A JOB IN

MIND

PEOPLE DON’T BUY PRODUCT,

THEY HIRE PRODUCTS FOR A JOB

Minimum Viable Product (MVP) is not a half-baked version of the product

Hooked ModelBuilding the experience design

A HOOK IS AN EXPERIENCE

DESIGN TO CONNECT USER’S

PROBLEM TO YOUR SOLUTION

EACH PASS THROUGH THE HOOK HELPS

SHAPE USER PREFERENCE AND ATTITUDES

WITH ENOUGH FREQUENCY, A HABIT IS

FORMED

INTERNAL TRIGGERSInformation on what to do next is informed through

an association in the user’s memory

TriggersInternal and External Triggers

TRIGGERS

EXTERNAL TRIGGERSInformation on what to do next is within the triggers

Video Ads

Promotional Emails

Call to actions

Word of mouth

ActionUnderstanding Fogg Behavior Model

According to BJ Fogg, for any

behavior to occur, we need

MOTIVATION, ABILITY and a

TRIGGER

b = m + a + t

Seeking pleasure

Avoid Pain

Seeking Hope

Avoiding Fear

Seeking Acceptance

Avoiding Rejection

Time

Money

Physical Effort

Brain Cycles

Social Deviances

Non-Routine

ActionThe Definition

ACTION

An action is something a user does in anticipation of a

reward

The less effort it takes to get the reward, the more frequently

customers will complete the action

In other word, MAKE IT SIMPLER

“Simplicity is a function of your scarcest

resources at that moment”

—BJ Fogg

E.g. time as a resource: If you don’t have 10 minutes to spend, and the

target behavior requires 10 minutes, then it is not simple

Variable Rewards REWARDS

Search for Social Rewards

The Tribe

Search for Empathetic Job,

Partnership and Competition

Social rewards such as

Facebook Like

Rewards for recognition and

cooperation

Search for Resources

The Hunt

Hunt for Variable material rewards

- Groupon

Hunt for Variable information

rewards – Google Search results

Search for Self-Achievement

The Self

Levelling-up reflects mastery

and competency

Inbox or Task management

reflects consistency and

completion

Variable rewards are simply rewards that are given to users based on a

variable ratio schedule.

INVESTMENT

Investment

User ”invest” for future benefits such as Money, Personal Data, Emotional Commitment, Social

Capital, Time and Effort.

An investment is anything a user does that increases the chance of returning back to the

app.

Uploading a photo Buying add-on features Inviting a friend Beating a difficult level

Investments increase the likelihood of the next pass through the Hook in Two Ways

1.Investments Load the next trigger of the hook

2.Is an open invitation for an external trigger to be returned

Build a New HabitsThe Hooked Model

HOOKED

MODEL

• What “bit of work” is done to increase the likelihood of returning?

InvestmentINVESTMENT

• What internal trigger is the product addressing?

• What external trigger gets the user to use the product?

Triggers

TRIGGERS

• What is the simplest behavior in anticipation of reward?

Actions

ACTION

• Is the reward fulfilling, yet leaves the user wanting more?

Rewards

REWARDS

Deep Dive on the Chinese AppAlipay, Taobao, DianPing, Ele.me

20

Show the value of the app upfront

Provide text labels and visual keys to

clarify visual information (Make things

simpler to discover)

Prominently display the search field

Organize and label menu categories

to be user-friendly

Provide visual cue for others to take

actions (triggers)

Alipay

Use Shimmer effects for loading

App Navigation and Exploration

App integration API for 3rd party developers

21

Use effective search indexing

Powerful Search Capabilities and filtering

Provides search history and others

relevant results

In-App SearchAlipay

22

Make it easy to manually

change location

Use mobile web pages

for dynamic contentKuala Lumpur content

Alipay Content based on location

23

Alipay (Malaysia)Recommended Business View Coupons Business Listing Business Location

Finding my way around in Sri Petaling (Jobs-to-be-done)

Alipay (Malaysia)Tap on the location icon

to open mapBusiness Coupons and

Payments

Locate and visit the store I want

Tap on the taxi icon to

request UberBusiness Hours and

others information

25

Alipay (Malaysia) Explore the country I’m visiting

View all services availableTravel Articles on Top 6

shopping mall to visitKLIA Airport InformationTour Packages in KL

Taobao – Alibaba E-commerce

Request for login when is needed such

as checkout, add review and etc.

Prominently display the search field with

image search


to be user-friendly

Show the value or promotions up front

Additional location options when in

overseas

Long scrolling for product discovery

Taobao – Image Search Making product search simple from mobile

screenshots

Take mobile

screenshots

Latest

screenshots

available for

search

Searching in

progress

Identify products

by using vision

processing

Product identify Return search

results

Taobao – Image Search Making product search simple from camera

Take a photo of the

product you want to buy

Identify product Return results with the

ability to share

Ability to refine image

search

29

Taobao – Text Search Text and voice recognition search

Search with search

history or voice searchSearch Results Additional Filters

30

DianPing – Location based business listing

Request for login when is needed such

as checkout, add review and etc.



to be user-friendly


Additional location options when in

overseas


Provide visual cue for others to take

actions (triggers)

31

DianPing – Order, Payment and Booking

Store front with the ability to

post video review and

photos

Easy to share and favorite

store

Ability to order food, book

and pay for food

Ordering menu BookingStorefront

32

DianPing – Other features

Food Delivery

Set Appointment, buy spa

package, pay for services and

location services

Comprehensive search

with filters

Ele.me – Food Delivery



to be user-friendly


Popup free coupons to trigger buying

behavior


Weather information to trigger purchases

such as during winter

How ele.me build habits in ProductA Chinese O2O food delivery service

Search for

restaurant

Internal Trigger

Order Meal

Action

Offer Coupon to

share in WeChat

Rewards, Triggers,

Action

Friends open

WeChat message

to receive

coupons

Rewards, Triggers

View delivery

status

Investment

More buying,

more coupons

Investment

Forming user habit to review foodA Chinese O2O food delivery service

Action

Perform food review

External Trigger

Earn additional points to

review

Rewards

The Self – rewards

point

Investment

Earn better reputation

as you perform more

review

China Mobile App Innovation Alipay AR for Red Packet, OFO Join Marketing with Despicable Me 3, Power bank and Sleeping Pod Sharing, Mobile Health Check Kiosk and etc.

Alipay – Red Packet VR

Introduce in December for the Chinese New Year 2017

Ofo – Bike Sharing Join Marketing with Despicable Me 3

Solve the last mile problem

such as from the Subway

Station and to the home

Deposit RMB 100

RMB 1 for 1 hour ride

Ankerbox –

Portable Charger

Solve the low battery problem

on you mobile device

Can bring along with you and

return to any docking station

Deposit RMB 100

First 30 minutes free

RMB 1 for 1 hour charging

RMB 10 for whole day

Xiangshui Space -Nap Capsule Rental

Targeted at white-collar

workers for noon nap

Each pod contains clean

blanket and is equipped with

USB and power plugs

RMB 10 per ½ hour (11am to

2pm)

RMB 6 per ½ hour during off-

peak hour

UrWork- Co-working Spaces

Largest co-working spaces in

China

For startup and small

businesses

Most of the facilities are

driven by mobile apps and

paid through Alipay

Door can be open using

Alipay or UrWork App

UrWork- Co-working Spaces

THANK YOUWilliam Lim

Email: [email protected]

Add me at LinkedIn: https://www.linkedin.com/in/williamltb/

Principle of mobile app design

Internet

Transcript of Principle of mobile app design