IBM CASE STUDY
Onboarding pattern to increase retention
I led the creation of IBM's new onboarding pattern that increased onboarding retention by 50%. I collaborated with visual design, PMs, and content to deliver a pattern that was green lit to use across IBM's product suite.
+50%
RETENTION RATE
+40%
COMPLETION RATE
Overview
My team redesigned the onboarding experience for IBM's product suite. Onboarding is a user's introduction to a software and informs tone and interaction. The existing onboarding didn't match IBM's design system Carbon. It also failed to encourage product exploration.
I led the redesign of IBM's onboarding system. I worked with visual designers, information architects, and product managers. Together, we built a scalable solution that helps users at the right moment. This solution reduced cognitive load and boosted retention by 50%.
Outcome
Designed Figma library of 10+ components and documented best practices to support adoption across diverse IBM products.
Presented onboarding pattern to IBM design leaders and secured buy-in for cross-product adoption
Role
UX Design Intern
Responsibilities
Product Strategy, Design Systems
Collaborators
UX Design Team, Product Manager, Visual Designer, Content Designer
Timeline
May - Aug 2024
The Challenge
The old version of onboarding started with a pop-up that covered the whole screen. Users could skip the tutorial or start the onboarding. Most skipped onboarding and chose to explore the software on their own.
BUSINESS NEED
80% of users dropped off at this point during onboarding. This increased product abandonment and customer support volume.
USER NEED
Users had cognitive overload from walls of text and skipped onboarding altogether. Then, when they needed guidance later they had no way to re-access onboarding.
Brainstorming
Our team conducted a workshop to identify user pain points. We also explored opportunities to encourage product learning.
We identified three focus areas.
Break complex flows into manageable pieces to avoid cognitive overload.
Create multiple entry points into onboarding. Users can start where they need help most.
Add progress indicators to build a sense of achievement.
ITERATIONS
Early Iterations
We brainstormed ways to integrate the walkthrough with the interface. It needed to be content-aware and unobtrusive. No more full-screen popups.
Direction #1
We worked closely with the information architecture team to explore different approaches. One option was adding a dedicated onboarding module to the homepage dashboard. This would give users easy access to learning materials from their main workspace.
USER TESTING
Testing version 1
We tested version 1 with 4 participants in moderated think-aloud sessions.
NEGATIVE
Users found the steps hard to remember. They needed more guidance on where interface elements were located. They also wanted to understand how each step contributed to the overall task. The step order alone wasn't enough.
POSITIVE
Users liked the progress meter on the dashboard. It let them track their progress and anticipate next steps. They also found the purple onboarding design easy to follow since it stood out from the rest of the interface.
ALIGNING DESIGN SYSTEM
Color application
I worked with visual design to make onboarding content stand out while following IBM Carbon design system. We used purple to clearly show onboarding information and attract user interest. This distinct visual style creates coherence throughout the experience. Users recognize onboarding content because each stage uses the same purple styling.
FINAL DESIGN
Full flow
Users see a nudge to start onboarding when they enter new interface areas. After completing the onboarding lesson, a closing modal prompts them to next steps. On the homepage, a progress card shows remaining steps. A flashing beacon marks the location of the next onboarding step. Users can click the beacon for a dialog box with details. They start the next step and see a new nudge. This repeats until onboarding is complete.
Nudges
When users explore new parts of the interface, an onboarding suggestion appears. Users can choose to explore independently or start onboarding. This lets users control their learning experience. The notification stays available to launch onboarding if they get stuck.
Progress tracker
After completing an onboarding step, users return to the homepage. A progress tracker shows total progress and remaining steps. Users can launch the next step by clicking the highlighted item. The progress tracker gives users a sense of progress toward completion and shows how each step builds toward the main task.
Beacon tips
A flashing beacon appears beside the next step of onboarding. Users can click the beacon for step details before they begin.
IMPACT
The results
The onboarding redesign exceeded expectations. It delivered strong results within 2 weeks after launch. In the test launch, users completed onboarding 40% more often. The drop-off rate greatly decreased. Fewer users left onboarding at the start. I presented the project to IBM design leadership. They responded positively and green-lit the onboarding pattern for use across IBM's product suite.
RETENTION RATE
COMPLETION RATE