User Onboarding Introductions- An interactive design paradigm
A new or a growing app based product always comes into the problems of user retention as well as having newly signed up users do the most important tasks. Given the variety of touchpoints from where a person might have proceeded to download the app, there will always be a certain loss of information about the product/service’s core value propositions as well as how they are supposed to go about it.
This article is about two introductory onboarding flows that I created for two totally different services, but having the same patterns.
Case 1 — Dunzo
Dunzo is a concierge app that assigns a user a delivery partner (bike rider) to get things like pickups from a store, shopping lists done. Altogether at a minor cost of delivery based on the distance the delivery partner would have to traverse.
The Problem — The user flow on Dunzo works in the manner of creating a ‘task’. A task being anything that a user might need — items from a store, pickup/drop of something they need to send etc. However, within their current product, they were seeing a lot of cases wherein a user would signup, but would not go ahead and create a task.
The Onboarding part of the solution — While the later processes within the user flow would involve many more changes in the experience, the introductory onboarding (before a signup) was based on the following key aspects -
1 — Highlight concierge, in a manner that people who dont understand what a ‘concierge’ is still get what the app does as soon as they’d launch it. In order to do this, I created a character that would look like a butler and centered the entire onboarding sequence around that character doing things and adding value to the user lifecycle.
2 — Introduce the core benefits, functions and ways of doing it on the app at an abstract level.
3 — Establish Dunzo as a product that they can use even if the need is not intermittent. Eg. a user gets the app, but does not have a critical need of having something delivered to them just then.
Shanelle Mullin from ConversionXL lists 5 types of onboarding, in her article here, as follows:
- Benefit-Focused: Explains the 2–3 core benefits and how to achieve that benefit via the site / product / app.
- Function-Focused: Explains the 2–3 core functions of the site / product / app and how to use them.
- Doing-Focused: Walks the user through the first or most common actions.
- Account-Focused: Walks the user through the account / profile creation process, including finding and adding friends or interests.
- All: For particularly complex sites / products / apps, it may be necessary to combine the four above.
For Dunzo, the user account is just basically a verified phone number, email, name, addresses and payment methods. Which really did not need focus within the introductory onboarding.
Trying to achieve those crucial elements from the get go, I designed this pre signup onboarding process -
The idea being to define the most important benefits of the service, give some concept about how it is to be done while within the product, and attach the values to a perception of how they would translate to real life.
Case 2-ListUp
ListUp is a used electronics platform that allows its users to buy used second hand electronics OR sell their own. The core value that a user can derive from the platform are as follows -
1 -Gain access to a catalog of genuinely high quality, verified, minor-ly restored used electronics at lucratively low prices. With a 5 Step verification process in place to ensure the quality of inventory available for buying, all that was needed was to foster trust in the product.
2 -Participate in an auction mechanism of buying wherein the bids would start at a value (X), win the auction by the time period, and save more with unbundled pricing (complete options to choose a warranty period and accessories) OR buy it off straight away at a value 1.25X with a 1yr warranty and accessories included.
3 -Sell their used electronics to ListUp at guaranteed prices which would be 15–20% more than any other exchange program in the country.
On a similar design pattern as above, wherein the benefits of the app and how they would be used are explained with a perception of the result, this is the redesigned introductory onboarding flow for ListUp —
Implementation notes — Getting these animations into a JSON from After Effects can be smoothly done via BodyMovin plugin. The only key aspects to take care of is to have all the objects as shapes.
Tinkering a little with the shapes and text leads to a smaller JSON for each screen (each of the above examples have 5 ‘screens’). These would roughly be 100–120 Kb per JSON.
Comparing them with the size of jpegs that would be used on an app, you eventually end up saving up on size.
For both iOs and Android implementations, Lottie provides a really good way of having more interactions like these within the app.
More on Lottie can be read here — https://airbnb.design/lottie/
PS — These aspects were designed for Dunzo as part of an exploratory project and has not been implemented to evaluate results.
However, heading design and product with ListUp, using this paradigm helped me cut user dropoffs between SignUp till Product Page Viewed significantly.
