My Role
I was the lead UI / UX designer for the TimeTracker SaaS application. TimeTracker is a time tracking and record keeping web service for small to medium sized businesses.
Our team designed several features for TimeTracker that were available on web, mobile, a desktop widget, and plugins.
New Feature: Sync time data with third party apps
TimeTracker customers wanted to sync their employees time data with third party services like QuickBooks, Zen Payroll, Xero, etc… They use these third party apps for doing their taxes, payroll, or invoicing (services that TimeTracker does not offer) for their business. This was an essential feature that would keep customer retention and was an excellent selling point for new customers.
User Research
User want to sync Time Data with 3rd party accounting and/or payroll services (i.e. QuickBooks, ZenPayroll, Xero, …)
Issues that users have:
- Must keep time data between TimeTacker and 3rd party services consistent
- Different users have different schedules or habits for syncing time data (e.g. syncing at the end of the week or month)
- There is a lot of time data to sync (i.e. many employees), how can users be confident that all the time data is synced and consistent
- Users want to know which time data has been synced or not
- Users want to be able to sync time data individually or in batches
- Users want to record what has been synced or not
Solving The Problem
These are the solutions we came up with to tackle the user issues above:
Create a sync queue page where:
- Users can perform a sync any time they want
- User can keep track of what has been synced or not
- Users can sync time data individually or in batches
Provide a sync log page, to show all previously synced time entries, so:
- Users can see what has been synced or not
Add Sync buttons and show sync status to individual time entries, solves:
- Users want to know which time data has been synced or not
- Users want to be able to sync time data one at a time
Putting It All Together
Starting with a User Journey
I created a user journey to illustrate the process that a TimeTracker user would go through to sync their employee’s time data with a third party app. This journey accounts for the already established TimeTracker process for entering and approving employee time data and shows how the syncing process fits in.
Detailing with Flow Charts
Next, I drew out a flow chart describing the time entry approval and sync flow involving both the employee and manager. Also, I included the error cases (i.e. manager rejects employee time entry or the sync failed) that would occur.
Final Designs
In the time entry table, users can see which time entries have been synced, are ready to be synced, or not in the synced at all.
In the sync queue, the user can initiate a sync with their desired third party application (i.e. QuickBooks), and they can select individual or groups of time entries to sync.
Also, users can sync individual time entries their time entry window
Shen's Work 