Designing our new onboarding flow
It only takes a new user a few minutes to form their first impression of a product like ours. And most of these users decide to either stay and potentially become a customer, or leave and never come back, in these first few minutes.
That's why it's extraordinarily important to provide a sign-up a experience that's smooth, while providing an idea of how the product works and why it's worth using.
Part of that process is Onboarding. Onboarding is almost always a series of screens that introduce users to the product, giving them an overview of major features and setting them up for success.
The Previous Onboarding Experience at Shortcut
Over a year ago, we introduced a tailored onboarding where users could customize their workflows and turn various features on or off, but from our perspective it just wasn't hitting the mark. Looking at the data, it seemed to leave users feeling a little underwhelmed when onboarding and didn't provide the uptick in product engagement that we wanted. We knew we could do better.
Understand your customers and their goals
Start with the Problem
After talking to customers, we learned that many users didn’t understand the goal of our onboarding experience. Asking users to customize their workflow, for example, was too early in the process for them to understand why and how they should be doing it.
Our process was also designed solely with engineering mind. That's fine when the people signing up are engineers, but the problem here is that it made non-engineers question whether ours was the right tool for them.
The User Journey
Once we defined the problem, we ran a workshop with the whole team with these goals in mind:
- Let's better understand the customer journey across signup, organization setup, and product onboarding
- And identify top customer pain points during onboarding that are hindering users from understanding how our core features can help them get their job done
Through this exercise, we defined the steps that our active users would likely want to take after onboarding. We identified that the most users' main goals post-signup were to add a piece of development work through the creation of an Iteration sprint.
We also knew that customers who use Iteration sprints are twice as likely to become active customers after the trial. Which meant that if we could help them setup an iteration during onboarding they would get up to speed faster and be in a position to succeed.
Creating a solution
The challenge here was to come up with a way for users to setup an iteration during the onboarding that made sense. We also needed to introduce how the product works in general, while providing a clear understanding of the steps involved in setting up an iteration specifically.
There are multiple ways to do this. What we considered most important was creating an experience that was simple, intuitive, and compelling at the same time. Easy right?
After exploring different solutions, one idea stood out. A split experience that would show the user how the information they entered to create an iteration reflected instantly on the product dashboard.
On the left hand side, the user is walked through the steps required to create an Iteration. On the right hand, the user sees the Shortcut dashboard getting filled, step by step, as they go through those steps and enter information.
The idea here is that by instantly seeing how the information they enter will be used to fill the layout on the right, the user gains a clear understanding of our hierarchy (Iteration > Epic > Story).
Validating our ideas
After exploring variations on this experience, we created a prototype to put into users hands. Our goal was to learn if people would actually find it valuable to create an iteration sprint during onboarding. We also wanted to know if the flow was clear and easy to walk through, if there was drop off at any point in the process, and to gather feedback.
Following this testing, we were happy to confirm that users found the flow clear and to the point. They did not feel overwhelmed or underwhelmed, but instead were whelmed at an appropriate level. That onboarding helped them set up a piece of work that they could immediately dive into what also seen as valuable.
From this feedback, we learned that not everybody joining Shortcut is interested in setting up an iteration. So we are also allowing the users to skip this flow to check the product out on their own. We also saw that some users use a different process, like Kanban, for team work. And we will expand this flow to accommodate their use cases.
Shaping the design
This is where the new onboarding started to feel real. Just recently we had refreshed our brand with the help of Creative and Visual Design (learn more about their magic powers in our Shaping Our New Brand Direction post), so this was an opportunity to bring the new brand direction to life. And to give you my personal opinion I love our new color palette. 🙌
To complete this high fidelity design, I used our Design System and shared components library to keep things consistent and aligned with the product. I also wanted to use transitions and animations to keep this experience light, dynamic and smooth. Using the prototype feature on Figma, I was able to recreate these smooth transitions and align with the engineers to replicate these into the build.
What we shipped
We launched new Onboarding last and we are so proud of our work. The new onboarding helps users focus on the jobs-to-be done, setting up a piece of development work while fully onboarding and getting familiar with our product and its features.
We are going to monitor engagement with this new process and will keep improving the flow based on feedback we receive and also to accommodate additional user goals.
If you want to experience this new Onboarding for yourself, feel free to sign on up.