...

A primary goal of the design of this application was for it to be responsive, it should be equally as usable on mobile as it is on desktop.  We spent significant time testing it on the iPhone and adjusting the front-end to achieve this goal. This device compatibility was achieved by stacking columns on the mobile app and scaling font-sizes proportionately with screen size as is shown in the images figure 1 below.

Figure 1: Desktop layout on the left, mobile on the right.

Timer Creation

The single most important action a user can perform is the creation of a timer. In order to facilitate this, we created a very simple yet powerful timer creation dialog. In the date dialog, the user is able to enter a vast array of date terms which are fuzzily matched to an output date. They can enter terms such as "5 min", "today at 6pm", "10/26/1990" and they will all be converted to a date. The user is also given instant feedback as to whether or not the date is valid. This streamlining of the date input was a result of the input to our first round of user testing. We originally had a calendar and clock widget to input time, but it was inefficient and difficult to use. 

Implementation

The TeamTimer application consists of an html5 client written using jade, coffee-script and less that communicates with an API server written in python with flask that exposes a mongodb database. The modular separation of the client and server allowed us too quickly mock and test the front-end design with our test users before investing the time to developing the backend.

...