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

Date Picker

for Toggl web app

A redesign made for better experience of selecting dates, navigating, using presets and understanding constraints.

My role
Team
Company
Year

User Research Synthesis
UX and UI Design

Product Manager
2 Fronted Developers

Designer

Toggl

2019

Project Overview

The Product

Toggl provides time tracking services for teams and freelancers to help them boost their productivity. To keep track of the results and identify areas for improvement, web app provides analytics tools such as Dashboard, Reports or Insights.

The Problem

Date picker is a very important part of the flow when it comes to adding time entries, tracking time and working with analytics tools. Users find current solution outdated and not intuitive enough. In addition, navigation makes it difficult to work with long periods, which is crucial for managers and administrators.

The Solution

Create new date picker that provides useful experience for both single users and managers with regard to different needs of both groups when it comes to choosing time periods and navigation. Solution should be easy to adapt to all pages and scenarios of use, keeping the same patterns and behaviours.

Understand and Analyse

Customer Pain Points

- navigation between months - only vertical scrolling is enabled
- choosing long periods of time - wrong navigation pattern
- manual date editing - difficult or disabled in some cases
-
month indicators visibility - they are very small and easy to miss
-
today's date - it's hard to notice as only font is changed

Previous solution used in Toggl web app

Pages and requirements matrix

Solutions solving a similar problem

Airbnb

+ Effective navigation

+ Clear and Save option for safe exploration
+ Intuitive multi-day selection

This solution doesn't provide manual date editing and one day selection

Airbnb date picker

Booking.com

+ Effective navigation

+ Summary at the bottom
+ Calendar icon next to the input
+ Clear start and end date marks

This solution doesn't provide manual date editing and one day selection

Booking.com date picker

Google Calendar

+ Effective navigation (only one month view)

+ Manual input enabled
+ Start and end dates chosen separately
+ Interesting error prevention - no error states, date changes automatically to the closest possible

This date picker has no time period highlight, user can only choose start and end date. This approach reduces number of cases to cover.

Google Calendar date picker

Apple Calendar

+ Effective navigation (only one month view)
+ Easy come back to current month

+ Manual input enabled
+ Start and end dates chosen separately
+ No error states, date stays at its default state

No time period highlight. End date displayed below start date which make it difficult to access when date picker is open.

Apple Calendar date picker

Design

Concept

To cover all the user needs we needed two variants of the date picker

Two months

- For choosing both date range and a single day
- On some screens quick choice options available

- Mostly for analytics tools
- Easy navigation between months

Single month

- For choosing a single day

- Used on Time page
- Easy navigation between months

Date picker anatomy

Manual input

Quick picker

Today's date

Selected date range

Navigation bar

Go to the previous date range

Go to the next date range

Text field

Navigation

Thanks to substituting scroll with buttons, users can easily go to any desired point in time.

Back and forward buttons

Months

Navigation between months is enabled for both two and one month pickers.

Click on the chevron changes view by one month to enable continuous selection of longer date ranges.

Click on chevron changes view by one month.
In this picker, users mostly navigate one month back to fill out missing Time Entries.

Analogical date ranges

For analytics tools such as Reports or Dashboard, it's crucial to enable easy comparison between corresponding periods of time,
for example: last week with this week or last month with this month.

Click on chevron in picker button changes view by one period
(such as number of days, week, month, couple of months etc.)

Selecting day or date range

When patterns of selecting one day or date range separately are straightforward, bigger challenge was to create a solution for a combined variant - choosing one day or date range from the same picker.

Single day selection

It is available in both single and two months date picker

Simple solution - user clicks on a date and date picker closes

User needs to click twice on
a date to select just one day.

Date picker stays open so that user can review the selection

Date range selection

Available only in two months date picker. Used in all analytics tools on Toggl platform.

User chooses the start date and hovers over next days...

Text field updates to chosen date

User chooses the end date.
Selection is made. Picker stays open for easy review.

Text field updates to chosen date range

Manual input date picker

Solution added mostly for fast and precise long date ranges selection but available in all date pickers

Dates available for edition

Faster workflow

To make using input more efficient, user can press:
- left right arrows - to navigate between characters

- Tab - to go to next field
- Enter - to confirm changes and close date picker

Date format

When confirmed, date format on the button changes to more readable and accessible

Errors

If user enters date that is outside the possible range, it will change automatically to the closest possible day.

User entered end date sooner the start date

Date changed automatically to closest day possible, which is start date in this case

Quick picker

Couple of most popular date ranges available in the left panel, make standard dates selection even more handy.

When user chooses options from quick picker, calendar dropdown closes automatically.

Variations

Options vary depending on the page and its restrictions

Basic view

Available if no restrictions are applied

Comparative Insights 

It's possible to compare periods up to 7 days long

Weekly Reports

Data generated on weekly basis

Date range limits

Date range choice is limited to 365 days. Also, every page has its own restrictions that need to be handled seemlessly.

365 days limit

User can choose date range up to 365 days in all analytics tools.

When user chooses hovers outside 365 days limit, tooltip is displayed.

7 days limit

On Comparative Reports page user can choose only up to 7 days.

Information about the limit is displayed at all times.

When user hovers over days outside of 7 days limit, information is highlighted.

Key learnings

It is worth to put more work into complex elements to increase usability

Building one date picker for all cases would be easier and faster but, learning from the previous version, we have decided to bare our users' best interests in mind and create one and two months variants . It is more user-friendly approach that is correctly adjusted to the context.

Visual work on calendar-related elements should be estimated conservatively

Date picker seems to be very straightforward element with a lot of ready solutions to get inspired with. Anyways, with this number of special cases to take care of and mix of one day and date range selection, states and variants multiply (hover states, overlapping elements etc.). It needs to be taken into consideration when planning the UI work.

When using ready technical solutions, choose them as soon as possible

After listing all functionalities and making our decision about building two variants of the date picker, developers decided to use ready made date picker and adjust it to our needs. This decision saved us a lot of time, anyways we had to twist a little our first ideas to make it feasible. It was very important that we discussed it at the very beginning, before any final designs were made. It saved a lot of time spent on revisions.