Introduction
After reviewing the challenge, I decided to focus on the employee PTO request flow. I believe setting the employee up for success will help Paylocity meet the goals stated in the challenge by:
- Helping the employee enter accurate data for their request, making approvals easier.
- Providing information in context to their flow such as remaining PTO balance. Helping mitigate issues like requesting a week's vacation when the employee only has 16 hours of PTO left for the year.
- Acknowledge that HR is a complex process and this tool should facilitate and support. Not dictate or decide.
Below I have outlined my solution and my process for solving this design challenge. If you are pressed for time, you can open the final prototype in a new window.
Research
I was able to have discussions with friends and family about the processes they use to request PTO. People are generally unhappy with their system, and had no problem telling me how much they don't like it.
I was also able to reference existing systems via screenshots, in person demonstrations, and my current employer's PTO approval system.
Based on my limited sample set, something I noted was how many different solutions were employed to solve the same problem. And within those solutions the interaction patterns and flows used were unique and different than most users experience in their day to day experience on the web.
Object Model
To help understand the objects, relationship and flow within the system I did some object modeling. This process helps me worry more about the makeup of the application and less about layout and interaction patterns.
Starting out I built a simple object inventory with the goal of identifying major objects, what objects are nested with other objects and potential actions (CTAs) that can be taken on them.
With these objects, I began to build a flow for the screens. I'm a large proponent of epicenter design, (starting from the inside of the problem and working my way out) and started with the Create/Edit PTO Request screen. Once I had that, I was able to explore permutations of that screen based on the status of the request & what information was important for the employee on their dashboard. Finally, I linked the screens together and added any potential messaging & notifications that were needed.
During this exercise, I started to come to the realization that by displaying:
- Employee's PTO balance
- Potential conflicts with customized rules and restrictions specific to the company
Employees will be more aware of the likelihood of their request being approved by their manager. This might help them identify when they need to have a discussion with their manager before submitting a request. This would make employees more proactive and give managers an avenue to explaining processes and rules around PTO that might be unique to that specific company.
EXPLORATION & ITERATION
Using the object model and flow, I began sketching potential solutions to the employee request process. Some things I considered while sketching:
- The ability for the design to work on mobile
- Identifying patterns from other sites/apps/systems that users may be accustomed to already
I use sketching to help me explore multiple concepts and iterate on them quickly. I'm a huge fan of pen and paper, but in most cases I use my iPad and a program called Procreate to help me speed up my process and easily export and share. You can see some of my sketches below:
Because we're dealing with dates & times, I took inspiration from discount travel sites like hotels.com and hotwire.com. My hypothesis is that the paradigms used for booking a car or hotel might help users become familiar with the new PTO system. I continued to explore and validate my direction by quickly sketching out the UI and putting it in an InVision prototype.
You can explore the prototype below or open it in a new tab.
PROTOTYPE
Using my sketches as wireframes I began to put together the prototype in Sketch & InVision. For a baseline visual direction, I referenced my self-service portal on Paylocity. Before you explore the prototype, I would like to highlight some features from the solution:
As the employee is filling out the form, they are shown their remaining PTO balance for the year. When they update their request, the visual will update to reflect the impact to their remaining balance.
As mentioned earlier, I tried to help users feel more comfortable with the system by leveraging an established interaction pattern for date and time entry.
Right now, the system is assuming the user wants the entirety of the day selected off, allowing them to edit if needed. However, this is something I would like to test and get user feedback on after the solution is released in the wild.
The button below will take you to the prototype in InVision. In this scenario, you are an employee who:
- Is requesting PTO
- Needs to take off 5/5/18 at 8:00 AM through 5/9/18 at 12:00 PM
- Doesn't need anybody notified other than their team lead and manager