The Payroll App (Project 1 - Interface Redesign)
ADP decided to launch a simpler mobile friendly version of this application for small business owners who have little to no experience in payroll but would prefer to take care of it themselves as opposed to hiring a payroll professional. This gave birth to WFN OTG (Workforce Now On The Go).
Overview
Client: ADP
Timeline: 2019-2020
WFN (Workforce Now) is the primary payroll application that ADP uses to administer payroll for their clients. It is quite an intensive and complex application, only available on desktop, used by payroll professionals.
My Role
• Lead UX/UI designer
I was brought in a couple of years after the launch of the app to help with several problems that the team had encountered. As the sole designer on the team, I was tasked to work on the app in several phases to help
-
improve usability in certain areas of the app
-
add new functionality as demand for new features increased
-
redesign the interface to reflect the new ADP branding.
The Objectives
The objective was to
-
simplify the process of administering payroll for small business owners
-
Optimize the app for mobile usage
-
Improve usability
-
Re-adapting the marketing branding to create a style-guide suitable for the app
The Challenges
-
Reframing existing ideas of how the UI should look, based on a user approach and research as opposed to what is deemed appropriate for a payroll company
-
Working on several areas and aspects of the product with different priorities/deliverables
-
Advocating for change and pushing the importance of a well-executed UI
-
Familiarizing myself with and learning about the payroll world
-
Keeping the company values evident through the UI and app design
Process
I started off by doing some comparative analysis, not only with other related apps but also with popular user centric products such as fitness and banking apps.
Next, I had a brainstorming session with other members of the team to outline the necessary steps in the user flow.
I analysed the current application and gathered user feedback from employees that work directly with users, as well as user reviews to determine where the problem areas were.
I had a few conversations with marketing and branding teams to understand the how and why behind the new branding.
1
2
3
4
Image 1.0 - Working out the User Flow
Project 1 - The Redesign
One of my tasks as the UI/UX designer was to redesign the interface of the application to
• adapt to the company's new branding
• modernize the interface to adhere to current trends
• create a fresh and appealing interface to provide a better customer experience
The goal was to create a modern and simple UI to take away from the daunting experience of learning how to administer payroll. I wanted to create plenty of breathing space through light colours and white backgrounds, in contrast with the company's core colours and adding an element of fun with the pink highlights.
Image 2.0 - Style Guide
Image 3.0 - Mobile - Example of time cards on Employee Page
Image 4.0 - Mobile - Before and After Comparison
Image 4.1 - Desktop - Before and After Comparison
I created design elements and components, paying attention to details such as micro interactions and transitions which I believed gave a refined edge to modern interfaces.
Style Guide and UI
I started working on a Style Guide based on the new branding guidelines and referencing stakeholder interviews as well as the current application.
Comparative Analysis and Solutions
Below is a comparison between the original and the new version.
-
Colours and font were updated based on the style guide.
-
One of the original negative feedback was that the interface was "old-school".
I therefore removed drop shadows and added breathing room around UI components.
I also played with high contrast colours with white as the dominant background colour.
-
To tackle one of the UX obstacles, I added a dropdown on the top right corner to allow users with multiple business to switch between their business accounts
Image 3.1 - Desktop - Example of time cards on Employee Page
Image 3.1 - Desktop - Example of time cards on Employee Page
Final Product
Video 1.1 - Final Protoytpe for Mobile
Video 1.0 - Final Prototype for Desktop
Conclusion
Working on the UI re-design was a refreshing experience. It was very satisfying to be able to compare the original application to current trends and understand where the app was lacking against competitors as well as expectations.
I understood through this exercise, the importance of UI in the UX world. UI is part of the User Experience and a well executed design brings reassurance and trust in users as they recognise the expertise, care and resources that went behind the process of creating an enjoyable and well designed interface.
Testing and Results
The initial redesign was tested, on a primary level, amongst stakeholders and employees at ADP. The response to the new UI was favourable and encouraging. People seemed please with the "modern colours" and "clean look".
Unfortunately, further testing among users was interrupted due to COVID-19 and the project was placed on temporary hiatus.