MY ROLE
Design Lead
TYPE
iOS App
TIMELINE
Dec.2017 - Feb.2018
OVERVIEW
uPunch is a mobile app to manage employees’ time tracking. Together with the web portal and punching devices, the mobile app allows users to efficiently manage time cards, do calculations, save employees’ data, and export to payroll.
Background
Designed for small businesses, uPunch is a 6-punch per day that offers users an affordable and precise time clock system to track employee’s punches.
THE PROBLEM
Endless work for manually calculating employees’ time to create and manage payroll.
For employees, uPunch time clock is easy to use for punching. However, the work is not easy for supervisors.
At the end of each pay period, they need to collect all paper time cards, check the punch times, probably mark down the mistakes by a pencil, manually calculate the hours and upload the data for payroll... the endless manual processing makes the users frustrated.
Research & Analysis
GOAL
Improve processing experience for uPunch customers by creating a mobile smartphone app that allows administrators to add employees, add time, scan paper time cards, and calculate time for payroll.
PERSONA
By building the persona, I was able to know the typical customers better and it helps to define the admin flow in the next step of research.
Behaviors
Has 5 employees in his body shop
Uses uPunch time clock for 2 years
Sometimes work from home
Check all time cards at end of each working day
Collect time cards and calculate hours per two weeks
Motivations
Does not want to spend more money on other time clocks
Wants to make sure employees punch correctly
Wants employees to be happier and work more efficiently
Wants to use 1.5 times regular rates for overtime pay
Does not like to check the small numbers on time card due to low vision
USER FLOW & PAIN POINTS
THE CHALLENGE
Make time card management efficient and affordable for employers/supervisors.
Design for existing customers of uPunch Time Clock
Eliminate the need to manually calculate the time
Ensure a higher level of compliance and accuracy during the payroll process
Solution 1 ❌
Upgrade time clock to a newer version
We do have other time clocks working with fingerprints and face ID.
Solution 2 ✅
Create software for existing time clock
Information Architecture
Ideation
Hi-fidelity Design
As the most important part of the product, time card scanning and processing need a smooth flow for better user experience. With clear illustrated instructions, users are able to scan paper time cards with the app and easily edit the scanned result.
Usability tests
I created an interactive prototype and conducted the usability tests with 5 supervisors. The participants are required to complete 4 tasks with the uPunch prototype:
Set up an account
Add one employee
Set up policies
Scan and view time card
Most of the participants successfully complete the tasks, but I did notice some areas that need to be improved. I also did a short contextual interview for each participant to learn more about their daily job and preferred methods to manage employee’s time and payroll.
Iterative Enhancement
Add employee
Through user interviews, I learned that it is important to set up employee’s pay rate and shift settings. To improve efficiency, I updated the step of adding employee to include the crucial settings, instead of setting it up later in employee list,
Employee status
Some participants of the usability tests mentioned that they would like to view the active employees only but failed to do it with the prototype. To solve this problem, I added a status filter in the employee list to view all, active or archived employees.
Add overtime policy
In the original design, I created the overtime policy as a required step. However, through usability tests I learned that it is not applicable for all employees. Therefore, in the updated design I changed this step to optional with a toggle.
Features
Set up Pay Period
During Onboarding, user may select from the four pay periods and enter required information in following steps. A summary screen is provided for user to review the pay period settings, with clear illustrations for start and end dates of each pay period.
Scan Time Card
Between the two methods to entry punch times, scanning is much more convenient since user can easily take photos for the paper time card and get the numbers scanned and saved automatically. After scanning, user will review the scanned result and edit it before calculating.
View and Edit Time Card
From Time Card Overview, admin will be able to check the overall hours and salary (optional) of each employee.
By selecting employee’s name, a detail view will open, showing all punches in the selected pay period and hours by pay code. Admin may edit the punches if they find any errors.
Design System
Beta Test
We launched beta test and learned that not all users can scan time card successfully. There are two most common errors:
Users didn’t scan the correct area of the paper time card and the camera is unable to capture image
Punches are not clear on the paper time card and the app is unable to read the data
TIPS FOR USER
To solve the scanning problem, I added instructions in the scan flow. If user’s camera is unable to capture image or the app is unable to read punch data, the user will see tips to improve detection or help readability. If the problem still exists, they can watch a video demonstration to learn the correct way to scan step by step.
Launch
Learnings
Keep iterating
It makes for a cost-effective system to improve designs without doing all the hard work (development) and then discovering that the difference between what users said they would do and what they actually do is large and expensive to overcome.