...

All of the timers on the page get updated in realtime. This means the user gets constant feed back about the state of a timer as the seconds digits count down, and if a user is invited to a timer by another user, it instantly appears in their invited timers. This realtime aspect was important to our test users, because they wanted to be able to leave the application open on their desktop without ever refreshing the page. Also when a timer expires, the user is notified and it is filed in the category of expired timers.

User Sign In

Our users were not enthusiastic about a difficult login and sign in experience, so we kept these pages very simple, as illustrated in Figure 4 below.

...

We choose to highlight timers in order to visually indicated how soon they are going to expire. In user testing we realized that this fact was not readily apparent to the user, so we implemented a tutorial page that appears the first time the user logs in. This page does not interfere with the users actions, and disappears when they create their first timer. See the tutorial below in Figure 5.

Figure 5: The tutorial screen

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.

...