Introduction
Background
Hubert Construction had an inefficient process for submitting employee work hours to payroll. Employees would first use Google Sheets to enter the number of hours they spent working on each project they were assigned to for each day of the pay period. The document would then be printed, signed for approval, and scanned. After scanning it back onto the computer, the company's Controller would then individually enter each person's hours into an accounting software to be sent to payroll.
The company wanted a way to make this process smoother for both employees and the Controller. They felt an app would be convenient for everyone to use, so I designed an app where:
-
1. Employees can log their work hours and request PTO
2. Everyone's work hours can be approved and submitted to payroll
Main goals:
• Decrease time spent logging and submitting work hours
• Make it more convenient to log work hours and request PTO
Timeline
4 weeks at 20 hours/week
My role
End-to-end UX researcher and UX/UI designer
Note
This project was done as a capstone project for my UX design bootcamp with DesignLab. I did work with Hubert Construction to design this app, but it will not be developed.
Research
In order to create a better solution for the company, I decided to start by getting an understanding of their current system for logging and submitting work hours.
Interview with company President
I first spoke with the President of the company to understand what the company wanted out of the app.
The main goals the company had for the app included:
• A quicker and more convenient way for employees to log their work hours
• Ability for employees to request PTO and log work hours in the same place
• A more efficient way to approve employee hours and submit to payroll
Specific features the company wanted included:
• Logging work hours for the 2-week pay period as a whole instead of logging each individual day
• Having approved PTO show up when entering work hours
• Ability to add PTO when entering hours even if it wasn't pre-approved
• Request PTO as either a half day or full day
• Ability to approve employee hours or send a message if changes are needed
• Send hours to payroll
Because each employee logs their work hours for each individual project, not as a whole, I also asked him about the typical number of projects a person works on at once, and how people typically split their time between projects. This information was helpful in coming up with the most efficient design. Since I received this information from the President, I did not need to interview individual employees.
Interview with company Controller
After hearing that the Controller is the person who submits everyone's hours to payroll, I wanted to speak with her to understand what the process entails.
Her main frustrations included:
• Having to print everyone's time sheets and then scan them after being signed for approval
• Manually entering everyone's hours into the accounting system
• Filling out some people's time sheets for them, as some people have difficulty with Google Sheets
I also asked her what exact information is sent to payroll, so I could then create a functional design.
Define
Persona to visualize and describe users
I used the information gained from my interviews to create a persona representing most of the people who would be using the app. This allowed me to better meet their needs by having a reference point describing their goals and frustrations.
Business and user goals to meet everyone's needs
I created a diagram displaying the main goals for both Hubert Construction and its employees. Having this diagram helped me stay on track and ensure I would be designing with both parties in mind.
Task flow to define main process
Once I had done my research and laid out the main project goals, I was ready to start thinking about how to design the app. I created task flows for the two main tasks of entering work hours and requesting PTO.
User flow to visualize user paths and decisions
After finishing the task flow, I expanded upon it to include the different paths a user can take based on decisions and conditions set. This helped ensure that the app flow made sense and accounted for everything it needed to.
Sitemap to display app organization
As the last part of the define stage, I created a sitemap to lay out the app's organization. After creating the sitemap, I had everything I needed to start designing.
Design
Wireframes to lay out page organization and look
I started the design process by creating wireframes. I first wrote down what I wanted to include on each screen and then sketched my initial ideas on paper. I discussed my preliminary ideas with Hubert Construction's President to make sure I was delivering their vision, and then moved to Figma to build my wireframes.
Test
Usability testing to ensure app is easy to use
Before moving on to design the user interface, I conducted a round of usability testing in case any major changes needed to be made. I tested my wireframe prototype on Hubert Construction office employees.
-
The app had minimal issues from testing. Participants said it was straightforward and easy to use.
-
However, participants had issues with the calendar on the first screen for selecting projects. This screen included a calendar for people to reference as a way to visualize the 2-week period and remember what they worked on. This calendar was not made to be clickable, but the test participants tried tapping on the different calendar dates to select them. I solved this problem by having the calendar default to hidden unless the user wants to view it.
One participant mentioned that dividing time between projects in terms of percentages may be confusing for some people. I also received this same piece of feedback from someone else, so I talked to Hubert Construction's President to see what he thought about changing it, since he was the one who originally suggested using percentages. After discussing it, he agreed to change it to entering the number of hours.
Design
User interface design for pleasant experience
After conducting usability testing, I implemented the changes mentioned above. I started the UI design process by determining the colors and typography to be used, and obtaining the company's logo. I was pointed to the company's website to get their branding elements from. Their website uses red and gray as seen in the logo, as well as a teal color. I used these colors along with the Raleway font that is used on their website.
I went with a simpler design to keep the focus on the main tasks.
Below is my Figma prototype with the completed UI design.
If the dimensions are not looking correct on your screen, click on the top or bottom to open the prototype in a new tab.
Test
Usability testing to assess previous changes along with UI
Once I finished applying the UI design to each of my screens, I decided to do another round of usability testing to assess the UI along with the changes I made after the previous round of testing.
-
There were very few difficulties among the usability testers. The only change that I decided needed to be made was changing the look of the buttons to select the type of PTO to request. It was not obvious to each tester that they could select both options at once. It saves the user time if they select both at once, because otherwise they would have to go through the request process twice. I decided to add checkboxes to communicate this ability, which also made the design consistent with selecting the projects the user worked on.
No one voiced that they wished the calendar was not hidden, which affirms my decision to hide it. Participants were able to complete the task easier with it hidden.
-
One usability tester mentioned that it could be useful to have a space to note hours worked throughout the week in case it's difficult to remember everything at the end of the week. This is something I could consider adding in the future if users express interest in something like this.
Next Steps
Hubert Construction was happy with the app and wanted to get it developed. The company president and I met with two development companies, but it was ultimately too expensive to go through with.
-
If they did choose to develop it, my next steps would be as follows:
Even though the app will not be developed, I am glad I was able to come up with a more efficient way for Hubert Construction employees to submit their work hours and request PTO, and for the company to have a more efficient process to approve hours and submit them to payroll.
