In-app onboarding

The challenge

As the sole designer for Nutshell, a CRM software company, I faced a major challenge when I set out to overhaul the app’s onboarding and in-app learning experience. Drawing from the insights of Page Laubheimer's article on the pitfalls of onboarding tutorials versus contextual help, I aimed to create a seamless, intuitive user experience that respected people’s desire to engage with the product immediately and effectively, without being interrupted.

A thorough audit

My initial review of Nutshell's existing onboarding revealed that it relied heavily on push revelations, disruptive information revealed out of context that was quickly forgotten.

Dozens of screenshots from a first-time user’s walkthrough of the app revealed an overwhelming number of pop-ups and wizards that interrupted the onboarding flow.

I wanted to design a more context-driven solution, using a strategy driven by pull revelations. This meant providing help content when and where it was needed, reducing cognitive load, and enhancing retention of the information given.

My hypothesis

If we introduce a few flexible, well-designed onboarding components that behave as pull revelations, we could replace the unhelpful ones with new ones that:

• Achieve the same onboarding goals
• Are more effective in guiding new users
• Reduce interruptions during the onboarding process
• Are less overwhelming for users

Design process

Gathering inspiration

Inspired by the examples from my research, I gathered a collection of screenshots displaying best practices from different industry-leading apps. This helped me envision how more helpful, non-intrusive onboarding components could look like for Nutshell.

Inspiration captured from existing apps and services.

Introducing: “CUE cards” (Contextual User Education)

Aligned with the design principles surfaced in my research, I designed a new component called "CUE cards" (where CUE stands for "Contextual User Education").

These tooltips appear contextually only when relevant to someone's actions. The cards are designed to be easily dismissed and recalled, offering help without requiring users to remember steps or disrupt their workflow.

Detailed specifications for the new CUE card component.

Showcasing the CUE card's layout flexibility.

A few examples of actual CUE cards that might appear somewhere in the app.

Introducing: The Nutshell glossary

The Nutshell glossary is a comprehensive in-app resource available from any page in the app. It provides additional information relevant to what you're doing, and it's where CUE cards can be reaccessed once dismissed. It was designed to improve comprehension without being in-your-face or overwhelming.

The glossary is a sidebar accessible from any page in Nutshell. It contains CUE cards and other relevant information about what you’re currently viewing.

An animated 'Learn more' bookmark button is tucked into the header of each page, providing quick access to the glossary at any time.

The glossary opens on top of your current view, helping you maintain context within the app. It's only accessed when you need it and won’t pop open without your consent.

Redesigning the onboarding checklist

Nutshell's original onboarding checklist had several issues. It was overcrowded with tasks, unclear how to mark each item as complete, and didn’t effectively communicate progress towards completion.

The old checklist in Nutshell was cluttered and overwhelmed people with an excessive number of tasks.

I redesigned a new checklist to address these issues and focus on three main tasks, carefully selected to set new users up for success. This simplification made it much less overwhelming than the previous checklist. Fewer, focused actions felt more manageable.

I designed clear visuals for task completion and incorporated celebratory feedback into completing each milestone. These progress indicators make getting started with the app feel like a rewarding process.

The new checklist is much simpler and easier to complete after collaborating with internal, customer-facing teams to identify three main tasks to kickstart people's experience.

We also recognized the need for this checklist to be accessible at any point in the user journey, like having a map in your back pocket. It needed to be available from any page inside the app, so I integrated the redesigned checklist into the sidebar. This ensured that you could still access it when you were no longer on the dashboard and needed to refer to it while completing a task.

Making the checklist accessible from the sidebar ensures it's available at every step of the onboarding experience without being too invasive.

Impact & lessons learned

Redesigning Nutshell’s onboarding system was a significant step toward an approach that aligns with modern usability principles.

While the full implementation extended beyond my tenure at the company, the project laid the groundwork for a delightful experience that respects people’s time and appears more contextually.