New Onboarding Experience
An onboarding experience that helps new users get a clear understanding of how to ride lime products as well as build a better government relationship by demonstrating that lime is committed to public education and safety.
Project Scope
A project for Lime’s mobile app
My role: Sole designer designed and created the whole onboarding experience.
Team: Core Product Team.
Summary
Final MVP
1. How to ride
2. ride with helmets
3. Where to ride
4. Park with care
5. End the trip
Problem & Goal
What needs to be addressed in the onboarding experience?
Specifically, there are 3 issues to address through this new onboarding experience per users’ feedback and GR and other teams’ feedback.
User Compliance
Government Relationship
Brand sensitivity
Understand the Problem
Current onboarding experience
The how-to-ride Tutorial Part
Since overall onboarding user flow is already optimized, the main focus of improvement will fall in the how-to-ride tutorial part in regards to user compliance and government relationship.
For example, different cities have different rules for users to comply and different markets have different vehicle types(e.g. scooters only markets vs. bike only markets)
The tutorial should give users a clear understanding about:
How to ride.
Lime is committed to public education and safety.
Proposed Solution
Animation Design
Considering that we need to convey a large amount of information in a very short amount of time, an animated tutorial would be the best approach.
1. Storyboarding
There are basically 5 separate stories need to be included in the tutorial. In order to catch the user’s attention more effectively, all pages are limited to less than 5 seconds.
2. Character Design
For character design, factors need to be taken into account:
- Social fit(gender, skin and hair color)
- Represent our user groups
- Different from our competitor
- Recognizable
3. Scene Design
For scene design, it is never only for creating a meaningful scene to convey information. From a product perspective, there are more things that matter. (e.g. Scalability for different markets and contexts.)
Rules for Standard layout of the content
Rules for the motion of the component
For the actual scene design, it is clear that what rule needs to be followed as most of the constraints are clearly stated:
- standard format
- scalable for other new types of vehicles
- time duration is around 4 seconds
Hi-fi scene design
4. Animation export to code
The advantages of Lottie are:
- lightweight and fast to load
- Full playback control
- Easily fit screens of all sizes
- Great quality performance
And these are the reason I decided to make the animation in Lottie code format instead of GIf or video.
In order to convert the animation to Lottie code, there is a restricted way of constructing the animation, these techniques are reflected in the scene and character design to some extent.
Consider hand-offs while designing
Iteration
There are more combinations of animation that accommodate markets regarding vehicle types and traffic rules. For example, markets that only have scooters on the road should only have scooter-related content in the onboarding experience.
A management tool is needed to address those problems, which is on the roadmap.
In addition, there are also other GR and regulation issues that are involved in the onboarding experience and they affect our conversion rate.
