Timekeeping App
Out of frustration with the appalling interface we were faced with while tracking our hours for a particular contract, a buddy and I designed a mobile app that would make the task so much easier.
Overview / Challenges
This project is a recent personal design challenge, taken on by my UX/UI designer buddy and me. We worked cross country from one an other, and passed work product back and forth so he could manage the visual design while I managed the interaction design. The final “product” is a UI prototype created using Axure, designed specifically for the iPhone 5.

STEP 1: SCOPE & WORKFLOW

There are multiple user types for the time tracking software we’ve used in the past. Manager roles, where timesheets for multiple employees can be reviewed, were not employed in this design. This app was designed for non-management, whose primary task is entering their hours for multiple projects at the end of each day.
The workflow is based on the current system. However, the search function was left off due to its very infrequent use. While the app design saves entries, this function is built-in to the time entry process, so there is no dedicated “save” function at the end of the completion of the time tracking task.
TIME-KEEPER WORKFLOW

STEP 2: MULTIPLE DEDICATED SCREENS

Original sketches envisioned kind of a “metro”-themed navigation system, with dedicated screens for each of the tasks.
Petar Nyagolov, designer extraordinaire, used the sketches to create clean, stylish wireframes.
INITIAL SKETCH

STEP 3: HEURISTIC EVALUATION

A quick heuristic evaluation revealed a couple of problems with these initial ideas:

1. The tasks presented in the initial grid are not independent of one another. There are dependencies that make a flat navigation structure not conducive to a usable design. All time entry needs to be in the frame of a specific timesheet. Therefore, one must specify the timesheet first, before it would be possible to add a charge code.
The second problem lies in the separation of the charge codes from the hours. Since each is visible only when the other isn’t, there is no way for the user to verify the accuracy of their entries. This robs the user of an important error-prevention technique, as well as interfering with situation awareness. Situation awareness is the consistency of a mental representation with all the details of the actual context of a situation. With good situation awareness, users don’t need to rely on visual cues to know where they are in a process; they just know. That is a powerful psychological principle, and good design supports situation awareness in users.
WIREFRAMES

STEP 4: INTEGRATED APPROACH

To aid in situation awareness and error prevention, we then moved to an integrated screen approach. There is a tendency to avoid this approach with mobile devices, given the limited real estate, but judicious use of sliders and drawers can provide a wide range of control elements, while maintaining the mental model of a single, integrated screen.
The annotated screenshot shown here is from an Axure prototype. It’s not nearly as pretty as the wireframes above, but pretty takes time, and the effort would have been wasted here. In under an hour I was able to prototype key elements of a single-screen experience for the visual designer. I uploaded the prototype to Axshare, and Petar was able to use this ugly prototype as the foundation for a hi-fi mockup.
LO-FI PROTOTYPE

STEP 5: (NOT QUITE) FINAL DESIGN

The final design incorporates the functionality and layout delivered in the lo-fi prototype, but takes into consideration the aspect ratio, resolution and PPI of the iPhone 5, as well as aesthetic that is classic and refined.
The main screen is designed around the most common use case, which is a worker entering in their hours at the end of a work day. After logging in, the user is taken to “today”, and with the use of a droplist and time picker, can enter hours for any number of different charge codes.

Low-frequency tasks, such as checking PTO are triggered via a left-side drawer. These links presumably take the user to other screens, though these functions were not included in the scope of this “weekend” project.
HI-FI MOCKUPS

STEP 6: FINAL PROTOTYPE

All “final” designs are subject to changes based on development constraints. In this case, with the prototype being the product, some last-minute changes were made to the design based on both technical constraints imposed by Axure, and “user testing” when the prototype was tried out on the iPhone.
Last-minute changes included:
  1. Browsing timesheets results from a horizontal swipe instead of vertical scroll
  2. Today’s date and total hours headers are combined because of a need to separate total hours for the day and total hours for the week. Total hours for the week should be provided up top to stick with the hierarchical relationship between days and weeks.
  3. Dynamic system of droplists was implemented, as explained below.
Most users will not have more than 5 different charge codes, which fit nicely in the viewport with no vertical scrolling. However, as each charge code is entered, a new droplist is provided, so that with vertical scrolling there is room for an unlimited number of charge codes for a given day.
HI-FI PROTOTYPE
If you create a text field formatted for time, when the prototype runs on an iPhone, the built-in time picker pops up. The time picker can be modified using javascript, but not being a developer, I was not able to get it to do what I want. So this functionality, which picks a number of hours and quarter hours, was not implemented. Instead, when you tap on an hours text box, a modified image of a time picker pops up. Tapping on the image dismisses it, and enters 11.25 hours in the text box. A long day for sure, but accurate, at least for this weekend project.