← Back to work
📊 KPI Tracking

KPI Tracking
Feature

Designing a way to measure and visualize KPIs inside customer journey maps — balancing simplicity for everyday users with the power and flexibility that advanced users demanded.

Platform
Cemantica (SaaS)
Role
Lead Product Designer
Methods
Interviews · Continuous Discovery · Competitor Analysis
📊
Hero screenshot
Replace with a final design screenshot showing the KPI panel in the journey map
01 — Problem

Users wanted to measure outcomes, not just map journeys

Cemantica helps CX teams build and manage customer journey maps. But journey maps without data are just storytelling — users were asking for a way to attach real KPIs to journey stages: NPS scores, satisfaction ratings, volume metrics, conversion rates.

The challenge wasn't just "add a chart." Different user types had wildly different needs. A junior analyst wanted a simple sparkline. A senior CX strategist wanted multiple data series, custom chart types, and the ability to overlay benchmarks. One solution had to serve both.

🗺
Before state
Screenshot of a journey map before KPI feature — showing the empty stage rows where KPI data would eventually live

The core tension

Advanced users were requesting features like multiple chart types, custom color mapping, and multi-series data. But if we built for them first, we'd create a UI that scared away the 80% of users who just wanted to drop in one number and move on.

This is a classic progressive disclosure problem — and it became the design principle we kept coming back to throughout the project.

02 — Discovery

Continuous discovery: talking to users every week

Rather than a single big research phase, we used Teresa Torres' continuous discovery framework — running short weekly interviews with active Cemantica users, focused on their actual workflows around measuring CX performance.

🎯
12 user interviews
Conducted over 6 weeks with a mix of junior analysts, senior CX strategists, and team leads across different industries.
📋
Survey: 34 responses
Sent to existing users asking about their current workarounds for tracking KPIs — most were using spreadsheets alongside Cemantica.
🔍
Session recordings
Reviewed Hotjar recordings of users in the existing product to identify where they got stuck or disengaged.
💬
CSM interviews
Spoke with the Customer Success team — they had a goldmine of indirect feedback from enterprise clients about missing metric features.
🗂
Research synthesis
Affinity map or opportunity solution tree from the discovery sessions — Figma or Miro screenshot works great here

How we synthesized

After each week's interviews, I ran a short synthesis session with the PM using an opportunity solution tree. We mapped user pain points to opportunity areas, which helped us avoid jumping to solutions too quickly.

The tree revealed two distinct opportunity clusters: data input friction (users struggled to get data in) and visualization flexibility (the output didn't match how they communicated KPIs internally).

03 — Insights & Opportunities

Four insights that shaped the design

User quote — Senior CX Strategist

"I end up exporting our journey map as a PDF and then manually pasting in the NPS data from Excel. It's embarrassing when I show it to the C-suite."

📉
The spreadsheet workaround
68% of surveyed users were maintaining a separate spreadsheet to track KPIs alongside their journey maps. The two documents quickly fell out of sync.
🎨
Visual type matters by audience
Internal CX teams preferred line charts (trend over time). Executive presentations needed bar charts or single bold numbers. Same data, different format.
Speed of input is critical
Users in interviews consistently mentioned that if adding KPI data takes more than "a few clicks," they'll skip it. Friction = abandonment.
🔢
Advanced users are vocal minorities
Power users who needed multi-series charts were loud in support forums but represented ~15% of users. We couldn't design only for them.
Design opportunity

Design a KPI component that defaults to the simplest possible state — a single metric — but progressively reveals more power as users opt in, without ever making the simple path harder.

04 — Competitor Analysis

How others solved data visualization in journey tools

I audited six tools that handle metrics inside journey or workflow contexts: TheyDo, Smaply, Notion, monday.com, Miro, and Tableau. The goal wasn't to copy — it was to understand the solution space and identify gaps.

🔭
Competitor analysis grid
Screenshot of competitor analysis — a comparison table or annotated screenshots of TheyDo, Smaply etc. showing how they handle KPI/metrics

Key takeaways

TheyDo had the most mature approach — inline metrics directly on journey stages — but required data to be pre-formatted in a specific way, creating input friction.

Notion showed that simple number inputs with optional chart expansion worked well for non-technical users.

None of the tools offered progressive disclosure of chart complexity — they were either too simple or too powerful. That gap became our differentiator.

05 — Iterations

Three major directions, tested and refined

I explored three distinct design directions before landing on the final approach. Each was tested with 4–5 users in moderated prototype sessions.

🧪
Iteration 1 screenshot
Early concept — side panel approach for KPI input
Iteration 01
Side panel editor
A dedicated side panel that opened when clicking a journey stage — similar to Figma's properties panel. Users could add metrics, choose chart type, and configure everything in one place.

Problem: Users felt disconnected from the journey map while editing. "I can't see how the KPI fits in context." The panel also added screen estate pressure on smaller screens.
✕ Abandoned — too much context loss
🧪
Iteration 2 screenshot
Inline row concept — KPI row directly below the journey stage row
Iteration 02
Inline KPI row
A dedicated row directly beneath each journey stage, always visible, showing the chart inline. Users clicked any cell in the row to edit values.

What worked: Context was preserved — users could see KPIs and stages together. Problem: The always-visible row added visual noise for teams not using KPIs yet. "It feels like I have an empty table following me around."
~ Promising but too noisy by default
🧪
Iteration 3 screenshot
Progressive disclosure concept — collapsed KPI row that expands on interaction
Iteration 03
Progressive disclosure row
Same inline row — but collapsed to a thin 20px strip by default, expanding to full height when clicked or when data is present. Simple number input visible first; chart configuration revealed as a secondary step.

Result: Users loved it. Beginners ignored the row until ready. Power users immediately found the expand affordance. "This feels like it was made for me."
✓ Validated — moved to refinement
06 — Final Design

A KPI row that grows with you

The final design uses a collapsible KPI row per journey stage with three states: empty/hidden, simple (single metric with auto-chart), and expanded (full chart configuration). Users move through states naturally as their needs grow.

🖥
Final design — full journey map view with KPI rows
Your best final screenshot here — ideally showing a populated journey map with at least 2–3 KPI rows in different states (collapsed, simple, expanded with chart)
One-click add
Adding the first KPI takes a single click on the "+" affordance. Type a number, press enter. Done. No modal, no configuration required upfront.
📈
Auto chart selection
The system picks the most appropriate chart type based on the data shape — single value gets a bold number display, time-series gets a line chart.
🎛
Power user mode
Expanding the row reveals full configuration: multiple data series, chart type override, benchmark lines, color mapping, and export options.
🔗
Consistent with the system
The KPI row uses the same interaction patterns as other journey map rows — consistent expand/collapse, same edit-in-place behaviour throughout.
🎛
Expanded chart configuration
Screenshot of the expanded KPI row showing the full chart configuration state — the "power user mode"

Design decisions worth highlighting

We deliberately hid the chart type selector until a user had already added at least one data point. This reduced decision paralysis for new users while keeping the option accessible the moment it became relevant.

We also chose to auto-save on blur rather than requiring an explicit "save" action — a small detail that made the entire editing experience feel lighter and faster.

Reflection

The biggest design lesson from this project: progressive disclosure only works if the "simple" state is genuinely useful on its own — not just a stripped-down version of the complex one. We had to design the simple and complex states separately, then connect them.

Next case study
Persona Management Feature →
All work