Building a new onboarding for Shortcut
The first impression is what counts the most. Here are the steps we took to redesign our new dynamic Onboarding.
Let’s be clear. It only takes a few minutes to have a first impression of a product when you start using it. And most of the users decide to either stay and keep using the tool, or leave and never come back.
When a user signs up to use your product, you should provide an experience that is as smooth as possible while giving them an idea of how the product works and why it’s worth using it.
That being said, when we talk about first experience, we are also talking about Onboarding. Onboarding is usually a series of screens that are shown to the users to introduce them to the product, give an overview of some of the main features and to set them up for success.
Previous Onboarding at Shortcut
Over a year ago, we introduced a tailored onboarding where users could customise their workflows and turn on/off extra features, but it just didn’t hit the mark. Looking at the percentages, there wasn’t a strong enough uptick and it left users feeling a little underwhelmed when onboarding, so we felt we could do better.
Understand your customers and their goals
Start with the Problem
By talking to our customers, we learned that users didn’t understand the goal of the onboarding process. Asking the users to customise their workflow during the onboarding was too early in the process for them to understand how to do it.
Another problem was that some onboarding steps were geared toward the wrong personnel (engineer), which made the users question whether this was the right tool for them.
The User Journey
Once we defined the problems, we ran a workshop with the whole team with these goals in mind:
- Understand the customer journey across signup, organization setup and product onboarding;
- Identify top customer pain points during onboarding which hinders users from understanding the core features of the product to get their job done.
Through this exercise, we defined the steps that our active users would take when using Shortcut after the onboarding. We identified that the user’s main goals after signing up were to add a piece of development work by creating an iteration sprint.
We also knew that customers that use iteration sprints are twice as likely to become active customers after the trial. Therefore, if we could help them setup an iteration during onboarding they would get up to speed and set them up for success.
Creating a solution
The challenge here was to come up with a way for the users to setup an iteration during the onboarding. We also wanted to give an introduction of how the product works and provide a clear understanding of the hierarchy of the steps involved in setting up an iteration.
Well, there are multiple ways we could do this, but we wanted to create something that was simple, intuitive and compelling at the same time.
After exploring different solutions, one idea stood out from the crowd. A split experience that would show the user how the information they enter to create an iteration will reflect instantly on the product dashboard.
On the left hand side, the user will be walked through the steps required to create an iteration. On the right hand side, the user sees the Shortcut dashboard getting filled, step by step, as they enter the information on the left.
The idea here is that the user can see instantly how the information they enter will be used to fill the layout on the right, also providing a clear understanding of the hierarchy of the steps (Iteration > Epic > Story).
Time to validate ideas
After exploring variations of this experience, we decided to create a prototype and put it into users hands. The goal here was to understand if users would find it valuable to create an iteration sprint during onboarding. We also wanted to know if the flow was clear and easy to go through, if there would be any drop off and what user’s feedback would be.
After testing, we were happy to confirm that users found this flow very clear and to the point, without feeling overwhelming. It also helped them set up a piece of work as part of onboarding and they found it useful.
From users’ 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 and checkout the product on their own. Another thing we learned is that some users are using a different process, such as Kanban for team work. In the future we will expand this flow to accommodate these other use cases.
Shaping the design
This is where the new onboarding started to feel real. Just recently we had rebranded Shortcut with the help of Al Power 👨🎨 and his magic powers (check out the “Shaping Our New Brand Direction”), so this was an opportunity to bring the new brand direction to life. And let me tell you my personal opinion, I just love our new colour palette. 🙌
To complete the high fidelity design, I used our Design System and shared components library to keep things consistent and aligned with the product.
Another thing that I wanted to keep in mind, was the use of 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 for replicating these into the build.
What we shipped
We are launching Onboarding today and we are so proud of the work we have done on this. The new onboarding helps the user focus on the job-to-be done, setting up a piece of development work while onboarding and getting familiar with the product and its features.
We are going to monitor how our users will engage with this new feature and will keep improving this flow to cover the feedback received so far and to accommodate more user goals.
Big shout out to Dana and Courtney for helping to shape this feature from the ground up. 🙌
If you want to see the new Onboarding live, feel free to sign up to Shortcut.com.
