Project details
Client
Year
2025-2026
My Role
Product designer & Front-End Developer
Platforms
Desktop & Mobile
Problems
Error-prone calculations: Manual commission rates (60% / 70%) led to mistakes.
Low transparency: Staff could not easily confirm their earnings, causing confusion and mistrust.
Time-consuming payroll: Payroll prep took hours, especially during busy periods.
The Old Workflow:
Commission Tracking Over Text
The dashboard replaces back-and-forth messages with a single, reliable source of truth for commissions and sales.
Kimmy’s Commission Tracker.
A transparent payroll dashboard for salons.
Overview
Kimmy’s Commission Tracker is a web-based dashboard designed to automate commission calculations, centralize sales data, and give both salon owners and staff real-time visibility into earnings. The project focused on clarity, speed, and trust—prioritizing usability over visual flair in a data-heavy environment.
My Role, Platforms, Timeline
Role: Product Designer, UX/UI Designer, Dashboard Designer, Front-end Developer
Platforms: Desktop web, Tablet / mobile web
Timeline: 2 weeks (January 2026)
The Old Workflow
Before the app, commissions were tracked manually using notes and spreadsheets. This created friction during payroll and made it difficult to confidently verify payouts. [Image: handwritten notes / spreadsheet-style tracking (if available)]
Problems
Error-prone calculations: Manual commission rates (60% / 70%) led to mistakes.
Low transparency: Staff could not easily confirm their earnings, causing confusion and mistrust.
Time-consuming payroll: Payroll prep took hours, especially during busy periods.
Opportunity
Manual → Automated: Commission calculations should happen instantly and accurately.
Opaque → Transparent: Staff should be able to see their earnings at any time.
Slow → At-a-glance: Key business metrics should be visible immediately, without digging.
Goals
Eliminate manual commission calculations and make earnings easy to understand at a glance.
Support multiple staff members and commission rates.
Work well in a fast-paced, mobile-friendly environment.
Design Direction
I initially explored a stylized, “premium” look inspired by beauty aesthetics. This added friction for scanning data. The key realization: this tool needed utility, not a marketing feel. [Image: early UI exploration if available]
Final Design System & UI
I pivoted to an enterprise-style dashboard using Ant Design for robust data patterns. The result: clear visual hierarchy, familiar table interactions, and minimal styling with subtle branding. Tailwind CSS was used for layout tweaks and brand accent. [Image: Ant Design table + stat cards]
Core Features
Automatic commission calculation (60% / 70%) and all-time summary.
Staff earnings overview, sales log with filters, and the ability to add/edit/delete services in real time.
Information hierarchy: business health → staff breakdown → detailed records. [Image: dashboard overview]
Technical Foundation
Frontend: React + Vite | UI: Ant Design + Tailwind CSS
Backend: Supabase (PostgreSQL + Auth) | Authentication: Passwordless magic link
These choices optimized for speed, reliability, and maintainability.
My Contributions
Led end-to-end product design from problem framing to final UI
Conducted stakeholder interviews with the salon owner
Designed dashboard IA, data tables, and stat summaries
Implemented the front-end in React with Ant Design and Tailwind
Integrated Supabase backend for data storage and authentication