01 / HERO

Mable Analytics

Improved onboarding, billing, and activation flows for a B2B analytics platform.

RoleProduct Design Lead
Year2024
Services
B2B SaaSAnalyticsGrowth UXDesign System
Impact12%Activation Increase
MABLE ANALYTICS / ONBOARDING INTEGRATION FLOWSTATUS: DEVELOPER ONBOARDING
Integration ChecklistSTEP 2 OF 3
Create Mable analytics project
Initialize SDK in application code
import Mable from '@mable/sdk';
Mable.init('m_prj_live_9a2f');
Verify payment details & active plan
02 / DEVELOPER ACTIVATIONMUNICH, DE
02 / EXECUTIVE SUMMARY

Overview

Mable's analytics platform had a product problem, not a features problem. The core functionality worked. But new users weren't getting there — not fast enough, and not reliably enough. Activation numbers showed it. Onboarding was introducing complexity before users had any reason to trust the product. I led design across onboarding, activation flows, information architecture, and a component system to fix the experience from first login through early adoption.

03 / BUSINESS CONTEXT

Market & Mission

Mable helps organizations make data-driven decisions through analytics and reporting tools. The business model is SaaS — which means activation isn't just a UX metric. It's a revenue signal. Users who don't reach meaningful outcomes in their first sessions rarely come back. They churn quietly, without explaining why. Every unnecessary step during onboarding was a drop-off risk. The product team knew this. What they needed was a clear read on where the experience was breaking and a design approach that fixed it without a full rebuild.

Visual AssetPLACEHOLDER
Activation funnel diagram
GRID SCALE: 1:1MONO GRAPHIC
Visual AssetPLACEHOLDER
Before / after drop-off visualization
GRID SCALE: 1:1MONO GRAPHIC
04 / UNDERSTANDING THE PROBLEM

Operational Friction

The friction wasn't one thing. It was layered. New users landed in an interface that asked them to configure the platform before showing them what it could do. Setup came before value. That's a reliable way to lose people who haven't yet committed to the product mentally. Beyond onboarding, the interface itself created confusion. Navigation didn't reflect how users thought about their work. Different modules followed different interaction patterns — same product, different rules. Users who got past onboarding still had to learn the platform in pieces, module by module. The information architecture had grown with the product rather than with the user. Features were organized around how they'd been built, not around what users were trying to accomplish.

Visual AssetPLACEHOLDER
Annotated screen captures from original onboarding
GRID SCALE: 1:1MONO GRAPHIC
Visual AssetPLACEHOLDER
Navigation audit diagram
GRID SCALE: 1:1MONO GRAPHIC
05 / KEY INSIGHTS

Discovery

STORY ARC: Strategy

Research sessions, product analytics review, and stakeholder discussions surfaced three patterns that kept coming up:

  • Time to value was too slow: Users spent significant time in configuration before they experienced anything useful. The product had strong capabilities — but the path to them was buried under setup steps that could have waited.
  • The onboarding journey had no sense of momentum: Users couldn't tell how far through setup they were, what came next, or whether they were making progress toward something meaningful. Completion felt arbitrary.
  • Modules felt like separate products: Visual patterns, interaction conventions, and labeling varied enough across the platform that context-switching between sections added cognitive overhead. Users had to relearn behaviors that should have been consistent.
Visual AssetPLACEHOLDER
Session notes (anonymized)
GRID SCALE: 1:1MONO GRAPHIC
Visual AssetPLACEHOLDER
Insight summary cards
GRID SCALE: 1:1MONO GRAPHIC
06 / DESIGN PRINCIPLES

Execution Logic

STORY ARC: Growth

These shaped every decision across the project:

  • Reduce time to value: The first session should show users what the product can do for them — not ask them to prove they're ready for it.
  • Guide progression: Onboarding needs a shape. Users should know where they are, what's next, and why it matters.
  • Simplify decisions: Every choice during setup has a cost. If a decision can be deferred, default it. If it can be removed, remove it.
  • Build for consistency: A design system isn't a style guide. It's the thing that makes the product feel like one product instead of several.
07 / SOLUTION

The Interface

STORY ARC: Activation

Onboarding redesign. The restructured onboarding flow led with outcomes, not configuration. Users saw relevant value — a sample report, a pre-populated dashboard, something concrete — before being asked to set anything up. Configuration steps that weren't immediately necessary were moved downstream. The first session became about demonstrating the product, not gating it. Activation framework. A guided experience layer tracked where users were in their setup and surfaced the next meaningful action contextually. Not a checklist in a sidebar — actual in-product prompts tied to what users were looking at. Users who were close to activating a feature got a nudge toward it. Users who had completed setup got pushed toward first real use. Information architecture. Navigation was reorganized around user workflows rather than product modules. The hierarchy was flattened in places where users were drilling through multiple levels to reach common tasks. Labels were rewritten to reflect what users were doing, not what the system was doing. Design system. Component patterns, spacing conventions, and interaction behaviors were standardized across the platform. The system was built to be used by the engineering team going forward — documented, scalable, and opinionated enough to prevent the drift that had created inconsistency in the first place.

Visual AssetPLACEHOLDER
Onboarding flow before / after comparison
GRID SCALE: 1:1MONO GRAPHIC
Visual AssetPLACEHOLDER
Activation prompt examples and triggers map
GRID SCALE: 1:1MONO GRAPHIC
Visual AssetPLACEHOLDER
Information architecture comparison diagram
GRID SCALE: 1:1MONO GRAPHIC
Visual AssetPLACEHOLDER
Component library overview & token documentation
GRID SCALE: 1:1MONO GRAPHIC
08 / VALIDATION & ITERATION

Refinement Loop

Prototype sessions with actual users, not assumptions. The first pass at the onboarding flow tried to do too much in the first screen — too many options presented as equally important. Users stalled. We trimmed the opening to a single decision and moved everything else to a secondary step. The activation prompts initially surfaced based on time — a nudge after X seconds of inactivity. Users found them intrusive. We switched to context-based triggers tied to specific actions (or non-actions) within relevant sections. That felt useful instead of pushy. The design system documentation was initially too abstract for the engineering team to use efficiently. We rebuilt the component library around real screen examples rather than isolated components, which closed the gap between design and implementation faster.

Visual AssetPLACEHOLDER
Before / after validation layout comparisons
GRID SCALE: 1:1MONO GRAPHIC
09 / IMPACT

Measurable Outcomes

The activation improvement was the headline. The design system was the longer-term investment — it gave the team a way to maintain consistency without design review on every component decision.

+12%Product Activation Rate
Cohort GainOnboarding Completion Boost
ReducedTime to First Action
100%Design System Core Adoption
Visual AssetPLACEHOLDER
Activation trend line graph
GRID SCALE: 1:1MONO GRAPHIC
10 / REFLECTION

Lessons & Learnings

First sessions are load-bearing. SaaS products lose most of their at-risk users before those users have a real opinion about the product. The experience during the first one or two sessions is doing more work than it looks like from the inside. Defaults are decisions. Every configuration step that defaulted to something sensible was a step users didn't have to think through. That sounds minor. Across an onboarding flow, it compounds. A design system only works if engineers can use it. Building the component library was the easy part. Making it navigable and practical for developers was the actual work. The documentation mattered as much as the components. Activation isn't a funnel problem, it's an experience problem. Optimizing steps and reducing drop-off points helps. But the underlying question is whether users understand what the product is doing for them. If they don't, fixing the funnel mechanics only gets you so far.

11 / NEXT PROJECT

Continue Reading