Product · UX

Sales Commission Hub

An in-house app that turns a clinical lab's month-end commission spreadsheets into reviewed, encrypted reports for every sales rep, prototyped and pitched to the C-suite.

Role: Product design · UX · prototyping · pitch
Timeline: 2022
Tools: Figma, interactive HTML prototype

Commission Hub dashboard showing the sales team, commission overview, active adjustments and a Generate new reports button

The ask

At a clinical lab, the CTO I reported to asked me to prototype an in-house tool for one of finance’s most painful monthly jobs: commission reporting. I designed it, built the prototype and pitched it to the CFO, CEO and the rest of the C-suite. The company name and brand are left off here; the problem is the point.

The problem

Every month, finance pulled four exports (sales, payments, which rep owns which account, and a log of changes), stitched them together by hand and emailed each rep a report. The hard part wasn’t the math. It was the exceptions: reps on leave, reps who left, new hires and accounts moving between people. Those are exactly the cases where a manual process breaks, and where a wrong number costs trust.

Research

The first brief was one-sided: a tool for whoever ran month-end. Research changed that. I sat with the sales team and interviewed reps and the sales manager, the people whose numbers were being calculated and the person keeping the overview. That surfaced a second set of needs the original brief hadn’t accounted for.

So I scoped V1 to the sales admin, with review before anything goes out and encrypted reports to each rep, and planned V2 as a fuller portal for the manager and reps. For a money workflow, getting the review step right mattered more than self-service. The sales manager also wanted to see each report as a document before it went out, so I worked with the CTO to add a review step. I met with engineering during design, not after, so the scope matched what could actually be built.

How it changed

My wireframes and Figma screens from 2022. The prototype further down is an interactive rebuild of the Figma version.

Wireframe with five separate upload buttons — **Uploads.** Five buttons, one per file, because the first scope had five inputs → the fifth turned out to be a file the tool generates itself → one checklist of the four real exports, and Generate stays locked until all four are in.

Figma overview with a single Generate new report card — **Uploads.** Five buttons, one per file, because the first scope had five inputs → the fifth turned out to be a file the tool generates itself → one checklist of the four real exports, and Generate stays locked until all four are in.

Wireframe adjustment form with raw codes like NEW_REP — **Adjustments.** Typed in per rep, after processing, in codes shaped by the Excel exports → interviews showed leave, exits and takeovers were where the numbers broke → adjustments moved up front, counted by type, and shown on each report.

Figma report viewer listing a rep's active adjustments — **Adjustments.** Typed in per rep, after processing, in codes shaped by the Excel exports → interviews showed leave, exits and takeovers were where the numbers broke → adjustments moved up front, counted by type, and shown on each report.

Wireframe going straight from uploads to processing — **Review before send.** Upload, process, done → the sales manager wanted to read each report as a document first → a report viewer, then a distribute step with recipients and an editable message.

Figma distribute screen with a recipient list and editable message — **Review before send.** Upload, process, done → the sales manager wanted to read each report as a document first → a report viewer, then a distribute step with recipients and an editable message.

The start of a design system

I built the app’s pieces in Figma as reusable components with their states: filled, text and light buttons, on/off toggles, sort and rate dropdowns, a date-range picker and the settings panel. The CTO approved them as the starting point for the company’s design system and gave me sole responsibility for it. The company downsized before I could take it further.

Figma component sets: button variants, toggles, sort and commission-rate dropdowns, a settings panel and a date-range picker — Component sets from the Figma file, each with its variants.

The flow

Sign inV1 is built for the sales admin. SSO in production.
OverviewWho's active, last month's totals, and every open adjustment, before anything runs.
UploadA four-file checklist. Generate stays locked until every file is in.
GenerateMatches payments to reps and applies adjustments automatically.
ReviewOnly the reports with exceptions are flagged, with the reason in plain words.
DistributePick recipients, edit the message, send encrypted PDFs.

Try the prototype

Open full screen ↗ · Sample data, no real names or figures.

Design decisions

Exceptions first. Adjustments sit on the overview and come back as flags at review, so the 2 reports that need a human aren’t buried among the 13 that don’t.

A checklist instead of a drop zone. Naming each file and where it comes from removes the “did I upload the right export?” question, and it blocks bad runs before they start.

Review before send. Nothing goes out until someone has looked at the flagged reports. For money, a confirmation step is worth one extra click.

Settings stay visible. The commission rate, PDF, manager CC and encryption are visible on the home screen, because finance needs to see them, not hunt for them.

Review screen: list of reps with a flagged report explaining a prorated leave of absence

Outcome

The CFO loved it, and the app was approved and scheduled to be built, with the manager and rep portal lined up as V2. Then the company downsized before development started, so it never shipped. With more time I’d test the review screen with the people who actually run month-end and add an audit log, so finance can show exactly what changed and why.

Next projectLaurel: a social layer for academic competitions →