MappingSpace | September 2024
Problem
The platform’s complexity and information overload during initial use left users feeling overwhelmed. In particular, some secondary features suffered from low usage due to poor guidance and unclear functionality, resulting in user confusion and drop-offs.
Solution
As the Lead UX Designer, I led the end to end design of the onboarding hub and feature announcement feature under urgent timeline, ensuring a seamless onboarding flow for new users and an easy way to revisit released features.
THE HIGH-LEVEL GOALS THAT DEFINED MY DESIGN
Reduced cognitive load for first-time users
Increased feature discovery and repeat engagement
Integrated business prompts (e.g., phone collection) without hurting trust
DESIGN CONSTRAINT
3 month accelerated release schedule
Complex legacy system with limited flexibility
The solution balanced usability, technical constraint, and business needs, creating a smoother journey for both new and returning users.
Impact
Stronger Onboarding, Higher Retention, and More Engaged Users
Analytics from the 3-month period after launch showed improvements compared to the previous release cycle:
70%
Improved onboarding process
25%
Increase in user retention
84%
Increase in time spent on website
Lead UX Designer
Timeline
3 month timeline, 2024
Product Manager*1
Software Developers*3
UX design
Feature Scoping
Accessibility Design
A/B Testing
Design System
Core Experience
MappingSpace Onboarding Hub was designed to help enterprise users adapt quickly to a complex B2B platform. Through personalized guidance, progress tracking, and flexible re-entry points, the new onboarding experience empowers users to unlock the full value of the product—at their own pace.
Track onboarding journey with progress
The onboarding hub shows users how much they’ve learned—and what’s next. Each completed step brings rewards and unlocks advanced modules, motivating users and boosting engagement.
Earn rewards by completing onboarding tasks
To support first-time users in navigating a complex B2B platform, we designed a modular onboarding hub, accessible anytime via a persistent floating icon at the bottom-left corner.
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. This ensures support is available without overwhelming users.
Research
Tools For Thought
Why users aren’t fully grasping our product features
The Product Manager and I revisited our previous feature-informed approach, conducted a round of user interviews, and reviewed over 50 emails — here’s what we uncovered
Static email updates failed to clearly communicate new product changes, which often left users confused
Users typically ignored emails.
Videos
Videos provide a clear and effective way to showcase new features
Users skipped long videos |
Users forgot what they learned quickly
They felt overwhelmed by too many tabs and tools
User Manuals
Users forgot what they learned or felt overwhelmed
They forgot what they learned quickly
They felt overwhelmed by too many tabs and tools
We realized: users didn’t need more information — they needed a smarter way to learn by doing.
Key Insight
Users felt overwhelmed by dense information
It simplifies learning, inspires exploration, and supports business goals — all without disrupting trust. Subtle prompts are integrated naturally along the way.
All this boils down to
Competitor Analysis:
I chose to conduct a competitor analysis of the leading products in the B2B and complex task management software space, focusing on how their onboarding processes and onboarding training fit together.
Traditional onboarding process
Progressive disclosure of information
Task-based tutorials.
Design Goal & Strategy
How might we create an onboarding hub that simplifies learning, encourages exploration, and supports business goals — without losing user trust？
It simplifies learning, inspires exploration, and supports business goals — all without disrupting trust. Subtle prompts are integrated naturally along the way.
Design Process
Information Architecture:
Multi-entry onboarding flow & user autonomy
To support diverse user journeys, I mapped out an adaptive onboarding flow that aligned with different entry points and usage behaviors. The onboarding experience was no longer a one-time path, but a flexible guide system that respected user timing and intent.
Key experience logic:
Week 1: Onboarding icon appears on the homepage with a welcome prompt.
Week 2: Icon shifts to the dashboard with a minimized visual.
Week 3–6: Gradually deprioritized and eventually hidden.
Users can trigger onboarding anytime, return to their original flow after exploring, and resume from where they left off.
Users are shown a clear 3-step roadmap when onboarding is initiated.
A progress tracker encourages completion with visible milestones.
Completion rewards include one-month premium trials or bonus M coins, incentivizing full walkthrough.
Design Decision: This approach ensures that users with different motivations—whether they need immediate help or prefer to explore later—are equally supported.
Introduces users to the platform's core functionality in a frictionless, motivating, reusable onboarding process that while reducing cognitive load.
Design Process
We designed low-fidelity wireframes to visualize the new layout and navigation, iteratively refining them based on user feedback. Afterward, we built a high-fidelity, interactive prototype to test the design.
Iteration 01
Task-based progressive onboarding
We began with task-based tutorials, mapping actions to user goals (e.g., "complete X setup to unlock reward"). These tasks reinforced engagement, improved retention, and helped users connect product value to their workflow.
Design Decision: Tasks were grouped by relevance and progress was visualized.
Iteration 01
Task-based progressive onboarding
We began with task-based tutorials, mapping actions to user goals (e.g., "complete X setup to unlock reward"). These tasks reinforced engagement, improved retention, and helped users connect product value to their workflow.
Design Decision: Tasks were grouped by relevance and progress was visualized.
Iteration 02
Floating onboarding hub with reward incentives
We began with task-based tutorials, mapping actions to user goals (e.g., "complete X setup to unlock reward"). These tasks reinforced engagement, improved retention, and helped users connect product value to their workflow.
Design Decision: Tasks were grouped by relevance and progress was visualized.
Iteration 03
Flexible entry points and re-entry logic
We began with task-based tutorials, mapping actions to user goals (e.g., "complete X setup to unlock reward"). These tasks reinforced engagement, improved retention, and helped users connect product value to their workflow.
Design Decision: Tasks were grouped by relevance and progress was visualized.
TAKE AWAY
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.