Case study: UX design voor payrollplatform Preceda

Streamlined payroll and reduced errors by payroll staff

UI/UX

SaaS

Prototyping

Introduction

Between 2018 and 2020, I worked full-time as a UI/UX designer at Ascender HCM (now Dayforce), an Asia-Pacific company offering B2B SaaS solutions, including HR and payroll systems.

During this period, I collaborated with the product team, engineering, and QA to improve the Preceda payroll system.

Needs, requirements, and challenges

In my role as a UI/UX designer, I was responsible for improving the platform’s user interface, user experience, and overall usability.

The key wishes and requirements were:

• UI optimalisation: Improving the overall look and feel of the frameworks, screens, elements, and content.

• UX optimalisation: Applying UX techniques to thoroughly understand current processes and implement improvements.

• Pay run: Creating an intuitive payroll run to streamline the process, make it faster, and reduce mistakes.

• Health Check-screen: Creating a screen that provides an overview of incorrect data, missing fields, or invalid combinations.

Mark's experience

Niels helped bring a good UX perspective our Product. Before Niels joined, our product looked like it was built by a bunch of engineers.

The process at a glance

Weergave van een persona genaamd Kathy met bijbehorende gegevens zoals bio, kernbehoeften en frustraties. — Based on the experience of the product analyst team and input from the HRO department, we developed a persona to guide the development of a new payroll process.

Document met interviewvragen voor gebruikersonderzoek, weergegeven in een screenshot — During the ideation phase, I applied several techniques to gather insights, including interviews, surveys, conversations, and messages, in order to gain a comprehensive understanding of user needs.

Screenshot van een Excel-sheet met invoerdata voor het Health Check-scherm. — In addition to designing the front end, I was also involved with the back-end integration. For example, I considered the wording of all possible feedback messages and their association with different icons, such as a green checkmark, an error message, or a warning.

Een handgetekende schets van het Health Check-scherm tijdens de ontwerpfase. — I frequently created rapid sketches to verify designs in the early stages. Shown here is a low-fidelity version of the Health Check screen.

Screenshot van een mid-fidelity prototype van het payrun-statusscherm. — Alongside interface design, I developed interactive prototypes at different fidelities to demonstrate the workflow, testing them with team members and sometimes with actual users to collect feedback.

Final result

Screenshot van de Health Check-pagina met een overzicht van onjuiste gegevens, ontbrekende velden en ongeldige combinaties. — This is the final version of the Health Check screen, displaying incorrect data, incomplete fields, and invalid combinations.

Prototype van een employee dashboard met kerninformatie en statusoverzichten. — I regularly created interactive prototypes to present them with my manager to the management team, promoting specific parts of the roadmap, such as an employee dashboard.

Reflection

Direct validation

In the early months, I often waited too long to seek feedback, causing me to spend excessive time on designs or details that later turned out to be unnecessary

Complexity

The Preceda platform was a complex ecosystem of users, functionalities, and interconnected screens. As a junior UX designer, I found it challenging to bring structure and clarity to this complexity.

A dedicated team member

Working with colleagues and users went smoothly due to professional and easy-going communication. Many valued my commitment, positivity, and eye for detail.

Refresh your website or app with a creative upgrade!

Schedule a free 30-minute discovery call and find out: