Human Resources Module, Design System, Client Portal

I was initially hired by Payworks to redesign the existing Human Resources module of the application, which was outdated and facing increased pressure from other, more modern offerings. During this process, it became clear that I needed to develop a design system that could be used by the incoming designers and our developers to ensure a consistent customer experience.

I redesigned the customer-facing portal which, much like the HR module, hadn't seen any major update since the software launched in the early 2000s. With updates to our HR, Employee Time, and Absence Management tools, I wanted the new portal to be tightly integrated and help customers quickly get the information they needed.


Payworks provides workforce management tools to over 25,000 businesses across Canada.




Wireframing, interface design, prototyping, information architecture, icon design

Human Resources Module and Design System

Early in the planning of the new Human Resources module, I noted several areas where the existing solution failed to provide a good experience. These issues often required clients to contact their customer service representative for help.

  • In general, it looked outdated with a dense UI full of buttons and tables with minimal styling. Existing clients had become accustom to it but I suspected new clients wanted an HR solution with a modern look.
  • New fields had been added to the existing HR module throughout the years and placed haphazardly wherever space was available. This created an illogical flow where clients couldn't locate the information they needed.
  • Looking at existing components in updated parts of the application, I found that developers had been building multiple versions of the same component or designing new ones themselves, leading to an inconsistent and confusing UI.
  • There were multiple buttons on a single page that, at first glance, were used for the same action. For example, one of the more confusing pages for clients had three different buttons to save.

Sample of Payworks UI (2017)

When developing the design system for HR, I looked at the palette used in our marketing website and advertising material. The colours were fresh, fun, and visualized our brand voice. While the previous design felt claustrophobic and overwhelming, we embraced white space in the new design to reduce cognitive load and help clients better navigate the page.

  • 1 I created a dedicated section for tombstone information to quickly identify the employee such as their name, status, employee number.
  • 2 Information that would appear on an employee's information page was reorganized and separated by tab to improve navigation and give us the flexibility to add more later.
  • 3 Previously, information pages were editable at all times. In the new version, I added separate states for viewing and editing. This was to avoid accidental changes that customers were making.
  • 4 To assist with page length, information was placed into collapsable sections.

Through refinement of the design system and our concepts for the HR module, I ultimately settled on a design and began moving forward on development. Through tests with our early adopters, I made several changes to our early designs such as adding a second level of navigation, simplifying the header information, and darkening some colours to increasing the contrast and make things easier to read.

High fidelity version of the HR module (2018)

Navigating through the employee list (2018)

Editing an employee's information (2018)


During the launch of the initial pieces of the HR experience, we saw a temporary increase in support calls as longtime clients found the changes jarring. The vast majority of our clients were able to adjust quickly to the changes. Sales for the HR module increased as our sales team expressed how much easier demos to potential clients were. Newly onboarded clients responded very positively to the HR module.

Client Portal

Building off the foundation of our design system and the principals I put in place during the work on HR, I turned attention to the client portal. As the first page clients see when logging into the application, I understood the importance of it functionally and aesthetically. I noted the following issues with the current design based on feedback from clients and customer service representatives:

  • The information on the page felt static and rarely changed, despite all our activity in and around the company such as updates we'd been making to the application, social media posts, and marketing website.
  • The overall design had remained largely untouched for over a decade and needed to be modernized to better match the work we'd been doing on HR.
  • Heat maps and analytics showed that clients had developed muscle memory of where to click immediately after logged in, taking them off the portal page. By doing this, they missed important updates including upcoming payroll dates, scheduled maintenance times, etc. and then called in when those dates arrived, unaware that they had been announced.

Early explorations for the portal (2017)

Early into the process, I made the decision to go with a card-based layout for a couple reasons. Firstly, it would accommodate frequent changes, help us swap information in and out from different departments seamlessly, and translate well to mobile. Secondarily, our Employee Self-Service product had already adopted a similar approach and found success.

New card components created in Payworks UI for the portal (2018)

Using the standards established during our work on Payworks UI, I expanded the design system with a number of new card components for use on the portal. With page concepts developed and card components taking shape, I set some goals as we moved forward:

  • Improve the usability and the leverage data from newly updated parts of the Payworks application such as the HR and Time Management modules.
  • Make it smart by having the visible cards change based on the logged in user's permissions or display recommendation cards based on the products customers did or didn't have activated.
  • Establish a team of editors from our marketing and product teams to keep the cards updated with the latest information in those departments.
  • Bring forward the modern look we'd established in the HR module. Embrace white space, use more imagery, and let the colour of those images pop.

High fidelity designs for the portal (2018)

  • 1 The Your Day card showed a snapshot of a client's day and allowed them to quickly perform actions without leaving the portal. This was powered by the data made available through the Time Management and HR modules.
  • 2 We used frequently asked questions from clients by email or phone to power the Q&A card and ensure other clients experiencing similar issues could quickly find the answer to their question without having to call in.
  • 3 The Recent Pages card showed a list the pages a client visited most often. This was to help clients who had become reliant on the portal to navigate to the pages they used daily.
  • 4 The Company Bulletins card showed a list of internal posts and updates from Payworks to keep clients aware of any work related events.

Following the launch, clients remarked that they enjoyed the new design and wanted to purchase other modules that integrated into the portal, such as Analytics, and Time Management. They noted that they were better made aware of legislative changes, product releases, etc because of posts by the marketing and product departments.