Early in the planning of the new Human Resources module, we 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 we 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, we 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.
When developing the design system for HR, we looked at the palette used in our marketing website and advertising material. The colours were fresh, fun, and visualized our brand voice and the personalities of the people working at the company. Where the previous design felt claustrophobic and overwhelming, we embraced white space in the new design which we felt would help clients better digest the information. At launch, Payworks UI had roughly two dozen pages of components and variants.
As we continued to develop the design system, we tested it in existing parts of application and began building out the new HR module using the new components.
- 1 We 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, we 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, we ultimately settled on a design and began moving forward on development. Through tests with our early adopters, we 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.
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.
Building off the foundation of our design system and the principals we put in place during our work on HR, we turned attention to the client portal. As the first page clients see when logging into the application, we understood the importance of it functionally and aesthetically. We 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 into the process, we 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.
Using the standards established during our work on Payworks UI, we 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, we 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 whitespace, use more imagery and let the colour of those images pop.
- 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 also noted that they were better made aware of legislative changes, product releases, and more because of the posts by the marketing and product departments.