January 2023
Brief
We created an onboarding flow for new users to go through when they created their account. It was a multi-step flow without skippable steps to push users into completing critical set-up to use our product. We immediately got feedback that users wanted to be able to see and get a feel for the product before they felt comfortable completing specific actions like connecting their calendar or inviting a teammate. Our initial solution was to add images of the product into onboarding but this was not immersive enough to be compelling. Thus, we decided we should create skippable steps and let users into the product where they could finish their setup in their own time.
The solution was a companion piece to onboarding which we called a "Getting started checklist". It lived on the home screen of the app and allowed us to prompt users to do many different pieces of setup in a non-invasive way.
Contributions
I was the lead designer on this project. I was involved end-to-end from strategizing with product on how to solve the onboarding woes to crafting a full UI experience on our mobile apps and browser extension.
Considerations
-The checklist should show progress and let the user see what they've already completed.
-It should be collapsible in some way so that users can tap around the app and use the product while being able to revisit setup when they're ready.
-As we believe each step is pertinent to having a full experience on this app, the checklist itself is not dismissable unless every step has been completed or skipped (if applicable). It should dismiss upon completion/full setup.
Designs
The Process
User research
As part of a larger initiative to onboarding new users, we ran many user sessions where we observed people going through onboarding. As they voiced their concerns and confusions, along with having lower calendar connection numbers than desired, we concluded that users wanted to preview the app and see the value more clearly before inputting information. After iterating onboarding with images in the steps, the next idea was to make steps skippable and then add alerts to complete the steps in the interface.
Initial Ideation
To begin, I started looking at empty states in the app where we could contextually prompt users to complete actions that they had skipped in onboarding. I also played around with some different alert styles on our home page to prompt users in a central place on things we wanted them to do. The feedback on this round deduced that we needed a more centralized place to show uncompleted steps than empty states but the home page alerts were competing for attention and had the potential to grow to an unruly amount that would involve a lot of logic to know which to show when. That's when I came up with the checklist idea that could house uncompleted steps all together in one place.
I worked with Product to define what steps were wanted in the checklist and all the user problems that needed to be solved. The list of requirements were:
1. 5 steps were defined for the checklist
2. Checklist needed to show completed items
3. Users should be able to complete items in their own time and use the app without checklist being too intrusive
4. Checklist is not dismissable with uncompleted steps. Only 2 steps are 'skippable' if user indicates they can't complete them. All steps must be completed or skipped if applicable for checklist to disappear completely.
5. User should be able to see where they will see value in the app for each step
With clear requirements, I started some competitive research for ideas on different UI elements we could use. I had some early concepts to initially show for feedback which included such variations as a Floating Action Button entry, a multi-step pager, a full screen experience (a more flexible take on onboarding), an accordion checklist and showing steps contextually with empty states.
Iterations
We decided to move forward with the checklist concept because it had the most flexibility to accomplish everything we wanted. The contextual prompts were enticing to stakeholders but from a UX perspective, it seemed to jarring to jump people around the app and abruptly show the checklist in certain places. I definitely wanted to figure out a way to contextually show value in the final concept though.
One of the first iterations I did involved answering where steps would be completed. The ideas were showing a form to complete the step inline when expanded and linking out to complete the steps where they already lived in the app. By linking out to actions we were able to save on some engineering scope, show more complex forms that weren't so confined in space and also guide the user to the place where they might change these settings in the future.
Some of the things that needed to be firmed up in the design exercise were
1. Expanded and collapsed states of the checklist
2. Expanded and collapsed states of each step
3. Post completion states of each step
4. Where to show the checklist
5. How skippable steps would work/look
6. Overall positioning of the checklist copy (Your setup assistant? New user setup?)
7. Designing the entire checklist for our iOS, Android and our Browser Extension
Revisiting the contextualizing piece:
For most incomplete steps, I added in a link to the description which would scroll the user to an empty state on the page (which I also updated as part of this project to give more context of what a completed state would look like). This part of the feature would allow users to see the functionality of incomplete steps and understand where and how they would see value once the completed the step.
Completing the circle post-completion:
To reiterate the value added and give a sense of success and accomplishment, we wanted to show completed steps with some extra context. I added in an expanded state for completed steps with little success messages about what they were getting and a link to where they can see this step in action now (e.g. you added your team, now see where your team members are working).
Final Steps
We created phases for release: an MVP, adding skippable steps, updating empty states, giving a feature preview and showing completed details. Then I created a matrix of each step flow with the feature phase so eng could tackle each step and phase individually.
