The Payroll App (Project 2 - Paid Time Off Requests)
At this point, the business decided to introduce the "Paid Time Off (PTO)" feature to the app, allowing employers to create or edit a time off or vacation request for an employee. The feature is tied into the complex logistics involving the type of vacation policy each business operates under. We started with a mobile first approach.
Overview
Client: ADP
Timeline: 2019-2020
As we worked in an agile environment, it was necessary to switch between projects that was dubbed "long-term" such as the complete redesign of the app (as seen on the previous page) and "short-term/urgent" projects such as the project below, which was focused on addressing issues in the current running app, and/or adding functionalities as per the user's or business' needs in a timely manner.
My Role
• Lead UX/UI designer
The Objectives
The objective was to
-
create a simple PTO flow on mobile
-
Expand to a desktop version allowing for more options
The Challenges
-
Understanding the complexity of payroll tied with vacation policies, provincial and federal legislation regarding time off and the options available to companies on how to approach and execute these policies
-
Simplifying these complexities for users with little to no payroll experience
-
Showing a significant amount of information and various screen views in an intuitive manner
-
Working with limited resources and permission for testing
Image 1.0 - Brainstorming and User Flow
Image 1.1 -User Flow for mobile
Brainstorming and User Flows
Over several brainstorming sessions with team members to determine the user flow for the Paid Time Off (PTO) requests, I created a few diagrams illustrating the necessary elements and options that needed to be included in the design.
Wireframing
I started sketching out a few ideas which led to further questions. We eventually concluded that our work would require rethinking other pages on the app as the flow involve other components such as the employee profile page, as opposed to simply adding a new page for PTO as we initially intended.
We broadened the scope slightly and started designing for other pages that would cause an impact on the PTO flow as well.
Image 3.0 - Desktop Sketches and wireframes for PTO
Image 3.1 - Sketches and wireframes for PTO
Image 3.2 - Sketches and wireframes for Employee Page and mobile
My Role
• Lead UX/UI designer
The Objectives
The objective was to
• create a simple PTO flow on mobile
• Expand to a desktop version allowing for more options
The Challenges
-
Understanding the complexity of payroll tied with vacation policies, provincial and federal legislation regarding time off and the options available to companies on how to approach and execute these policies
-
Simplifying these complexities for users with little to no payroll experience
-
Showing a significant amount of information and various screen views in an intuitive manner
-
Juggling between priorities and requests while working on multiple projects
-
Working with limited resources and permission for testing
-
Working during a pandemic for the second half of the project
My Role
• Lead UX/UI designer
The Objectives
The objective was to
• create a simple PTO flow on mobile
• Expand to a desktop version allowing for more options
The Challenges
-
Understanding the complexity of payroll tied with vacation policies, provincial and federal legislation regarding time off and the options available to companies on how to approach and execute these policies
-
Simplifying these complexities for users with little to no payroll experience
-
Showing a significant amount of information and various screen views in an intuitive manner
-
Juggling between priorities and requests while working on multiple projects
-
Working with limited resources and permission for testing
-
Working during a pandemic for the second half of the project
Design and prototyping
Below are some of the mockups and flows that I created for the team. The mockups went through several iterations based on questions and problems that arose during the prototyping phase.
We were able to have conversations with other team experts, some of whom specialized in the development of Time and Attendance programs and training of staff responsible for launching and supporting clients in said programs.
Image 4.0 - Mockups and Flows
Image 4.1 - Mockups and Flows
Designing for desktop
The desktop version allowed for a slightly different experience that would allow users additional and more complex functionality not available on mobile.
The calendar option offers an "at-a-glance" view of all employees and the time off they have requested, allowing employers to have a quick and easy understanding of everyone's availability and preventing overlaps. The limited space on mobile would limit this option and potentially make it more confusing for users.
Image 5.0 - Desktop version
Image 5.1 - Desktop version
Final Prototype
Video 1.1 - Final Desktop Prototype
Video 1.0 - Final Mobile Prototype
Conclusion
Working on this project was a valuable and highly educational experience. The team and director I reported to were always receptive to ideas and eager to contribute to making the app better for users, as well as the business. Communication was key and flowed naturally. I was pleasantly surprised by how eager everyone at ADP is to help, even if they were not directly involved with my team or project. By far, the work environment and collaboration at ADP is one of the most positive experiences I have had in the workplace.
I believed diving head first into the payroll world would be daunting, but soon realised that with the right support and motivation, it became one of the most fun challenges I had the opportunity to tackle.
Testing and Results
The prototype was tested among stakeholders and ADP employees. The flow and design was approved. The project was then placed on temporary hiatus due to COVID 19.
Inspiration and Moodboard
I researched relevant products and interesting flows and UI that could inspire the approach we could take for PTO.
I grouped my research and created a mood board which was extremely useful when it came to sharing ideas. It allowed me to make sure everyone was on the same page before I started designing.
Image 2.0 - Mood Board for Mobile
Image 2.1 - Mood Board for Desktop