Boost Feature Adoption:
 Onboarding Hub for B2B DevOps Internal Tool

Boost Feature Adoption:
 Onboarding Hub for B2B DevOps Internal Tool

MappingSpace | September 2024

What

MappingSpace is an internal DevOps platform used by automotive developers to manage the research and develop(R&D) process to increase efficiency by using LLM.

Scope

Owned the end-to-end UX of an onboarding hub and MVP redesign, enhancing retention and fostering stronger user engagement.

Impact

Improved onboarding process

35%

Reduced customer support tickets

25%

Increased in time spent on website

12%

Analytics from the 3-month period after launch showed improvements compared to the previous release cycle

Role

Lead UX Designer

Timeline

3 month timeline, 2024

Team

1 CTO

3 Software Developers

Disciplines

UX design

Feature Scoping

Accessibility Design

A/B Testing

Design System

Design Solution

0 to 1 New Feature: Onboarding Hub

I helps technical users streamline onboarding, stay motivated with rewards, and never miss a new feature release.

Track your onboarding progress

Monitor your journey step by step with a clear onboarding dashboard. Easily view tasks, check completion status, and stay on top of your goals.

Track your onboarding progress

Monitor your journey step by step with a clear onboarding dashboard. Easily view tasks, check completion status, and stay on top of your goals.

Track your onboarding progress

Monitor your journey step by step with a clear onboarding dashboard. Easily view tasks, check completion status, and stay on top of your goals.

Earn rewards by completing tasks

Boost engagement and motivation as you earn rewards for finishing onboarding steps. Onboarding Hub makes learning fun while recognizing your progress.

Earn rewards by completing tasks

Boost engagement and motivation as you earn rewards for finishing onboarding steps. Onboarding Hub makes learning fun while recognizing your progress.

Earn rewards by completing tasks

Boost engagement and motivation as you earn rewards for finishing onboarding steps. Onboarding Hub makes learning fun while recognizing your progress.

Stay updated on new feature launches

Never miss an update again. Receive instant notifications about new features, so your team can explore, adapt, and benefit right away.

Stay updated on new feature launches

Never miss an update again. Receive instant notifications about new features, so your team can explore, adapt, and benefit right away.

Stay updated on new feature launches

Never miss an update again. Receive instant notifications about new features, so your team can explore, adapt, and benefit right away.

User Problem

New users feel lost when starting in MappingSpace.

Without a guided entry point, they face an overload of buttons and features, unsure where to begin their first task.

Without a guided entry point, they face an overload of buttons and features, unsure where to begin their first task.

“When I first logged into MappingSpace, I felt overwhelmed by all the features and buttons. I had no idea where to start.”

—— John, Technical User

“When I first logged into MappingSpace, I felt overwhelmed by all the features and buttons. I had no idea where to start.”

—— John, Technical User

Users struggle with understanding how to use MappingSpace.

Research

Investigate previous onboarding methods

Why our onboarding methods failed?

Manage your Projects and Tasks
Manage your Projects and Tasks
Manage your Projects and Tasks

User Manuals

Informative but Difficult to Act On

Too Long or Overwhelming

Too Long or Overwhelming

Too Long or Overwhelming

Lack of Interactivity

Lack of Interactivity

Lack of Interactivity

Not Contextual

Not Contextual

Not Contextual

Organize your life
Organize your life
Organize your life

YouTube Tutorials

Clear but Contextually Detached

Visually engaging

Visually engaging

Visually engaging

Scattered Content

Scattered Content

Scattered Content

Misleading Thumbnails

Misleading Thumbnails

Misleading Thumbnails

PARA Method
PARA Method
PARA Method

Email Announcement

Timely, but the open rate was low.

Low Discoverability

Low Discoverability

Low Discoverability

Lack of Interactivity

Lack of Interactivity

Lack of Interactivity

Not Contextual

Not Contextual

Not Contextual

From research, I conclude:

Traditional onboarding methods fail to support real-time, task-based learning. Users struggle to apply information in context, leading to confusion, low feature adoption, and high support dependency.

User Goal

Users want to learn how to use the software more easily and independently.

User Goal

Users want to learn how to use the software more easily and independently.

User Goal

Users want to learn how to use the software more easily and independently.

Business Goal

Minimize user inquiries while maximizing feature adoption, engagement, and monetization.

Business Goal

Minimize user inquiries while maximizing feature adoption, engagement, and monetization.

Business Goal

Minimize user inquiries while maximizing feature adoption, engagement, and monetization.

Insight

From research, I conclude

Traditional onboarding methods fail to support real-time, task-based learning. Users struggle to apply information in context, leading to confusion, low feature adoption, and high support dependency.

Boil down findings into

3 Design Criteria

Informative

Provide real-time help embedded within the user’s current workflow to reduce cognitive switching.

Informative

Provide real-time help embedded within the user’s current workflow to reduce cognitive switching.

Informative

Provide real-time help embedded within the user’s current workflow to reduce cognitive switching.

Flexible

Introduce features step-by-step based on user intent and experience level, avoiding information overload.

Flexible

Introduce features step-by-step based on user intent and experience level, avoiding information overload.

Flexible

Introduce features step-by-step based on user intent and experience level, avoiding information overload.

Engaging

Focus on helping users achieve specific tasks rather than just explaining features.

Engaging

Focus on helping users achieve specific tasks rather than just explaining features.

Engaging

Focus on helping users achieve specific tasks rather than just explaining features.

Design Process

Exploration 1: Layout

Given the limited resources, we focused on onboarding for the 9 most essential and frequently used features. We were able to repurpose existing text content from previous tutorials and user manuals as the foundation for this onboarding module.

PARA Method
PARA Method

Design 1

Card Layout: 9 tutorials per page

Card Layout: 9 tutorials per page

Card Layout: 9 tutorials per page

Incorporate most videos

Incorporate most videos

Incorporate most videos

45% found it hard to locate the videos they want.

45% found it hard to locate the videos they want.

45% found it hard to locate the videos they want.

Organize your life
Organize your life

Design 2

Accordion: 3 tutorials per page

Accordion: 3 tutorials per page

Accordion: 3 tutorials per page

25% preferred accordion layout because has detailed explanation

25% preferred accordion layout because has detailed explanation

25% preferred accordion layout because has detailed explanation

35% found it cluttered

35% found it cluttered

35% found it cluttered

PARA Method
PARA Method

☑️ Design 3 (Winner)

Toggle List: 4 tutorials per page

Toggle List: 4 tutorials per page

Toggle List: 4 tutorials per page

35% preferred expanded video Easy to see tutorial upfront.

35% preferred expanded video Easy to see tutorial upfront.

35% preferred expanded video Easy to see tutorial upfront.

65% found it cluttered Took too much space, hard to scan tasks.

65% found it cluttered Took too much space, hard to scan tasks.

65% found it cluttered Took too much space, hard to scan tasks.

Iteration

Exploration 2:
Layout+ User Testing

Design A

click-to-open

Colorful icons representing documents, videos, images, and notes, highlighting a unified research hub.
Design A

click-to-open

Colorful icons representing documents, videos, images, and notes, highlighting a unified research hub.
Design A

click-to-open

Colorful icons representing documents, videos, images, and notes, highlighting a unified research hub.
70% preferred click-to-open Clean, concise, easy to browse.

30% wanted more upfront info Tutorial less visible, weak completion feedback.

70% preferred click-to-open Clean, concise, easy to browse.

30% wanted more upfront info Tutorial less visible, weak completion feedback.

70% preferred click-to-open Clean, concise, easy to browse.

30% wanted more upfront info Tutorial less visible, weak completion feedback.

Design B

expanded video

Highlighted AI-generated summary text with buttons for using templates and rescanning content.
Design B

expanded video

Highlighted AI-generated summary text with buttons for using templates and rescanning content.
Design B

expanded video

Highlighted AI-generated summary text with buttons for using templates and rescanning content.
35% preferred expanded video Easy to see tutorial upfront.

65% found it cluttered Took too much space, hard to scan tasks.

35% preferred expanded video Easy to see tutorial upfront.

65% found it cluttered Took too much space, hard to scan tasks.

35% preferred expanded video Easy to see tutorial upfront.

65% found it cluttered Took too much space, hard to scan tasks.

Final Design

New Onboarding experience

Elevate technical users' onboarding to the next level.

0%

Users feel more aligned with MappingSpace's product direction.

0%

Users feel more aligned with MappingSpace's product direction.

0%

Users feel more aligned with MappingSpace's product direction.

0x

Synthesis time is quicker than traditional onboarding methods.

0x

Synthesis time is quicker than traditional onboarding methods.

0x

Synthesis time is quicker than traditional onboarding methods.

Final Overview

MVP Experience

MappingSpace Onboarding Hub was designed to help enterprise users manage project more efficently in a complex B2B platform. Through agile, knowledge base, data reports, and mind map.

Productivity Resigned

Increase efficiency for technical users

Get more done in less time and take control of productivity like never before.

Track and analyze effortlessly

Redesigned agile boards and report views, giving teams clearer visibility into progress.

Track and analyze effortlessly

Redesigned agile boards and report views, giving teams clearer visibility into progress.

Track and analyze effortlessly

Redesigned agile boards and report views, giving teams clearer visibility into progress.

Data Visualization

Redesigned dashboards with intuitive charts, improving readability and decision-making.

Data Visualization

Redesigned dashboards with intuitive charts, improving readability and decision-making.

Data Visualization

Redesigned dashboards with intuitive charts, improving readability and decision-making.

Streamlined Work flow

Optimized layout and hierarchy, making documentation easier to create, browse, and share.

Streamlined Work flow

Optimized layout and hierarchy, making documentation easier to create, browse, and share.

Streamlined Work flow

Optimized layout and hierarchy, making documentation easier to create, browse, and share.

Take Away

What I learned

Everything I would consider in the future

Considering development effort and Revenue-Generating Design

As designers, we aim for aesthetics, but in B2B companies, design must align with value creation. It’s crucial to balance front-end work with business impact and find opportunities to drive revenue. We must also recognize limitations, like data gaps or designs slowing down the website.


Embracing Ambiguity for Creative Product Development

In the fast-paced product development process, not all features are clear from the start. Embracing ambiguity and collaboratively exploring possibilities with the product manager is essential. Stay flexible and adaptable, using incomplete information as a catalyst for creativity.


Designing for Scalability and Future Growth

Product designers must think beyond aesthetics and usability, considering development early. Focus on scalability, edge cases like internationalization, and future feature expansion to ensure sustainable design as the product evolves.