alicjasuska.gopher@gmail.com​  |  Tel: +48 502 153 663

Timeline

for Toggl desktop app

Design improvements for better discoverability and decreased cognitive load when working with time entries.

My role

UX and UI Design
User Research

Team

Product Manager
2 Developers
2 Designers

Company

Toggl

Year

2019

Platform

macOS

Project Overview

The Product

Toggl provides time tracking services for teams and freelancers to help them boost their productivity. Desktop app is used mainly for creating Time Entries and keeping track of the history. It is possible to privately record user's activity and apps being used on their computers.

The Problem

Currently, tracked time is displayed only as a list of Time Entries per day which makes it difficult to identify and fill out the gaps. In addition, user records activity using desktop app but it is possible to see the results in web app only. It forces customers to switch between platforms and makes their workflow complicated.

The Solution

Present data in more accessible way that enables easy review of existing Time Entries over time. In addition, users should be able to see recorded activity in the desktop app and use it as a base to add missing details to their records.

Understand and Analyse

Current proposition

In the first phase of design ideation, initial prototype was prepared.

Date picker

Timeline

Time Entries

New Time Entry bar

Recorderd activity data

Desktop app window

Record activity toggle

Entry point for timeline view

Menu accessible from the macOS status bar

Areas to improve

The first prototype is showing general idea of the timeline feature but there are still some elements worth improving.

Entry point

Using status bar menu to change view in the app window is not very intuitive. Solution should be more contextual, located directly in the app interface.

Recorded activity data

In the first proposition, recorded activity is displayed next to the Time Entries. It is unclear if they are already merged together.

Start and stop recording activity

To start and stop recording activity in the background, user needs to use menu located in the status bar, whereas results will be shown in the main window. This functionality is not set in context of the app.

Day overview

It should be possible to have a quick overview of the whole day. Current view is very detailed and requires a lot of scrolling to review the whole day.

Onboarding

Initial solution is lacking onboarding. As Timeline view is a new feature, it should be explained to the user to show its all benefits.

Design

Entry point

Entry point for Timeline view should be contextual and easily accessible. I decided to use tabs as they are very intuitive and incredibly easy way to switch between List and Timeline view.

Before

User had to use macOS status bar to switch views

After

Tabs

Easy navigation using tabs

Recorded activity data

Main goal was to make recorded activity data comparable with Time Entries to enable easy context switching when filling out the gaps. The biggest challenge was how to display big amount of data in the small window without losing context.

Concept

Table that shows Time Entries and recorded activity side-by-side.

On hover, all data concerning recorded activity is visible. This solution makes interface clear and all information accessible.

Final solution

To make recorded activity even more distinguishable from Time Entries, I used colour coding - all pills displayed in 'Activity' section are blue. To divide data into manageable pieces, pills are not longer than 15 minutes.

Before

After

Recorded activity section

Tooltip with recorded data

Empty states

When one part of the table is empty, contextual information in the table helps user understand the reasons and take action.

Activity recording is off

User just turned on recording

Recording on, no Time Entries

Start and stop recording activity

Record activity toggle should be placed in the context of recorded data. Thanks to proximity, it is easy for the user to understand which elements of the interface are connected to each other and how their decision influence the app.

Before

Record activity toggle

Placed in macOS status bar menu

After

Toggle

Located in app window

Day overview

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

Timeline view - zoom out

Usability testing

To avoid bias, I asked another designer for help with performing usability testing using the script and plan I have prepared. 

Goals

The main goal is to find out if the concept of pills on Timeline is understandable and intuitive for users.

Secondary goals:
- Test List and Timeline Tabs layout

- Test popup for adding Time Entry

- How users understand Recording Activity

- Research flow of working with Activity and Time Entries columns
- Test navigation within the Timeline tab (scrolling, zooming)

Users

Moderated user-testing was done with 5 desktop app users (2 employees, 2 freelancers and one team lead).

Issues and improvements

The concept of using pills on Timeline is understandable and mostly intuitive for the users, but usability testing showed that users would like to have more information visible right away.

More info about Time Entry on the Timeline view (major issue)

Users want to have more details about the Time Entry accessible right away

Before

After

'Today' button is missing from the date picker (minor issue)

Navigating to Today's date was not very user-friendly. Tester suggested adding a shortcut to Today's date

Button

Activity tracking data is private (major issue)

Users weren't sure if automatic activity tracing on their computer is private. They were hesitant to turn it on and were looking for more information in the app. I've decided to add tooltip with more details and link to the knowledge base.

Onboarding

Providing timely hints and instructions is crucial for the experience, especially in case of complex application or new features.

Empty states

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

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 activities. This is a more effective way of guiding unexperienced customers than showing tutorial just after installing the app.

Timer

For

new Toggl user who has never tracked any TEs on Desktop

When

5 sec after they open the app

Logic

- Hint disappears when user clicks on the X or outside the blue box 

- It reappears twice: when user installs the app and when users comes back to the app after more than 24 hours and still hasn’t tracked any time.

List

For

all users

When

after stopping their first TE

Logic

- Hint disappears when user clicks on the X or outside the blue box 

- It does not reappear

Timeline

For

all users who hasn't opened the Timeline tab yet

When

 after they track at least 3 Time Entries

Logic

- Hint disappears when user clicks on the X or outside the blue box 

or when user enters Timeline tab
- Appears only once

Timeline - table

For

all users

When

after entering Timeline tab for the first time

Logic

- Hint disappears when user clicks on the X or outside the blue box 

- No reappearance

Timeline - Time Entries

For

users who have never edited or added Time Entry on the Timeline

When

user visits Timeline tab for the 3rd time

Logic

- Hint disappears when user clicks on the X or outside the blue box 
- It is shown if there is at least one Time Entry to display. If not - it should appear on the next possible 
occasion

- No reappearance

Record activity

For

those who have never used recording functionality

When

they have been tracking time for at least 3 days and have been on the Timeline tab at least 3 times

Logic

- Hint disappears when user clicks on the X or outside the blue box 

- No reappearance

- 'Find out more' links to knowledge base opened in the browser

Timeline - activity column

For

all users

When

they turn on 'record activity' for the first time

Logic

- Hint disappears when user clicks on the X or outside the blue box 

- No reappearance
- Empty state is displayed after closing the hint

Manual mode

For

all users who have never used the manual mode

When

after tracking activity for 2 days

Logic

- Hint disappears when user clicks on the X or outside the blue box 

- No reappearance

Dark mode

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

Timeline view

List view

Timeline view - empty column