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

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 room for improvement. (Is there anything, expect things not designed by humans, where this is not the case?) Here’s what she wrote:

“Amrinder, I’m 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 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.

DatePicker report page 1 DatePicker report page 2 DatePicker report page 3 DatePicker report page 4 DatePicker report page 5 DatePicker report page 6

Solution

Ideation

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

  1. A drop-down with a list of most frequently used options.
  2. An extended drop-down, where the first section is editable date inputs.
  3. 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.

Final Designs

Here are the finalized designs I created in Figma.

DatePicker drop-down
The new date-picker design with most used time periods as default options.
DatePicker Dates View
Dates view offer editable date inputs plus easy selection of dates. The Months bar at the bottom allows users to quickly jump between years and months in one click.
DatePicker Months View
Super easy way to select multiple months and quarters along with one click actions to do the same.
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 the date range spans two or more years.

Outcome

23%

selected “Last Month” up from 8%. This indicates we really made things easier and faster for our users.

8%

selected the “Last quater” option which we added based on usage data. Earlier this selection would take multiple clicks.

43%

selected “Custom Dates” down from 85%. This indicates people started using the default options more.

There was no change in “Last 30 days” option usage. It remained same at 4-5%.

What I Learned

  • Encourage account managers to actively share user problems and feedback
  • Quantitative data can be beneficial to make design decisions
  • Spending focused time and effort can yield valuable insights
  • People are ready to step up and take responsibilities if given an opportunity

More Projects