Date Picker

for Toggl web app

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

Calendar.png
Timer mode.png
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

OldPicker.png

Previous solution used in Toggl web app

Pages and requirements matrix

matrix.jpg

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.png

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.png

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.png

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.

OSX.png

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

Sketch1.jpg
Sketch2.jpg

Date picker anatomy

Manual input

Quick picker

Calendar.png

Today's date

Selected date range

Navigation bar

Go to the previous date range

Netural.png

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.

ButtonLeft.png
ButtonRight.png

Back and forward buttons

Months

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

DatePicker1.png

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

Manual mode.png

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.

Netural.png
NewDatePickerButton.png

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

Manual mode.png

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

SingleDayTwoMonths.png

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.

HoverTwoMonths.png

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

Text field updates to chosen date

ChosenTimePeriod.png

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

ManualInput.png

Dates available for edition

ManualInputEdit.png

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

ManualInputShort.png
ThisWeekButton.png

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.

Limi4.png
Limit5.png

User entered end date sooner the start date

Limit6.png

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.

DatePickerTwoMonths.png

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

Variations

Options vary depending on the page and its restrictions

Quickpicker.jpg

Basic view

Available if no restrictions are applied

Calendar Quickpicker1.png

Comparative Insights 

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

Calendar Quickpicker2.png

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.

Limit3.png

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.

Limit.png

Information about the limit is displayed at all times.

Limit2.png

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.