January 2023
Brief
As lead designer, I reimagined our mobile onboarding experience from a rigid, multi-step flow into a flexible, user-driven checklist system. Our initial onboarding process required users to complete critical setup steps without the ability to skip or postpone actions. User research revealed this approach was hindering adoption, as users wanted to understand the product's value before connecting personal data or inviting team members. We initially attempted to add product screenshots into onboarding but this was not immersive enough to be compelling.
The solution that emerged was a companion piece to onboarding: a "Getting Started Checklist" that lived on the home screen. The approach was to allow users to skip onboarding steps, immediately access and explore the product, and provide a non-invasive guide through important setup steps at their own pace.
I was involved end-to-end from strategizing with. the product team on solving onboarding challenges to crafting a full UI experience across our mobile apps and browser extension.
Designs
The checklist design shows both progress and completed steps to keep users motivated. It demonstrates contextual value for each step (both complete and incomplete) and it provides flexible and persistent guidance for the user. It is collapsible to remain unobtrusive to using the app but persists until setup is complete as we believe each step is pertinent to having a full experience in our product.
The Process
User Research
Our path to this solution began through extensive user observation sessions, watching people navigate our onboarding flow. As users voiced their concerns and hesitations, patterns emerged. Coupled with lower-than-desired calendar connection rates, it became clear that our assumption about users' readiness to connect personal data was flawed. Users needed to preview the app's functionality and understand its value proposition before feeling comfortable completing certain actions. After our initial attempt to address this by adding product imagery to onboarding steps fell short, we recognized the need for a more fundamental shift in our approach.
Initial Ideation
My exploration began by examining empty states throughout the app where we could contextually prompt users to complete actions they had skipped in onboarding. I also experimented with various alert styles on our home page as a central location for surfacing incomplete tasks. However, feedback on these initial concepts highlighted two key issues: empty state prompts felt too dispersed, while home page alerts competed for attention and risked becoming unwieldy as they multiplied. This critique led to the concept of a unified checklist that could house all uncompleted steps in one cohesive, manageable interface.
Working closely with the product team, we defined the scope and requirements for this checklist. We identified five essential setup steps and established key principles: the checklist needed to clearly show progress, allow users to complete items at their own pace, and remain present until all steps were either completed or explicitly skipped (for applicable items). Crucially, we wanted users to understand the value they would gain from completing each step.
Design Evolution
With clear requirements in hand, I conducted competitive research for UI inspiration and developed several initial concepts. These ranged from a Floating Action Button entry point to a multi-step pager, a full-screen experience reminiscent of our original onboarding, an accordion-style checklist, and a system of contextual prompts integrated with empty states. After presenting these options, the checklist concept emerged as the front-runner due to its flexibility in meeting our various requirements.
Iterations
While stakeholders were drawn to the contextual prompts, I had reservations about abruptly showing the checklist in different locations throughout the app. Instead, I focused on finding ways to incorporate contextual value demonstration within our chosen checklist format.
One key decision revolved around where steps would be completed. I explored two main options: expanding checklist items to show inline completion forms, versus linking out to existing areas of the app. The latter approach won out for several reasons. It reduced engineering complexity, accommodated more complex forms without spatial constraints, and, importantly, familiarized users with the permanent locations of these features within the app.
Refining the Experience
As the design took shape, several critical aspects required careful consideration. The expanded and collapsed states of both the overall checklist and individual steps needed to be intuitive and unobtrusive. We had to determine the optimal positioning of the checklist within our interface and fine-tune how skippable steps would be presented and handled. The messaging and positioning of the checklist—whether to frame it as a setup assistant, new user guide, or something else—needed to strike the right tone. Additionally, the design had to be adapted thoughtfully for our iOS and Android apps as well as our browser extension.
I revisited the goal of contextualizing value by adding preview links to step descriptions. These would scroll users to updated empty states that visualized the potential of each completed step. This allowed users to envision the functionality they'd unlock, directly addressing our original problem of users wanting to "see" the product before committing to setup actions.
To create a sense of accomplishment and reinforce the value added, completed steps expanded to show success messages that highlighted the newly unlocked functionality. Each completed step also included a link to immediately experience the activated feature, creating a satisfying feedback loop that encouraged further exploration and setup completion.
Implementation and Release Strategy
Given the complexity and scope of the feature, we developed a phased release strategy. Starting with a basic MVP, we planned incremental rollouts to add skippable steps, enhance empty states with value previews, and finally introduce detailed completion states. To facilitate development, I created a comprehensive matrix mapping each checklist step to these feature phases, allowing engineering to tackle discrete pieces systematically.
This methodical approach to implementation ensured we could gather feedback and make adjustments as needed while steadily progressing toward our full vision for the feature. The matrix also served as a valuable tool for stakeholder alignment, providing a clear roadmap of our release strategy.
Outcome
The Getting Started checklist transformed our onboarding by balancing user autonomy and product access with guidance for incremental feature activation. Based on increased users and the majority of users skipping initial onboarding, we eventually dissolved our traditional onboarding flow completely and let do the checklist do all the heavy lifting for a successful setup. This decision was validated by positive numbers for each step completion, most importantly, calendar connection.
This solution not only addressed our initial user feedback but created a framework that could evolve with our product and accommodate new and setup steps as needed.
