Amrinder Sandhu

Hire Me

I’m available to join full-time from May, 2020. Email Me

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

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

Problem

Our senior account manager pinged me for the second time, “Can we fix the date-picker?”. I have been postponing it for a few months as the existing date-picker was working fine but there was definitely a room for improvement. (Is there anything, expect things not designed by humans, where this is not the case?) Here’s what she wrote:

“Amrinder having a huge problem with the date picker and the “custom” time period. Having to click through the months when I want to do a whole year or more is too many clicks. Also when using the picker, having the start date same and changing the end date is near impossible. Any chance we can go back to the old way where we could manually input year if we needed?”

— Our account manager on Slack

I promised to look into it the following week, and keep her posted.

Process

What’s wrong with the existing datepicker

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

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

This was not a feature request, it didn’t come from 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 developer 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 8 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 six months.

An indepth data analysis report I shared on Slack. It took us two weeks to collect and analyze the data and come up with an analysis.

Solution

Ideation

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

  1. A drop-down with list of most frequently used options
  2. An extended drop-down, where first tab is editable date inputs
  3. Second tab with ability to quickly select months, quarters, and years
DatePicker sketches
Sketches of all three sections of the new datepicker with a couple of variations.

Implementation

I shared these sketches with our dev lead to get his input on 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.

The new datepicker design with editable date inputs, an easy and innovative way to jump to previous months in one click, and select multiple months and quarters.
DatePicker alternate months view
The alternate direction I tried for the months’ view. In this design, it is easier to select months within the same year. However, there is more cognitive load when date range spans two or more years.

What I Learned

  • Encourage AMs to actively share user problems, feedback and requests
  • Use quantitative data more often
  • Dig deeper to pull insights
  • People are ready to step up if given opportunity

More Case Studies


Selected Projects