principle of mobile app design
TRANSCRIPT
![Page 1: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/1.jpg)
Mobile App
Design
Principle of
![Page 2: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/2.jpg)
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
![Page 3: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/3.jpg)
Jobs-To-Be-Done FrameworkUnderstanding Customers Job and the Job Stories
![Page 4: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/4.jpg)
“If I had asked people what they wanted,
they would have said faster horses.”
—Henry Ford
![Page 5: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/5.jpg)
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).
![Page 6: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/6.jpg)
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
![Page 7: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/7.jpg)
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
![Page 8: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/8.jpg)
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.”
![Page 9: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/9.jpg)
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
![Page 10: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/10.jpg)
Hooked ModelBuilding the experience design
![Page 11: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/11.jpg)
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
![Page 12: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/12.jpg)
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
![Page 13: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/13.jpg)
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
![Page 14: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/14.jpg)
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
![Page 15: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/15.jpg)
“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
![Page 16: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/16.jpg)
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.
![Page 17: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/17.jpg)
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
![Page 18: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/18.jpg)
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
![Page 19: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/19.jpg)
Deep Dive on the Chinese AppAlipay, Taobao, DianPing, Ele.me
![Page 20: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/20.jpg)
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
![Page 21: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/21.jpg)
21
Use effective search indexing
Powerful Search Capabilities and filtering
Provides search history and others
relevant results
In-App SearchAlipay
![Page 22: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/22.jpg)
22
Make it easy to manually
change location
Use mobile web pages
for dynamic contentKuala Lumpur content
Alipay Content based on location
![Page 23: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/23.jpg)
23
Alipay (Malaysia)Recommended Business View Coupons Business Listing Business Location
Finding my way around in Sri Petaling (Jobs-to-be-done)
![Page 24: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/24.jpg)
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
![Page 25: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/25.jpg)
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
![Page 26: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/26.jpg)
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
Organize and label menu categories
to be user-friendly
Show the value or promotions up front
Additional location options when in
overseas
Long scrolling for product discovery
![Page 27: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/27.jpg)
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
![Page 28: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/28.jpg)
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
![Page 29: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/29.jpg)
29
Taobao – Text Search Text and voice recognition search
Search with search
history or voice searchSearch Results Additional Filters
![Page 30: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/30.jpg)
30
DianPing – Location based business listing
Request for login when is needed such
as checkout, add review and etc.
Prominently display the search field
Organize and label menu categories
to be user-friendly
Show the value or promotions up front
Additional location options when in
overseas
Long scrolling for product discovery
Provide visual cue for others to take
actions (triggers)
![Page 31: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/31.jpg)
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
![Page 32: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/32.jpg)
32
DianPing – Other features
Food Delivery
Set Appointment, buy spa
package, pay for services and
location services
Comprehensive search
with filters
![Page 33: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/33.jpg)
Ele.me – Food Delivery
Prominently display the search field
Organize and label menu categories
to be user-friendly
Show the value or promotions up front
Popup free coupons to trigger buying
behavior
Long scrolling for product discovery
Weather information to trigger purchases
such as during winter
![Page 34: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/34.jpg)
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
![Page 35: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/35.jpg)
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
![Page 36: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/36.jpg)
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.
![Page 37: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/37.jpg)
Alipay – Red Packet VR
Introduce in December for the Chinese New Year 2017
![Page 38: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/38.jpg)
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
![Page 39: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/39.jpg)
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
![Page 40: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/40.jpg)
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
![Page 41: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/41.jpg)
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
![Page 42: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/42.jpg)
UrWork- Co-working Spaces
![Page 43: Principle of mobile app design](https://reader033.vdocument.in/reader033/viewer/2022052606/5a652ce17f8b9a182a8b4731/html5/thumbnails/43.jpg)
THANK YOUWilliam Lim
Email: [email protected]
Add me at LinkedIn: https://www.linkedin.com/in/williamltb/