Improving the Upshot Onboarding Experience

We had 10-weeks to ship our MVP and we unavoidably left some loopholes in the experience. One of the biggest and most problematic loopholes we left was user onboarding. By looking at data and getting feedback from our editor (the person who interacts with our users), we noticed a few problems:

  • High drop-off rate after they have created an account
  • Lack of understanding of our service and the process
  • Mismatched expectation on what is required from them

An Experience Audit

The team and I were given a week to improve the onboarding experience. With such a little time, I couldn’t get any customer on the phone or run a survey. I decided the best thing to do is to audit each step in the onboarding experience and look for shortcomings.

The onboarding experience audit spreadsheet

I evaluated each step in two categories: 1) is this exciting enough for them to sign up and create a story, and 2) is this educational enough that they understand our service. For each category, I evaluated the messaging and the UI. Was the messaging credible, meaningful, and memorable? (I found a great article on how to get your customers excited: http://www.inc.com/geoffrey-james/how-to-get-a-customer-excited.html.) Did the messaging have a purpose, a goal, and connects to rest of the flow? Did we use good hierarchy to help convey the message? Could we use colors, icons, or images to help convey it better? This framework to helped me evaluate each step of the flow.

The major problems we had in our onboarding flow were:

  • Did not educate users on our service
  • Did not provide any primer on next steps
  • Did not explain the importance of each step
  • Benefits were written from Upshot’s perspective rather than from our users’.

Redesigning the Start Screen

Since we didn’t have much time, we divided up the problems among team members. I was assigned with redesigning the Start Screen—the first screen that greet the users after they have created an account—as it needed the most design work.

Original Start Screen

Problems with Start Screen:

  • Did not inform users on what is expected of them
  • Did not educate users on the importance of Finding Your Story
  • Copy is not cohesive: title of the page did not match the copy below

We explored two alternative paths: 1) listing the steps early on and 2) introducing the editor early to help build rapport.

Left: Listing out all the major steps. Right: Introducing the editor early on to help build rapport

We really like idea #2, but the technical complications of assigning editors that are still unknown. We decided idea #1 was the best idea to go with. However, listing each steps is boring and hard to read. Thus, I explored various layouts using icons that were used on our homepage.

All the layouts felt overwhelming because we were trying to convey a large amount of information at once. We decided to highlight only the immediate steps and give them hierarchy.

New Icon Set

I noticed that some of the the icons did convey the meaning of the steps and thus, they were not helpful communication tools. Their style also varied, making them look visually unorganized. I decided to design a new set of icons.

The original icon set

I used the noun project to find icons that would be representative of the steps, and then tweaked them to have matching styles.

Icons selected from The Noun Project

Final icon set:

Final icon set

Final Design

After we pushed the updates, we noticed a drop in sign up rate but a higher percentage of the users completed the funnel. We think that previously, many users signed-up because they were curious about our service. Once they learned about our service, they were no longer interested. Our editor also reported that new signups have a better understanding of our service and process than before.