Employee Commission Tracker

Manual commission tracking was costing a salon owner time and trust. I designed and built a dashboard that automates commission calculations, eliminates payroll errors, and gives both owner and staff clear visibility into earnings without changing their workflow.

Project details

Client

Kimmys beauty bar

Year

2025-2026

My Role

Product designer & Front-End Developer

Platforms

Desktop & Mobile

Problems

Error-prone calculations: Manual commission rates 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

ContactSalon Chat

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

Manual & Error-Prone Commission Splits: The salon operated on custom commission splits (ranging from 60% to 70% based on staff seniority and service type). Calculating these manually for every transaction was highly susceptible to human error, resulting in frequent payroll corrections.

Lack of Transparency & Trust: Staff members had no direct way to track their daily earnings or verify their commission payouts in real time. They had to wait for the bi-weekly paycheck, which bred anxiety, confusion, and occasionally mistrust between the team and the owner.

Inefficient Payroll Operations: The salon owner spent hours every Sunday compiling sales receipts, cross-referencing staff assignments, and calculating payouts. During peak seasons, this administrative bottleneck took away precious time from running the business.

Opportunity

Manual → Automated: Shift from manual math to instant, real-time commission calculations as soon as a service is checked out.

Opaque → Transparent: Provide staff members with secure self-service access to view their daily, weekly, and historical earnings details.

Slow → At-a-glance: Furnish the salon owner with an immediate bird’s-eye view of total business health and individual performance metrics.

Goals

Automate Calculations: Eradicate math errors by calculating commission splits instantly upon logging a transaction.

Build Transparency: Provide staff with a real-time self-service dashboard to view their earnings, sales history, and daily totals.

Minimize Admin Overhead: Reduce weekly payroll preparation from hours of manual spreadsheets to a simple, one-click export process.

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: Built with React and Vite for a fast, responsive user interface. Ant Design and Tailwind CSS were used to create a clean, dense, and professional data-focused UI.

Backend: Powered by Supabase for secure authentication (passwordless magic link) and PostgreSQL database storage, ensuring robust data integrity and real-time updates.

Optimization: These technology choices optimized for rapid development speed, high operational reliability, and simple, low-cost maintenance.

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

Results

Manual commission errors eliminated. Payroll prep reduced from hours to minutes.

Increased staff trust through transparent earnings visibility.

“I used to dread doing payroll. Now I can see exactly what everyone earned in seconds.” — Kimmy, Salon Owner

Key Learnings

Data Clarity Over Novelty: In business-critical tools, staff and owners value clean, unambiguous data representation over experimental visuals. Data density and readability must always take precedence.

Familiar Patterns Build Trust: Utilizing standard, well-established dashboard layouts and data tables helped salon staff adopt the tool instantly without training.

Continuous User Feedback: Shipping a functional MVP early and iterating based on the salon owner’s real-world usage was far more valuable than trying to perfect features in isolation.

What’s Next

Performance analytics and charts over time.

Export to accounting software.

Progressive Web App for mobile-first use.

Let’s Chat

I’m currently seeking UX / Product Design opportunities and would love to connect.