Embedded Files
CLIENT
Myself
Myself
ROLE
UX & Product Designer
UX & Product Designer
YEAR
2013
2013
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.
One of the sketch for the time tracking mobile app main interface.
The objectives
Designing for mobile, put yourself in a constraint scenario. They force you to think outside the box to find and design the solution which take the less effort to accomplish.
How can we simplify those main tasks:
Selecting a date,
Choosing or adding a project,
Entering the number of hours,
Specify a task, adding a note if needed, and
Closing the day, submitting the timesheet.
The process
I began sketching possible solutions for the various tasks, as also describing the expected behavior.
Multiple iterations of mockups were designed to nail the main interfaces, choose the right font, and how the project titles were layout.
Once the main user interface was define, I spend some prototyping the user interactions to get a feel, and make adjustments.
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.
Revealing the week calendar and navigate to a different date.
Sketches of various interactions to navigate by swiping the day bar (and edge swipe) to go to the previous or next day. Swiping down on the day bar to reveal the week, and again to display the monthly calendar.
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.
Adding an existing project to the list.
I even imagine an easy way to copy a project, by dragging a tile with two fingers, so a new entry can be made with a different task.
Sketches of the interactions to add a project to the selected day.
Time entry on two projects, adjustment on a time entry and removing an entry (which can be undone if desired).
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.
Exploration of different ideas for the QuickEntry menu: analogue, exposed minute increments, numeric keypad + minute increments, and finally the one retained with the stacked minute increments, and minus, plus for the hours.
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.
Choosing a task on time entry
Editing a task
Adding a note on a time entry.
The different screens illustrating the UI for choosing a task, add a new or edit one.
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 scrolls up until the call to action indicated he can release to close the day. All the entries at 0 are removed, and the day is locked. A random quote is displayed to delight the user.
After some refinement, I changed the UI, so it was more obvious the day was closed. And still, I probably do better.
The interactions to clear/close a day. At first, it was imagined as a “pull to activate”. That interaction was then reserved for adding a project/time entry. So we use the scroll upward instead.
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.
Multiple mockup iterations have been done to find the perfect font, colors, and to balance all the elements in the interface.
Various UI iterations to find the perfect font, colors, and element dispositions.
While the first version of the app was developed, we publish a pre-launch landing page to gather interest.
Pre-launch landing page to gather interest.
Report abuse