TIME, a time tracking mobile app
UX & Product Designer
It came from a problem I had. Then it became an obsession at finding the right solution for it.
Time entries for employees are a pain, a necessary pain, but still a pain. And the vast majority of time tracking software programs just add to that pain with interfaces that are ugly, inefficient unfriendly and terribly slow. So employee do not enter their time on a daily basis, they wait until the end of the week or even the month before entering it, leading to errors and imprecise reporting. So much for the executive reports of the manager!
To solve the time tracking, we need to first solve the time entries by the employee. Making it effortless as possible and daily remindful. As everyone had a smartphone and this is what people cary everywhere they go; it was obvious that time entries should be done on it, as there is not much of an excuse for not doing it.
In 2013, I was freelancing for various digital agencies. My time were split between multiple projects in a single week. I need a way to more efficiently keep track of it to for my invoicing.
To make it a sizeable project, I've decided I would solve my problem alone: track the time I work on projects for my client as a freelancer. So it can be self-sufficient, not dependent on any cloud service or web app to work. Reporting would be a simple export to a calendar, using already this system as a tracking tool to invoice my clients.
Selecting a date
- The user uses the Title bar to move between the previous, next day, and to return to the current date.
- Alternatively, the user could also move from day to day by swiping his finger in the empty area below the projects list.
- In iOS7, edge swipes would let the user, natively, sideswipe from the edge of the display to move to the previous (left) or next (right) screen.
- The input field for adding a project stays fixed as the user moves between the days.
- The user swipes from top-to-bottom on the Title bar to access the Week view.
- When shown, the Week view lets you consult the seven days, with the date you are currently viewing being selected. Dates with time entries are indicated with dots. The number of dots indicated the number of entries (1 = 1 entry, 2 = 2 entries, 3 = 3 or more entries). At the top of the dates, the calendar week number and the weekly hours total are displayed.
- User selects a date to view its time entries. Swipes left or right to access past or future week, and taps on the Date title bar to return to the current calendar day.
- The monthly view was designed, but was decided not to be part of the core functionalities of the 1.0 version.
Choosing or adding a project
- For easy eyes filtering and recognition, we could suggest representing each project by a color. The color would be auto generated when a new project is added. Projects of the same common denomination should be of the same color (i.e: 288 ProjectName1 and 288 ProjectName2).
- The list of projects presented to the user would be (in the last 5 days) the ones with recent time entries and/or the recent ones added. Projects consistently with no time entries (or deleted more than 5 times) would not appear. The projects would be listed chronologically according to the amount of hours they have in the recent days.
- To add a project, the user would tap on the + icon in the Title bar or would simply scroll down the list of projects until a new field appears. The field would be in focus, ready to type the name of the project. As the user type, matching projects would appear. To add a new project, the user would simply continue typing the project name, and tap add to confirm its creation. Once added, the project appears to the top of the list.
Entering a number of hours
- The user taps on project counter to add 1 hour and revealing the QuickEntry menu. To display the overlay without incrementing, the user can tap & hold or swipe left on a project tile. The overlay hides if no interaction is detected above it after 1500 ms or if the user interacts with something else in the interface. Optionally, the user can swipe left, to close it.
- The user can decrease the number of hours by pressing -1, and change the minute increments by cycling through them :00, :15, :30, :45. Those increments can be defined in the settings of the app (5, 10, 15 or 30 minutes). Tapping and holding on the minute increments is an option for the 5, and 10 minutes, letting the user cycles through them more quickly.
Specify a task or adding a note
- The user swipes his finger from left-to-right on a project to show the QuickAction menu, which is revealed under the project tile: Remove time entry, Change task, Edit note.
- Pressing the Change task icon would show a modal with all the tasks the user can choose from. From there, they can edit the list or add a new one. A task can be identified as billable with an hourly rate. One task can be set as the default one when a time entry is added. Once selected, the task is displayed above the project name.
- Pressing the Edit note icon, forward the user into notepad where they can enter any text followed by #tags. A menu over the keyboard let the use select tag, avoiding typos. A visible portion of the note can then be seen under the project name.
Closing the day
- Once the user is satisfied with his entries for the day, he can decide to clear the day of all the projects with no entries and close it.
- Users hold and pull the content of the list; "Pull to clear the day" appears. The user keep scrolling up until the message change to "Release to clear the day". The user can then release or pulls back to cancel.
- Once a day is closed, it is locked and not entries are permitted. When Export to Calendar is enabled in the Settings, the hours are exported to the chosen calendar. To reopen a day, the user does the reverse action, scrolling down until the day is unlocked.
User preferences (App Settings)
- Minutes increment: lets the user decide the minute increments; every 10, 15 (default), 20, 30 or 60 minutes.
- Work days: lets the user define the days he usually works in a week. User selects all the work days from Monday to Sunday. The user can also optionally dim-off the off days in the calendar, helping during navigation to visually distinguish them.
- First day of the week: select the first day of the week from Monday to Sunday (default is similar to the user iOS settings).
- Working hours: the number of working hours for a day; between 1 and 24 (default 8). The total number of hours by day over that limit would appear in a different color as a visual warning.
- Notifications: notified when no time has been entered for the work day. When enabled, the user can set the preferred time to received it. Also, a badge can be displayed on the app icon to indicate the number of days with no time entries.
- Double tap to: lets the user assign an action when double-tapping a project title. The choices are: None (default), Change task, Add a note.
- Export to calendar: lets the user export automatically the time entries to a calendar. The user can specify at what time his working day starts (by default it is set to 9h00 am). All entries would be stacked from that time. If the cumulative entries go over midnight, the starting time would be automatically lowered for that day, to make sure all entries fit in that single day. The export is done every day at midnight or when the day is closed.