Introduction
A dashboard that connects design work to measurable business outcomes.
The KPI Tracker is a UX metrics and OKR dashboard I researched, designed, and vibecoded to track design KPIs across projects. It turns usability scores, research progress, and design output into a shared language of impact. I build it to track the impact of my designs internally and share the outcomes with the business team.
Motivation
Designers talk about impact but rarely measure it.
While studying UX metrics, KPIs, and OKRs in depth — through Vitaly Friedman's Smart Interface Design Patterns course and independent research — I kept finding the same gap: the frameworks exist (SUS, UMUX-Lite, SEQ, feedback scoring), but most teams don't operationalize them. Design impact stays invisible when it lives in scattered spreadsheets and slide decks. I wanted to build the tool I wished I had.
Key insight
Designers need leading indicators, not just lagging ones.
Lagging indicators (revenue, retention, market share) are easy to spot but hard for designers to influence. Leading indicators (task success rate, usability scores, error frequency) respond directly to design decisions — and predict the business outcomes they connect to. The dashboard needed to center what designers can act on, while linking it to what the business cares about.
System Design
Three views, one dashboard, scoped per project.
OKR Tracker — Objectives with key results as progress bars. Each KR has a target, current value, status, and trend chart showing progress over time.
Metrics Log — Input scores after interviews or prototype reviews (SEQ per task, UMUX-Lite, feedback scoring). The system charts trends automatically across rounds.
Progress Tracker — Visual gauges for process metrics: interviews done, screens handed off, design system coverage, handoff readiness.
Every view is scoped per project — I can switch between Mercy Corps, OPAL, or any other active project and see its specific KPIs.
Technical stuff
Vibecoded in React + Firebase to make it real, fast.
React (Vite), Firebase Firestore (free Spark plan), Recharts for visualization, Tailwind CSS. Deployed on Netlify. Built with Cursor as my AI coding tool.
Firestore handles persistence — every metric update writes with a timestamp, so trend charts come for free. The data model uses a multi-project structure with subcollections for OKRs, sessions, and progress items. All editing is inline and optimistic: click a value, update it, the UI responds immediately while Firestore writes in the background. Logging a metric takes 10 seconds, not a workflow.
Current Status
The core system works. The KPI tracker dashboard is in progress.
Project switching, OKR tracking, metrics logging, and Firebase persistence are functional. What I'm currently building is the KPI tracker dashboard — the visualization layer that pulls everything into a single overview with trend lines, radar charts, and progress gauges.
This project is still a work in progress.
Projects
OPAL Anticipatory Action
Product Design + Systems Thinking
2026
Earth Genome
Product Design
2025
KPI Tracker
Product Design + Front-End
2026
AI integration