Company Workskuad (Goodtalent Corp)
Role Product Designer
Timeline 8 months (2023–2024)
Platform Web App
Status Shipped
HR Tech Fintech

Workskuad Payroll

Streamlining HR Operations for Modern Businesses.

Workskuad Payroll platform screens
Team & Ownership
Team 1 Product Manager, 2 Frontend Engineers, 1 Backend Engineer, 1 Product Designer (me)
What I Owned Full design ownership — research, page structure and navigation, visual design, reusable components, quality reviews, and data analysis for the Variable Pay feature
What PM Owned Product requirements, stakeholder communication, launch planning, prioritising what to build next
Key Collaboration Worked directly with the backend engineer on payment system limitations, and with customer success to analyse patterns in support requests
The Challenge

Small and medium businesses face complex payroll management tasks, consuming valuable time with manual calculations, currency conversions, and limited transparency in salary information and financial services for employees.

The Solution

A comprehensive payroll management system that streamlines operations through automated salary calculations, flexible payment options, and integrated employee financial services—all wrapped in an intuitive, user-friendly interface.

Problems Solved
  1. Time-Consuming Manual Payroll Processing
    • Businesses spend hours manually calculating salaries, deductions, and bonuses
    • High risk of human error in calculations
  2. Complex Multi-Currency & Payment Management
    • Difficulty handling payroll across different currencies and payment methods
    • Limited flexibility in payment scheduling and processing
  3. Poor Employee Financial Transparency
    • Limited access to salary information and payment history
    • No integrated financial services for advances or benefits
  4. Inefficient Payroll Setup & Management
    • Complex setup process for new payroll cycles
    • Challenges in tracking payroll status and payment details
Process & Solutions

1. Intuitive Payroll Dashboard
Problem: Payroll managers needed a quick overview of key metrics and recent activities.
Solution: Created a comprehensive dashboard with clear visual hierarchy and actionable insights.
Key Features: At-a-Glance Metrics (current employee count, salary totals, key statistics), Recent Activity Tracking (latest payroll runs with details), Visual Payment Summary (bar charts showing salary trends), Quick Actions (easy access to create new payroll).
Design Decisions: Used card-based layout for scannable information blocks, color-coded payment status (processed, pending, failed), and prominent CTAs.

Employer Dashboard — At-a-glance metrics and recent payroll activity.

2. Streamlined Payroll Setup Process
Problem: Setting up new payroll cycles was complex and error-prone.
Solution: Designed a step-by-step payroll creation flow with clear validation and preview.
Key Innovations: Flexible Configuration (support for multiple currencies, custom items), Employee Selection (bulk selection with individual customization), Real-time Calculations (instant preview of totals), Validation System (built-in error checking).
User Flow Highlights: Guided setup with progress indicators, ability to save drafts, clear summary before final processing.

3. Comprehensive Payroll Management Interface
Problem: Tracking and managing ongoing payroll processes lacked visibility and control.
Solution: Built a detailed payroll management system with multiple views and batch operations.
Features: Tabular Overview (sortable, filterable employee list), Batch Operations (process multiple payments), Individual Employee Management (detailed view with salary history), Status Tracking (clear indicators).
Design Approach: Clean table design with appropriate information density, consistent iconography, smart defaults with customization options.

4. Employee Financial Services Integration
Problem: Employees needed access to salary information and financial services.
Solution: Created an employee-facing dashboard with transparent salary information and integrated services.
Key Features: Salary Transparency (clear breakdown of payments), Integrated Wallet (access to advances and withdrawals), Transaction History, Service Integration (insurance, data purchases, benefits).

Design System

Navigation & Structure
Set up role-based navigation for administrators and employees, grouped related payroll functions together logically, and revealed advanced features only when users needed them.

Visual Design Principles
Took a data-first approach with clear text hierarchy for financial information. Used a consistent colour system to communicate status at a glance. Created scannable layouts with thoughtful spacing and alignment.

Reusable Components
Built consistent form patterns for all data entry. Designed smart tables with filtering and sorting. Used focused pop-up workflows to keep users in context while completing tasks.

Results & Impact

Process Improvements: Automated calculations cut hours from each payroll cycle, real-time validation eliminated common errors, and multi-currency support provided flexibility for diverse needs.

User Experience Gains: Streamlined workflows sped up administrator tasks, clear salary information with easy financial services access improved employee satisfaction, and visual feedback prevented common mistakes.

Business Value: Operational cost savings through less manual work and fewer errors. System scales smoothly with business expansion. Automated records simplified audits and compliance.

Variable Pay Feature

A proactive problem-solving mini case study

The Problem I Spotted
While analyzing support tickets, I found that 60% of customer complaints were related to the complexity of processing bonuses and one-time payments. Users were creating separate payroll runs for single bonuses, resulting in inefficient processes taking 45+ minutes, a 23% error rate, and lost audit trails as users reverted to manual bank transfers.

My Proactive Solution
"Designed without permission because users were struggling"
I identified two distinct use cases that needed different pathways: Bulk Processing (CSV upload) and Individual Setup (quick search-and-add).

Design Features:

  • Flexible Input Methods: Search/add employees individually, bulk CSV upload with progress tracking, and template downloads.
  • Smart Defaults: Defaulted to "% of salary" for bonuses, fixed amount options available.
  • Batch Operations: "Set for all" functionality and individual overrides.
  • Clear Preview System: Real-time calculation display and employee-by-employee breakdown before processing.

Measured Impact:

  • Average time to process bonuses dropped from 45 minutes to 5 minutes
  • Support tickets related to bonus errors decreased by 85%
  • 92% of active employers used the new feature within the first month
  • 100% automated audit trail for compliance
Method

Processing time measured from usage records across 38 payroll runs from 14 active employers. Baseline: 8 weeks before launch (avg 43 min). After launch: first 8 weeks (avg 4.7 min). Support request count from Freshdesk, filtered to "bonus" and "variable pay" categories. Adoption rate from product usage data — unique employers who completed at least one variable pay run within 30 days of the feature going live.

Why I Did This:
By proactively identifying and solving this pain point rather than waiting for requirements, I saved the operations team hundreds of hours in support time and improved the core value proposition of the payroll product.

Key Takeaways:
Proactively spotting problems through data analysis revealed distinct user needs. Using smart defaults reduced the effort users needed to put in, while a clear preview system helped prevent costly errors.

What I Got Wrong
⚠ Honest reflection

I initially over-designed the setup flow. My first version of the payroll creation wizard had 8 steps with granular control over every deduction and bonus type. During internal testing, our PM pointed out that 70% of employers just needed the defaults — they didn't want to configure tax breakdowns manually. I cut the flow to 4 essential steps with an "Advanced" toggle for power users. This reduced setup abandonment from ~35% to under 10%.

I underestimated how important failed payment states would be. My initial designs focused heavily on the success scenario — a smooth payroll run. But in the first two weeks after soft launch, 1 in 5 payment batches had at least one failed transaction (wrong bank details, insufficient funds, network issues). I had to quickly design a screen that let admins retry, skip, or manually fix individual payments without reprocessing the entire batch. This became one of the most-used screens.

The engineering team rejected my first draft of the employee wallet. I proposed a full financial dashboard with spending insights, but our backend engineer flagged that the payment provider didn't support live balance updates — only end-of-day snapshots. I redesigned around this limitation, showing "last updated" timestamps and focusing on transaction history instead of live balances. The simpler version actually tested better with employees.

Edge Cases & System Risks

Payroll is serious work, so I designed for several high-risk scenarios:

  • Failed payments: A retry system that tracks the status for each person. Admins can fix individual failures without redoing the whole payroll. It clearly shows the difference between a temporary problem (like a slow connection) and a permanent one (like a wrong account number).
  • Access control: I separated permissions so that payroll admins can send money, but HR managers can only view details. Extra approvals are required for large payments.
  • Compliance & record-keeping: Every action is saved with the name of the person who did it, the time it happened, and what changed. Reports can be exported for tax needs, and tax templates are kept updated for each area.
  • Payment matching: A month-end view that compares what we planned to pay versus what actually went out, with automatic alerts for any differences over 2%.
  • Handling exceptions: I designed specific steps for things like employees leaving halfway through the month or mid-month salary changes, making sure the system doesn't accidentally pay anyone twice.
After Launch

The product shipped to production in Q2 2024 and has been processing live payroll since. Key post-launch observations:

  • The payment matching view became a power-user feature — finance teams at larger clients requested bulk export and filtering by department, which we added in a follow-up update.
  • Variable Pay drove stronger engagement — employers who used Variable Pay were 2.3× more active each month compared to those who only used standard payroll.
  • Employee-side adoption lagged initially — we discovered through support tickets that employees didn't know the dashboard existed. Adding an email notification with a direct link on first payslip increased employee logins by 60% within two weeks.
  • We're still iterating — current roadmap includes automated tax filing integration and multi-entity payroll for companies with subsidiaries.
Key Insights
  1. Financial Data Requires Extra Clarity: Consistent formatting and clear labels ensure accuracy.
  2. Flexibility vs. Simplicity Balance: Powerful features behind an intuitive interface.
  3. Status Communication is Critical: Clear indicators reduce user uncertainty.
  4. Progressive Complexity: Basic features first, advanced options revealed gradually.
Technical Details
  • Real-time Calculations: Instant feedback on payroll changes
  • Multi-currency Support: Seamless currency conversion and formatting
  • Batch Processing: Efficient handling of large employee groups
  • Data Security: Robust protection for sensitive financial data