MANGO ONBOARDING REDESIGN
Description
This project was done at Mango Languages. The purpose of this project is to simplify the onboarding process on www.mangolanguages.com, so that our users can get to Mango product a lot quicker and easier than before. The following picture is the result after the redesign.
Problems with Old Login Panel
This is the old login panel. Users need to figure out which option is the best and follow the instructions to get to Mango. Usually it takes 6~7 steps. Major problems are summarized as follows:
-
6 options are overwhelming for first time users. It is tedious work to go through all the instructions and figure out which option is the best.
-
Instruction panels are filled with text without direct links to any libraries, users have to figure out the link by themselves.
-
There is no "Individual Free Trial" button. Some users might just want to try Mango and see how it works before they officially sign up.
New User Flow Chart
After several discussions, we decided to simplify user flow by allowing user to search “zip code, school, company” at the same time in one search bar. Users only need to input whatever comes up in their minds first, maybe it is a zip code for a local library, a school name or a company name to see whether any of these organizations offers Mango. If we find any organization offers Mango, our page would direct users to that organization’s page with Mango product on it.
In addition, one tremendous change we made is, an “Individual Free Trial” button is added into the first page. For users who don’t want to do a search, or who just want to try Mango to see whether they like it or not, they can jump right into Mango by clicking that button.
Mango Characters
All the function parts are set. How about fun part? Yes, we do need some nice graphics to welcome our users. These two Mangos were designed particularly for this occasion. Imagine it’s a formal or informal business party where everyone is having a lot of fun.
One ripe Mango who has already used Mango app for a while, is talking fluently in a foreign language to greet an incoming Mango. However, the new Mango who obviously has never learned a foreign language, has no idea what he is talking about. The new Mango is busy looking up in dictionary, feeling embarrassed.
I think this suits well to represent returning Mango users and new Mango users, what do you think? : P
Onboarding Process for New User
After new user arrives “Login / Sign up” page, we allow them to search libraries, schools or companies in one search bar to see whether any of these associated with them provides Mango for free. In the following demo, we will do a library search by entering a zip code.
After users input a zip code and hits search button, our page would pop the nearest library that offers. If users choose this library, they can get Mango product by simply hitting “Go!” and our page would take to that library website with Mango on it. If they don't want this default library, they can also choose “show more libraries”.
Our page will then pop out other libraries around the area that offer Mango product. If users click on any of these libraries, it would take them to that library website with Mango on it. How easy is that?
What if no library in the area offers Mango? That is a good question. Then, our page will provide two options: “Request Mango” or ” Start Free Trial”. Users can either tell their library how much they want Mango or jump right into Mango by starting free trial. At the end of the trial, users can further explore other options to access Mango for free ( via School Library, Company Intranet), then switch their accounts or keep using Mango by subscription.
Onboarding Process for Returning User
Now let’s take a look at how a returning user logs in with the new system. Suppose I am a returning user and I have multiple accounts with Mango. Once I enter my email address in the search bar, the system would automatically find all the accounts associated with my email address.
Then I need to choose one and enter my password to log in. If I forget my password, I will hit “Forgot your password?”. If I need any help with my account, I can click “Need help?”. If I want to log in with other accounts, I can just hit the back button.
Demo Video
The following interaction design was done in Principle for Mac. Thanks for watching!
Info
Company
Mango Languages
Duration
Jan2016 - Mar2016
Role
UX Designer
Collaborator
1 Other UX Designer
