ALICJA SUSKA
Toggl desktop app feature

Timeline

Better discoverability and decreased cognitive load when working with time entries.
Timeline mockup light modeTimeline mockup dark mode

PROJECT DETAILS

Company
Year
2019
Platform
MacOS
My role
Product Designer
Team
Product Manager, 2 Developers

PRODUCT

Toggl
Time tracking and productivity tool for freelancers, small companies, and teams.
Desktop app
The desktop app is used mainly for creating Time Entries and keeping track of history. Users can privately record their activity within apps on their computers.

CURRENT SOLUTION

Legacy Timeline interface
A simple list of time entries organised by days

PROBLEM SPACE

User needs

Keep their records updated and credible
by...
  • Filling out missing data easily and fast
  • Identifying gaps in their tracked time
  • Accessing recorded activity information

How do we know?

Support tickets
Users were asking about calendar view, indicators of gaps, and recorded activity visibility. They were also complaining about incomplete data from their employees.
Interviews
When researching for this project, we've discovered that users often forget to turn on the timer and then struggle with filling out the missing time entries. They cannot recall the details of their activity. Many of them also have issues with noticing the gaps at all.
Sales team
Many prospects asked about the mechanisms that automate the time tracking and prevent errors when adding past time entries manually.

Our users

Those who track time
Freelancers & Team Members
  • Care about productivity and keeping track of their work 
  • Track time every day
  • Want an efficient workflow that lets them focus on their main responsibilities
Those who oversee and analyse data
Managers, Leads, CEOs
  • Care about the credibility of data
  • Do not track time themselves
  • Want an easy, fast, and accurate way of adding time entries for their employees

Why do we solve these problems?

The need of keeping the records credible and updated is very important to the users. At the same time, satisfaction with the current solution is fairly low. It means that there is a noticeable space for improvement and that the potential impact of any positive change would be incredibly meaningful for our users.

Customer value matrix

Diagram showing creating a potential opportunity to add customer value

Benefits

Business
A high potential of increasing customer satisfaction
Users
Decreased cognitive load when working with time entries
Users & Business
Complete and credible data to feed the analytics

Company goals

Objective 1
Improve tracking experience across platforms
KR 1
Take 3 big steps towards a comprehensive visual tracking solution
Objective 2
Make Toggl Track more appealing for larger workspaces

Solution SPACE

Flow

For individual users who track time, activities vary depending on the time of the day. They usually track time live first, then review and fill in the missing entries later.

Timeline flow

Proposition

Build a timeline view
that...
  • shows both user-generated time entries and automatically recorded activity data
  • lets users visually identify gaps in their records
  • provides helpful and contextual information for adding missing time entries

Iteration I

For the first iteration, I've decided to focus on how to display information on the timeline view and how to provide a smooth flow for editing the records using recorded activity data.

Timeline feature sketch
V.1
✅ provides context by showing time entries and recorded data side-by-side
✅ empty time slots are easy to identify
👎 overwhelming, too much data on the screen
Timeline feature sketch
V.2
✅ pills that symbolise time entries reduce the amount of content
✅ empty time slots marked with dashed lines and plus icon
✅ easy drag and drop and resize of the pills
🤔 will users understand the abstract concept of pills as time entries?
The first test 🧪

To validate the idea of pills and the overall layout of the timeline view, I've decided to run the first iteration of usability tests. I had positive feedback about the pills from the hallway tests so it was time to show designs to regular users.​

I've chosen to test on v.2 design in high fidelity - low-fidelity designs, in this case, may have been too abstract for users and result in skewed results.

​Since the majority of settings were already in the menu accessible from the status bar, I've decided to not change this for the first iteration and gather feedback about it.

Timeline interface for the first round of tests

Results

No problems understanding the pills

👎 4 out of 5 users thought recorded activity as already assigned to the pills

👎 5 out of 5 users wanted an easier way to switch between list and timeline view

👎 2 out of 5 users didn’t know how to turn on activity recording

To improve

Entry point
Using the status bar menu to change the view in the app window is not very intuitive. The solution should be more contextual, located directly in the app interface.
Recorded activity data
In the first proposition, recorded activity is displayed right next to the Time Entries. The relation between them is unclear -some users thought sections were already merged.
Recording activity in the background
Many prospects asked about the mechanisms that automate the time tracking and prevent errors when adding past time entries manually.
Day overview
It should be possible to have a quick overview of the whole day. The current view is very detailed and requires a lot of scrolling to review the whole day.

Iteration II

Based on the feedback from the first round of tests, I've changed the design so that the timeline view is easier to discover and pills are more understandable.

Timeline feature sketch
✅ recorded activity separated from time entries and presented as pills 💊 with more info available on hover
✅ improved entry point - list and timeline tabs
✅ the 'record activity' toggle visible in the app window to improve discoverability
🤔 is using pills in both sections too abstract or minimalistic?
The second test 🧪

As the second iteration of design changed key moments and interactions, I needed to check if users understand the flow. My main focus was on:

Timeline interface for the second round of tests

Results

✅ 100% completion rate

👎 5 out of 5 users want to see more information about their own time entries - 'hovering is annoying'

👎 3 out of 5 users need more information about the recording activity privacy

FINAL Iteration 🙌

The second round of tests has shown that the design is progressing in a good direction. To improve it even further, I've changed two details:

Timeline mockup light modeTimeline interface with the tooltip open
✅ show more details visible for not overlapping time entries
✅ add tooltip with security info about recording activity

More design details

Interactions

Users can edit the length of the pills and visually reorder time entries. Those interactions accommodate frequent users' needs in the experience.

Timeline mockup with the dragging functionality highlightedTimeline mockup with the drag to resize functionality highlighted
👉 Drag to resize
👉 Drag and drop to reorder

Day overview

It is important for the Timeline view to serve both purposes: providing detailed information about Time entries and giving a quick overview of the whole day of tracked time. Changing scale, with the controls visible on hover, of the Timeline is a very straightforward solution that provides a smooth transition and freedom for the user.

Timeline mockup: zoomTimeline mockup: zoomTimeline mockup: zoom
Timeline view - zoom out

Empty states

To start the experience and encourage users to add their first Time Entries, playful and engaging empty states are displayed.

Timeline empty stateTimeline empty stateTimeline empty state
New user - no activity so far
No recent Time Entries
Timeline view empty state

Progressive onboarding

When exploring different areas of the app, contextual hints help users with their initial activities. This is a more effective way of guiding new users than showing tutorials just after installing the app.

Timeline onboardingTimeline onboardingTimeline onboarding
Tooltip: edit your time entry
Tooltip: about timeline
Tooltip: discover timeline view

Dark theme

For customers who are using dark mode on macOS different color scheme is provided.

Timeline mockup with open tooltipTimeline mockup dark modeTimeline mockup dark mode
Tooltip: edit your time entry
Tooltip: about timeline
Tooltip: discover timeline view
Back to top