Optimizing Our Onboarding Experience

Onboarding is tough to get right. It’s the start of our users’ relationship with our app and is the perfect opportunity to introduce what our product does, as well as develop trust in our brand. It’s probably one of the more important places to get our tone, interactions, and instructions right.

At SparkPost, we’ve recently updated our onboarding experience. As the design lead for this project, I thought I’d give back to other designers and developers and share some of decisions we made and the reasons why we made them.

99 Problems

Our old onboarding experience hadn’t scaled well as our app had grown over time. Data told us it was broken somehow. Too many people skipped it entirely, and missed out on crucial steps they needed to complete before they could get up and running to send some email.

1. Some people didn’t see onboarding at all

Navigating from our marketing website, through our sign up flow, and into our app was a complicated process, involving a number of branches. New sign ups would see different things depending on where the user was signing up from.

Some were even pulled out of the onboarding experience altogether. We dropped them into the middle of our app and left them to figure everything else out on their own. We didn’t guide them through the setup and configuration required to use our app properly.

Below you can see that only 45% of people got through the whole onboarding experience.

2. The experience was a momentum killer

We realized the experience was a huge barrier between new signups and the app. At certain points, we were asking for too much input, and at others, we weren’t providing enough guidance. For example, one form held 21 fields. In addition, our domain verification step was just plain confusing.

Visually, our old interface felt noisy and a bit inconsistent from one step to the next. Poorly placed buttons, text, and inconsistent styling were among some of the issues that just made the whole experience feel unpredictable and indigestible.

Very few people added their sending domain – a pretty important step.

3. Sorry, the other problems don’t exist, because we got the…

Dirt off our shoulders

Going back to the drawing board, we determined that our sign up flow should:

• Introduce the app and its important features.
• Educate users on the benefits of those features.
• Turn users into senders with the best sending reputation.

We added two more steps.

Yes, we added steps. You might think we’re crazy, but we wanted to make sure our users had what they needed to become successful senders. Email is pretty complicated, even when we take care of the hard stuff, so we needed to give them the tools necessary to get up and running the right way.

First, we created a new plan selection step. We wanted to make sure our free and paid users knew what they were getting. This new plan selection page allowed us to highlight the benefits, features, and limitations of each plan.

For our high volume senders, we introduce another new step with the option to tack on dedicated IP addresses. Dedicated IPs are a small add-on that can help strengthen a sender’s reputation.

However, we didn’t just add pages blindly. We overhauled content, refreshed the UI, and removed a lot of cruft. Here are a few principles that guided our internal design process.

Digestibility

Good design is easy to digest.

We wanted to keep the new onboarding experience as quick as possible, and get our senders to the most valuable part of their experience—actually using our app. They should get through the entire process without spending a ton of time and energy figuring out what to do.

Reorganizing our pages’ hierarchy through colors, font sizes, and thoughtful placement all help give our users the guidance they need to make quicker decisions.

Fields, buttons, interactions, and even an entire step got the axe —anything at all that could confuse users. We were able to cut down that previously mentioned 21 field form to a more digestible 10 fields.

Clarity

Good design makes choices clear.

Email can get pretty confusing sometimes, but we can’t expect users to read a manual on how to start using our product. Easy-to-read and short copy isn’t enough. At every step we made sure to explain and illustrate:

• What this step or feature is for
• Why we need to collect information
• What they should do next

Familiarity

Good design also means consistency.

This one mostly comes from using people’s existing expectations of UI interactions. We don’t want to reinvent common design patterns that we’ve all been using for years. Therefore, we avoid confusion by sticking to well-established UI and design conventions.

We wanted the onboarding experience to feel as seamless as possible by visually aligning with our other properties, including our website and our app. Incorporating components, text styles and other design patterns from our website and app ensure consistency for anyone coming into visual contact with our brand.

Encore

Finally, we were ready and excited to ship these updates. The UI looked great! However, we all know that doesn’t mean much if the results don’t actually help our customers. Now that we’ve had enough time to measure the impact of the new onboarding experience, we’re even more excited about it.

Our completion rate almost doubled.

Our sending domain completion rate tripled!

Onboarding, of course, is just the beginning of our customers’ experience with our product. But a well designed onboarding experience gives them a head start on doing what they actually want to do.

(W)rapping up

Finally, it’s really true that onboarding never stops.

Fixing problems iteratively is an essential part of every design process. The issues we discover are sometimes hard to tackle, but with each design sprint and each revision, we see improvement. And this is what keeps us going. More than anything, we want to see our users succeed.

If you’ve recently signed up for SparkPost, we’d love to hear what you think about our onboarding experience. Feel free to reach out on Slack, Twitter, or leave a comment with any thoughts you have.

**Disclaimer: Jon doesn’t even listen to Jay-Z

This post was originally published on sparkpost.com