Skip to content

Run Payroll Flow

A monitor on a deep navy backdrop showing the payroll confirm-and-run screen with its summary panel.

Redesigning a high-stakes financial workflow so business owners can review, calculate, and run payroll with confidence. In minutes.

About Hourly

Hourly is a workforce management and payroll platform for SMBs with hourly workers. Payroll is the highest-stakes action in the product. Business owners are committing significant funds and need accuracy, clarity, and confidence before they submit.

Role
Director of UX · Strategy & Execution
Timeline
2023
Location
Remote

Redesigning a high-stakes financial workflow so business owners can review, calculate, and run payroll with confidence. In minutes.

The Problem

The existing payroll experience created friction and uncertainty at the worst possible moment. Users didn’t know what was included in the payment, feared making irreversible mistakes, and had no clear visibility into what was happening between calculation and submission. The result was anxiety, errors, and support tickets on the most time-sensitive action in the product.

Users ranged from tech-savvy HR leads to business owners with minimal digital experience. Top concerns from research: not knowing what’s included in the payment, fear of making irreversible mistakes, and needing a sense of control before money moves. The existing flow provided none of these.

Flow diagram of the original payroll run, each step flagged with a problem: calculation with no visibility into what is included, a review screen where the numbers are unclear, and a submit with no confirmation.

The Thinking

High-stakes financial workflows fail when users can’t tell what’s about to happen or confirm that it did. That was the core insight. Each step needed to do one job and signal clearly that the job was done before unlocking the next. I partnered with engineering and compliance early to map every technical constraint and regulatory requirement into the interaction design, rather than treating them as handoff problems to solve later.

Before and after comparison of the payroll run. After adds an overview and summary up front, reviewable calculated values, a confirm and run modal, and a processing state that ends in explicit success.

The Solution

An intuitive guided flow: payroll overview, trigger calculation, review calculated values, confirm and run modal, confirmation dialog, processing animation, success state. Each step was designed to eliminate a specific anxiety. Duplicate submissions, unclear amounts, accidental triggers, and uncertainty about whether money actually moved.

The payroll dashboard listing pay periods down the left with their amounts and paid status, beside an employee table showing hours and net amounts.

The Confirm and run modal: delivery option, shipping address, payment method and pay date on the left, with a summary panel showing the debit date and a total of 1,664.05 dollars next to a Run Payroll button.

The processing state, showing a spinner and a Processing Payroll message over the dimmed payroll table so the run is never ambiguous.

Impact

Payroll errors and duplicate submissions dropped to zero after launch. Support tickets related to payroll confusion decreased significantly. The flow became the most-cited feature in customer retention conversations. Business owners described it as “the reason we stay.”

The result handled complex backend processes, pay cycles, off-cycle runs, tax payments, and bank transfers, while feeling simple to the person running it. That gap between backend complexity and front-end clarity was the whole design problem.

Reflections

Designing this flow taught me that interaction design for high-stakes workflows is inseparable from the engineering and compliance constraints underneath. The best decisions came from bringing those teams into design reviews early, not at handoff.

I’d also invest more in error and edge-case states from the start. We prioritized the happy path in early iterations and retrofitted edge cases later. That created rework. For financially critical flows, the edge cases are the product.

More work this way