Background & Business Needs
🧾 About the Project
Hourly’s Payroll system enables business owners to view, calculate, and run payroll effortlessly from the web. The goal was to simplify complex backend processes (compliance, payments, taxes) into an interface that’s intuitive, secure, and built for speed.
💼 Business Request
Payroll is high-stakes and time-sensitive. We needed a flow that reduced errors, clearly surfaced key details, and reassured employers as they moved thousands of dollars — all within seconds.
Field Research & Design Challenges
🧠 User Research & Challenges
Users ranged from tech-savvy HR leads to business owners with minimal digital experience.
Top concerns included:
• Not knowing what’s included in the payment.
• Fear of making irreversible mistakes.
• Needing a sense of control and visibility before money is moved.
UX Solutions
in Action
✅ UX Goals
• Make the experience feel trustworthy and calm despite the high-stakes task.
• Keep users focused and reduce distractions during critical steps.
• Prevent double actions (e.g., clicking “Run Payroll” multiple times).
• Use clear feedback at each step to reduce anxiety.
💻 Design Breakdown
Step 1: Payroll Overview (Default View)
UX Objective: Provide visibility into all payroll periods and a snapshot of employees included in the current period.
🟢 Wins:
• A calendar view with total hours allows users to spot patterns or gaps easily.
• “Current” period badge clarifies where action is needed.
• Employees are grouped and searchable — preparing for calculation.
Step 2: Trigger Calculation
UX Objective: Update payroll values (net, taxes, debit amount) based on real-time backend data.
🟢 Wins:
• Prevents premature “Pay” actions by ensuring values are up-to-date.
• Friendly loading animation keeps users informed and avoids duplicate actions.
Step 3: Review Calculated Values
UX Objective: Make sure employers understand what’s being paid and why.
🟢 Wins:
• Gross vs Net amounts shown per employee.
• Totals updated above the table.
• Direct Deposit, Overtime, and Manual indicators provide clarity.
Step 4: Confirm & Run Modal
UX Objective: Reduce friction while verifying key payment details.
🟢 Wins:
• “Receipt-style” summary gives mental confidence before proceeding.
• Pre-filled values reduce user effort but remain editable.
Step 5: Confirmation Dialog
UX Objective: Add a final step of protection before the money moves.
🟢 Wins:
• Double-checking the charge amount and account used builds trust.
• Explicit dollar confirmation reinforces decision.
Step 6: Processing Animation
UX Objective: Prevent users from navigating away while the backend completes payment.
🟢 Wins:
• Human-friendly copy (“this won’t take long”) manages expectations.
• Prevents duplicate processing.
Step 7: Success State
UX Objective: Provide a clear endpoint, show details, and allow corrections.
🟢 Wins:
• Success banner with date/time and summary builds confidence.
• Option to “Undo Payroll” adds flexibility and safety net.
• Buttons like “Sync to QuickBooks” or “Export” enable next steps.
🔄 Reflection
Designing this flow was more than just UI — it required deep collaboration with engineering, compliance, and product stakeholders.
I worked closely with engineers to ensure backend coordination didn’t compromise speed or accuracy, partnered with compliance to make sure sensitive actions (like bank transfers and tax payments) met regulatory standards, and collaborated with product to align the experience with business rules around pay cycles, off-cycle runs, and delivery options.
This project reinforced how thoughtful design, combined with strong cross-functional partnerships, can simplify high-stakes processes and build user trust.
