Redesigning the most used UI component using the most sophisticated design tool – data.

In Analyze date-picker, we intentionally didn’t allow entering the start and end dates, believing it will prevent users from making errors. But users were facing issues because of our choice, so I decided to fix it. Apart from offering the editable date inputs, we also provided better ways of selecting dates and months faster.

DatePicker Teaser — Three components of the new date picker: frequent selections drop-down, months selector, and dates selector.

My Role

Research
Data Analysis
Project Management
UI/UX
Usability Testing

Team

Dev Lead
Two Backend Devs
Front-end Dev
Myself

Tools

Usage Data
Google Sheets
Moleskine
Keynote
Figma

Timeline

Three months
Jun–Aug 2019
Two releases

Constraints

The engineering team was always busy fixing data-related bugs and building the features requested by clients. The dev leads saw the date-picker improvement as an unimportant task with a lower priority. It took me some time and effort, and the help of our account manager to convince them before we could start the development.
The third-party JS library our engineering team decided to use for date-picker didn’t offer everything we needed. I didn’t want to compromise the UX, so I had our front-end developer look into the JS library. She worked closely with the backend developer and successfully created the missing functionality.

Problem

Our senior account manager pinged me for the second time, “Can we fix the date-picker? Customers are finding it hard to select longer time periods”. I promised to look into it the following week and keep her posted.

Process

What’s wrong with the existing date-picker

The existing date-picker doesn’t allow you to input dates. One can only click to select a date range. We have 1-click selections for the last seven days, last week, last month, and last 30 days. However, to select any particular month or other periods, such as the last two quarters and one or more years, users have to click on the calendar’s previous/next navigation buttons multiple times. It was a simple and error-free way of selecting a date range.

DatePicker Old Design — The old date-picker with two separate start and end date calendars. It allowed only click-based selections. Users had to click multiple times, but it was an intuitive and error-free solution.

This was not a feature request; it didn’t come from the R&D team or our CEO or sales or marketing. This came from one of our account managers. To verify this, I reached out to a few other Account Managers and asked if they received any comments/feedback on the date-picker.

Let’s study the usage data

After they confirmed, I decided to look at the usage data. One of our front-end developers, who mostly worked with me, agreed to participate in the research. She reached out to one of our developers and collected date-picker usage data for the last eight months.

We posted our research on Slack to encourage others. This was a prime example showcasing how data can help learn more about the problem and assist in designing a better solution.

Lean Analytics book cover — Great book on usage data analysis. See other books in my library

DatePicker raw data — A Google Sheet with usage data for eight months.

An indepth data analysis report I shared on Slack.

Solution

Ideation

Using these insights, we decided to break the date-picker in three sections:

A drop-down with a list of most frequently used options.
An extended drop-down, where the first section is editable date inputs.
Second section with the ability to quickly select months, quarters, and years.

DatePicker sketches — Sketches of all three sections of the new date-picker with a couple of variations.

Implementation

I shared these sketches with our dev lead for getting his input on the efforts and time it would take to build. He suggested we break it down into two releases as the second tab was a unique UI, something the JS library they were exploring didn’t support.