Enhancing user engagement through onboarding redesign

Overview

Root & Seed is a digital platform focused on preserving cultural heritage by helping users document and celebrate their family histories. It offers tools like "Conversation Card Decks" and an online "Conversation Tool" to facilitate this process.

Users can scan a physical card, which then directs them to the corresponding question in the app, where they can record memories through audio, images, and notes.

Role
Product Designer
Team
1 Solo Designer (me)
1 Design Manager
1 Developer
2 Co-founders
Client
Root & Seed
Tools
Figma
Jira

Brief

The existing onboarding process at Root & Seed lacked engagement and failed to effectively introduce the platform's unique features. The redesign aimed to create a more intuitive and compelling onboarding experience that highlighted the platform's value, guiding users through its tools seamlessly.

Problem Statement

Identifying the challenge of engaging users from the start

The existing onboarding process of Root & Seed lacked both instructional depth and visual interest, causing users to often skip this critical step. This led to a gap in users' understanding of the platform's functionalities, affecting their overall engagement.

This new onboarding experience was created to improve users' understanding of the application, simplify navigation, and optimize the use of the platform's features.

User Challenges & Problems

Learning from the gaps and pain points of the previous onboarding

The following screens are the old onboarding experience that users go through prior to entering the Conversation Tool.
I've outlined some of the main issues that needed to be addressed in the redesign.

How might we address these shortcomings in the previous design, but also ensure that the new solution is more user-friendly and adaptable to various user needs?

Lacks instructional depth

The target demographic, largely an older generation of matriarchs, required detailed guidance to feel confident navigating the platform.

Lacks visual engagement

The lack of visual interest may cause drop-off and decreased long term engagement.

Lack of personalization

A one-size-fits-all approach prevented users from experiencing relevant, personalized information.

No clear CTAs

Without clear calls-to-action, users often felt lost and unmotivated to explore further.

Goals

Defining success for the redesign

To grasp the core needs and preferences of our customers at Root & Seed, I engaged in discussions with product owners and my design lead.

User goals

  • Gain understanding of the platform through a clear, engaging onboarding process.
  • Effectively navigate and understand how to use features.
  • Experience personalized content that improves engagement.

Business goals

  • Enhance user engagement and retention rates via a more effective onboarding process.
  • Increase user growth through positive initial experiences.
  • Enhance brand trust with an intuitive and user-friendly design.

Product goals

  • Redesign the onboarding process to be more instructional, visually appealing, and engaging.
  • Allow users to comprehend and navigate the platform's features from their initial interaction.

Research

Researching best practices in onboarding experiences

Analysis of similar tech platforms revealed that successful onboarding processes feature clear, step-by-step instructions, a balanced use of text and visuals, and interactive elements. These findings informed the initial redesign.

For the first iteration of my design, I implemented an icon based approach to help communicate key features.

Type of Onboarding
Negative
Icon visuals
  • Can provide easily recognizable visual cues for actions or features
  • May not provide enough information, it could oversimplify too much
Snapshots of UI
  • Clear view of the user interface, and help identify how key features will look like
  • May not be as engaging
Animations
  • Can be more engaging and show users how to use features in the app
  • Can be distracting and may not work on slower devices or if there is poor connectivity
Illustrations
  • Memorable and provides an emotional connection with the user. It can also help build brand identity
  • Not as easily recognizable, and may also not work well for users with visual impairments

Low-Fi Wireframes

Transforming insights into a design solution

I embraced a collaborative and iterative design process, involving multiple feedback sessions with my design lead. The low-fidelity wireframes were inspired by insights gathered from an exploration phase, incorporating icon-style elements that highlighted Root & Seed's unique features.

Although the icon-based approach aligned with some insights, it failed to give users enough context to understand the features fully. As a result, I explored a new visual direction.

Product Development + Design System

Leveraging modular design for efficient product development

To enable efficient product development, I refined the design system and practiced modular approach.
I added to the design system by creating multi and single-select buttons and illustrations. This approach resulted in a reusable design components that streamlined the transition between design and development, while maintaining consistency across the platform.

Iterative Process

Refinement through feedback

Based on my mentor's feedback, I realized that the icon-style elements weren't effectively communicating the application's feature to the user. Although it was showing what the feature was, it lacked sufficient context.

As the result, I decided to take a different approach - by creating visual illustrations that mirrored the actual look and feel of the platform. These visuals were designed to highlight specific features during the onboarding process.

Here are the most notable changes I made between my iterations:

Visuals representing actual platform features

Instead than using icons visuals to represent our unique features, I designed illustrations that mirrored the look and feel of the specific feature inside the application.

Quick understanding through visual hierarchy optimization

I reorganized the visual hierarchy to prioritize textual information, to help facilitate quick user understanding of each feature.

Added contextual prompts to reduce user drop-off

I added prompts and repositioned the "Skip" button to reduce user drop-off and improve navigation flow.

Final Design

Delivering a personalized onboarding journey

The redesigned onboarding process took a tutorial-style approach, pairing detailed instructions with compelling visuals. Personalization was a key focus, ensuring users were welcomed with content tailored to their specific needs and interests.

By empowering users to customize their journey, we improve the chances of the user engaging and understanding the product.

User Testing

Validating my designs

Process

At the end of my time at Root & Seed, we launched the new onboarding design into live production and conducted A/B testing to gauge its effectiveness. This consisted of a 30-minute moderated online interview with participants, primarily targeting matriarchs of families who played a central role in preserving family histories.

We redirected traffic to two sources, one for the original design and one for the redesigned version to gather both qualitative and quantitative data.

I asked questions during and after the test to understand their immediate impressions, their interest, and overall experience.

Results

Longer engagement time: Users spent 133% more time engaging with the onboarding in the redesign, with an average of 1.4 minutes per user compared to the 0.6 minutes.

Positive user feedback: Feedback from users in the redesign group highlighted the clarity and engagement of the new onboarding process.

Original version

Q: Do you feel confident in using the platform's features after completing the onboarding? Why or why not?

"Not really. I’m still unsure about some features and how to fully use them because the onboarding didn’t provide enough context."

"...I felt my attention drifting because the content was repetitive and didn’t offer much new information."

Variant (redesign) version

Q: Do you feel confident in using the platform's features after completing the onboarding? Why or why not?

"I do, the detailed instructions made it clear how to use the features effectively."

"The information is presented clearly, and the step-by-step guidance is very helpful. I found it easy to follow and understand."

Reflection

Key takeaways from a new experience

This project taught me the critical role of interaction annotations in bridging communication between the design and development teams.

This was a new experience for me, and gave me the opportunity to build my skills in drafting annotations to make the transition from design to development as easy as possible. I learned that this process is vital for product implementation, as it streamlines workflows and fosters better teamwork and collaboration within the team.