Overview
Subscription dashboards are good at showing that something happened and bad at saying what to do about it. Metricly is our product-UI concept for a dashboard where every chart ends in a next step: churn rising points to the accounts behind it, trial conversion dropping points to the onboarding step where people stall. The design system was built in Figma and implemented as a typed React component library.
Challenge
The problem to solve
Founders open analytics tools on a Monday morning with five minutes to spare. The interface had to turn a wall of metrics into one or two clear decisions.
Deliverables
What was produced
- 01
Overview dashboard with revenue trend and four headline numbers.
- 02
'At risk' view ranking accounts by revenue and recent usage drop.
- 03
Trial funnel with the stalled step highlighted.
- 04
Design system: tokens, charts, tables and empty states.
- 05
React component library with Storybook documentation.
Approach
How it was designed
- 01
Each chart is paired with one sentence and one button – what changed, and the most useful thing to do about it.
- 02
Only four numbers earn a place at the top; everything else is one click away rather than competing for attention.
- 03
Charts use a single accent per view, so the line that matters is never lost among a rainbow of series.
- 04
Empty and loading states were designed first, because a new customer's first week is spent looking at them.
Outcome
Where it landed
A complete product-UI system and coded component library, ready for engineering to wire to a metrics API.
A self-initiated studio concept, not client work – which is why it has no client name, testimonial or result figures.
