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.

Principle of mobile app design

638 views

Published on

Explore some of the principles of mobile app design through example. By tearing down some of the most popular Chinese mobile app like Alipay,DianPing,Taobao and etc. you will learn how to design an effective app navigation and exploration, maximize the value of in-app search features, create a seamless user experience to drive conversions and etc.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Principle of mobile app design

  1. 1. Mobile App Design Principle of
  2. 2. 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
  3. 3. Jobs-To-Be-Done Framework Understanding Customers Job and the Job Stories
  4. 4. “If I had asked people what they wanted, they would have said faster horses.” —Henry Ford
  5. 5. 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).
  6. 6. The Problem with User StoriesYour great subtitle in this line EXPECTED OUTCOME So that Too many assumptions Irrelevant How do we know this is the best actions to take? Maybe there’s a better way … PERSONA As a ACTION I Want to
  7. 7. 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
  8. 8. 4 FORCES AFFECT PURCHASING DECISIONS The Real Product Competition Anxiety of a new choice Habit of the present Push of the situations Pull of a new solution Habit 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.”
  9. 9. 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 produc
  10. 10. Hooked Model Building the experience design
  11. 11. 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
  12. 12. INTERNAL TRIGGERS Information on what to do next is informed through an association in the user’s memory TriggersInternal and External Triggers TRIGGERS EXTERNAL TRIGGERS Information on what to do next is within the triggers Video Ads Promotional Emails Call to actions Word of mouth
  13. 13. 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
  14. 14. 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
  15. 15. “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
  16. 16. 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.
  17. 17. 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
  18. 18. Build a New HabitsThe Hooked Model HOOKED MODEL • What “bit of work” is done to increase the likelihood of returning? Investment INVESTMENT • 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
  19. 19. Deep Dive on the Chinese App Alipay, Taobao, DianPing, Ele.me
  20. 20. 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. 21. 21 Use effective search indexing Powerful Search Capabilities and filtering Provides search history and others relevant results In-App SearchAlipay
  22. 22. 22 Make it easy to manually change location Use mobile web pages for dynamic content Kuala Lumpur content Alipay Content based on location
  23. 23. 23 Alipay (Malaysia) Recommended Business View Coupons Business Listing Business Location Finding my way around in Sri Petaling (Jobs-to-be-done)
  24. 24. Alipay (Malaysia) Tap on the location icon to open map Business Coupons and Payments Locate and visit the store I want Tap on the taxi icon to request Uber Business Hours and others information
  25. 25. 25 Alipay (Malaysia) Explore the country I’m visiting View all services available Travel Articles on Top 6 shopping mall to visit KLIA Airport InformationTour Packages in KL
  26. 26. 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
  27. 27. 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
  28. 28. 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. 29. 29 Taobao – Text Search Text and voice recognition search Search with search history or voice search Search Results Additional Filters
  30. 30. 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)
  31. 31. 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. 32. 32 DianPing – Other features Food Delivery Set Appointment, buy spa package, pay for services and location services Comprehensive search with filters
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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.
  37. 37. Alipay – Red Packet VR Introduce in December for the Chinese New Year 2017
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. UrWork- Co-working Spaces
  43. 43. THANK YOU William Lim Email: williamltb@hotmail.com Add me at LinkedIn: https://www.linkedin.com/in/williamltb/

×