MappingSpace | September 2024
What
MappingSpace is an internal DevOps platform used by developers to manage the research and develop(R&D) process to increase efficiency.
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%
Increase in user retention
25%
Increase 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 Product Manager
3 Software Developers
Disciplines
UX design
Feature Scoping
Accessibility Design
A/B Testing
Design System
MVP
Core Experience Redesign
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 REDESIGNED
Increase efficiency for technical users
Get more done in less time and take control of productivity like never before.
New Feature
0 to 1 New Feature: Onboarding Hub
With 10+ core features, I helps technical users streamline onboarding, stay motivated with rewards, and never miss a new feature release. Elevate technical users' onboarding to the next level.
Problem
Users face significant challenges during onboarding, leading to higher churn rates and increased customer support costs.
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.
Research
Comparison of Three Previous Onboarding Methods
1. User Manuals:1. User Manuals: Informative but Difficult to Act On
Disadvantages
Too Long or Overwhelming
Documentation was too long, poorly segmented, and not action-oriented.
Lack of Interactivity
Manuals are static and do not guide users step-by-step in real time
Not Contextual
Manuals often present information out of context, without adapting to the user's current task or level of expertise.
2. YouTube Tutorials: Visually Clear but Contextually Detached
Visually engaging
Videos provide a clear and effective way to showcase new features
Scattered Content
Videos are presented in no particular order, making it hard for users to locate the tutorial they need.
Misleading Thumbnails
Video thumbnails don’t accurately reflect tutorial topics, preventing quick recognition of the right guide.
3. Email Onboarding: Timely Outreach but Low Engagement
Lack of Interactivity
May be ignored or end up in spam folders.
Not Contextual
Timing may not align with user needs or actions.
Low Discoverability
Not embedded in the product; no real-time guidance.
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.
How might we
How might we provide contextual, in-product guidance to help users complete key tasks independently?
Boil down findings into
3 Design Criteria
Design Process
Step 1: What‘s the content？
Given the limited resources (we had to launch this feature within a month, 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.
1.YouTube Tutorials: Visually Clear but Contextually Detached
Videos are presented in no particular order, making it hard for users to locate the tutorial they need.
2.User Manuals: Informative but Difficult to Act On
Step 2: Layout Exploration
Choosing a Flexible Layout for Multi-Format Tutorials
I chose to present the tutorials in a list format.While using videos was an option, I opted for a toggle list to better support multiple content types—such as step-by-step guides, videos, and text-based explanations. This structure ensures better visual harmony and flexibility, especially when some features lack video content.
Step3 : Design
Evaluating concepts
✅ Usability tests: task-based onboarding improves action but needs better pacing
65% of users completed onboarding tasks more confidently when guided by task-based checklists and embedded tooltips. They felt more "in control" and less overwhelmed compared to reading manuals or watching videos.
However, some users found the tooltips too frequent or interruptive. This insight helped us refine the pacing and placement of in-product guidance.
What worked: Clear tasks + contextual help reduced user hesitation
What didn’t: Overuse of tooltips led to dismissals or frustration
⚙️ Engineering constraints: global progress tracking and tooltip injection
While iterating based on usability feedback, we encountered two technical blockers:
Injecting tooltips across multiple product modules required refactoring legacy frontend code
Cross-module progress tracking wasn’t supported by the current state management system
Because of these limitations, we scoped down the MVP version to static checklists and a limited set of reusable tooltip components.
Trade-off: We prioritized fast-to-ship features while keeping extensibility in mind for V2
Iteration towards Flexibility:
How can we remind users about features they haven’t tried yet?
Version 1
Onboarding Hub icon will float on homepage to remind the user
Insight from A/B Testing
Our A/B testing revealed a 96% drop in onboarding icon engagement after the first week. This highlighted the need for a less intrusive, more flexible way to surface onboarding help.
Staged Onboarding Entry Design
A phased icon rollout keeps guidance visible but unobtrusive—starting as a popup, then minimizing to a corner icon, and eventually moving to the dashboard.
Version 2
After a week, the icon will reduce to compact icon only
After 2 weeks, icon removed from homepage, appears only on user dashboard
Design Decision
This approach ensures that users with different motivations—whether they need immediate help or prefer to explore later—are equally supported.
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.