Time Tracker - Gamification
Time Tracker is a program used to track employees' time and expenses. Time entries can be used to invoice a client, or be integrated with payroll software to ensure accurate payments to workers.
As the sole UX/UI Designer for Time Tracker, I was tasked with all research and analysis, UI design, content strategy, and user testing for this project.
User Interviews
With gamification being a dominant feature across the web, I wanted to come up with some ways to "bring fun" to Time Tracker to help set us apart from our competitors. To start, I surveyed 50 of our key clients (Admin level) to see where in Time Tracker their workers needed to improve their timekeeping tasks. Accurate and punctual completion of their time sheets seemed to be the biggest problem. This would help to determine what kind of competition tasks to create.
I also asked how and when the company would consider rewarding their workers and used this feedback in reward creation. This helped avoid offering rewards companies would not want or be able to use.
Scope
Since there would be a lot of moving parts to this feature, I wanted to scope out the basic steps (and potential screens) it would take for both workers and admins.
Admin Settings
Because we already have an established design system at Time Tracker for "System Settings," I was able to begin with some high fidelity screens for testing. Instead of a blank chart for the Admin to fill in, I gave them some "example" achievements to start with. This would also give them a better idea of how the feature works.
All of the example achievements were disabled, but Admins could activate they ones they liked, and/or expand them and edit any of the details to match their needs. This is where we also introduced "Progress Points." The system would be set up to reward workers with "badges" upon completing tasks. But, they could also have the option of earning "points" in exchange for actual rewards.
To create a new achievement, I started by giving the user a set of parameters to follow. Instead of just making something up, they would have a guide to follow on what kind of achievements they could create. These included encouraging the worker to submit a specified amount of time (completing an 8-hour shift) or when they worked additional hours and clocked out later than their assigned shift.
From there, they could customize each achievement to their company's specific needs. Depending on the achievement "type," this customization modal would be different. This is where the company could also allow workers (or entire departments) to compete against each other.
Team Competition
Workers could also be assigned to teams that would then compete against each other. Admins could set up Team rewards (such as a team lunch) and workers would earn them by combining their points. Workers could be assigned to a team by using the dropdown menu on the right side of the table, or by checking the boxes of multiple workers and clicking the "Assign to a Team" button. Once that button was clicked, a separate modal would open allowing the admin to select a team for the selected workers.
The dropdown options would be made by clicking the "Manage Teams" button. In the resulting modal, they could create new teams, edit already existing teams, and see how many members each team had.
Worker's Achievements Page
To establish the page workers would go to to see their progress, I looked at the game dashboards of other sites. Badges, progress bars, and rankings were very common.
I began wireframing some ideas that had the elements I wanted to include. To make this page special, I veered away from most of the design patterns we have in place for Time Tracker. I wanted this page to stand out and look completely different from the rest of the program. Almost like a "vacation" from the rest of Time Tracker.
I finally settled on a dashboard type layout where the user could view their own progress and see how others in the company were doing.
The top section would show all of their latest info such as Progress Points balance, latest badge earned, and their best Leaderboard rankings.
This would be followed by the badges they have earned so far, and badges they can still collect. Earned badges would be in full color and have a counter below showing how many times the worker had earned that badge. Unearned badges would be shown in a flat gray to entice workers to earn the badge so they could see the full color version.
Finally, if the competition function was turned on by the Admin, they could see their rankings for various achievements against other workers and how their own department was doing.
Reward Creation
I designed another table for Admins where they could create the rewards. Like the Achievements table, I gave them some "disabled" rewards to use as an example.
Rewards could be a gift card, additional Time Off, or a "custom" reward, such as a team outing. This is where the admin would determine how many Progress Points each reward was worth and if the reward would be for individual workers or eligible for team competition.
If the reward was additional Time Off, it was set up to connect with Time Tracker's PTO system. So, if a worker received an additional vacation day, their vacation PTO balance would automatically update within the system.
Progress Points Tracker
Once workers began earning Progress Points, there needed to be a way to track them. I then developed a Progress Points tracking table for the admin. This table would not only show all points earned by each worker, but when expanded, the admin could see an itemized list of how each point was earned. There would also be a section where the admin could manually give or take away points to a worker.
Once rewards were created, the workers could view them on their Rewards page. The top section would show their current Progress Points balance and include a progress bar showing how far they had to reach the most valuable reward.
Below that would be a complete list of available rewards. If the worker did not have enough points for any rewards, they would be disabled. But, they would still be visible to them as something to aspire to!
The last step was creating a table for Admins to keep track of redeemed rewards. PTO rewards would automatically be fulfilled once the worker redeemed them. But custom rewards would need to be manually fulfilled. The admin could always go to this table to see current reward status for the entire company.
At this stage, we have opened our Achievements feature to only 3 companies for testing. Everything has worked out pretty well. I have updated some text throughout the program to clear up some things admins and workers didn't understand. At the request of one company, I added a reward where workers could earn a badge every time they were added to a new project at the company.
Our marketing department is currently working on a campaign to launch this before we open it up to our entire customer base. Once this is done, we will be able to measure the success of this feature.
Some of the ideas I am looking into for the next phase:
1. Integrating with a 3rd party Gift Card company to automatically fulfill any gift card reward redemptions.
2. Add a "newsfeed" element that would let workers know when others have accomplished achievements and/or earned rewards. Workers would also have the ability to "like" and comment on items in the newsfeed.
