Rethinking the date picker UI

Making date selection work for humans

TL;DR

We’re trying to design the most usable sign up flow in the world. Putting your date of birth into websites is inconsistent and annoying. When a friend asks you your birthday you never say the 11th of the 11th 1987 — it’s unnatural. Instead of accepting the norm, we decided to re-do the UI of our date of birth component.

Every second counts

When asking 25+ questions in one form, you need to seriously consider the patience and technical ability of your user. Most users don’t work in technology and they will turn away if they are frustrated and confused with your questions.

We need accurate information in order to give a quote so we need to make sure every question is easy to understand and quick to get through (no sticking points in terms of interaction or input).

Understanding the Question x Effort to use UI = Time Spent

Reducing time spent on each question means more questions can be asked before their patience runs out. We looked at some of the more common UI components to see where we could squeeze out those extra seconds.

Scratching my own itch

Please take this part with a pinch of salt.

Entering my date of birth into a website or app frustrates me to no end. Here are the options I’ve encountered so far:

• Dropdown (DD), dropdown (MM), dropdown (YYYY) — No one likes dropdowns. They’re gross, don’t give any hint to possible options and are fiddly on mobile, especially custom ones.
• Input (DD), input (MM), input (YYYY) — I’ve entered ‘09’ into the day field.. will it automatically focus into the month box? Or do I need to press tab? Do I know to press tab? Or have I gotta click into the next box? Who knows.
• Input (DD), input (MM), dropdown(YYYY) — No time for this.
• Calendar view date picker — Why is it defaulted to this month and year? Now I have to click the ‘<’ button 165 times to get to February 1990. How depressing, that used to be only 42 clicks.

With our flow being mobile-first and us having the desire to minimise the number of times the user has to tap or click, we wanted to create an interaction to compliment that. None of this click into dropdown, scroll down dropdown, select option, focus into input, type on keyboard, click out of input. 3 taps is all that should be needed to select 3 things.

OK, I’ve got all that off my chest now. Time to look at a solution.

Early concepts

Using JustInMind, I put together a rough example of how the interaction might work.

From first testable prototype used with users

Ignoring the actual UI, this tested very well with users. But it’s still using a dropdown, gross.

From pre-launch user testing prototype

Keeping in theme with most of our other questions, all the options are exposed. This allows the user to see their desired selection quicker and with much less effort.

Final UI

Below is the final prototype.

Our users seem to be happy with the result; the feedback has been positive and it’s also performed really well since we pushed it live. So far it has accounted for under 0.3% drop off and has the average input time is REALLY quick, even on mobile.

Modularisation

Within the signup flow, we have a couple of other uses for date pickers:

• Picking your start date
• Picking the month/year of a claim or conviction

So we decided it would make sense for all the date pickers to be built from one component, with their own variations. Here is the atomised view within Figma.

So far we have two top-level variations:

• Date of birth picker
• Single selector

Within the single selector variation there are two sub-variations, seen below.

Left: Used to select start date up to 60 days ahead of current date. Right: Used to select the month and year that a claim or conviction occurred (within last 5 years)

Having this component in an atomic form in Figma means we can easily create new variations whenever we may need them in the product. It also means we can make visual tweaks really easily. I’ll probably write another blog post about how much better Figma is than Sketch.

Thanks for reading, hopefully you found it interesting. I’m keen to hear your thoughts or comments so feel free to drop them below.

About Marshmallow: International drivers pay £100’s more for car insurance. Marshmallow is an insurtech startup focusing on offering better prices to these drivers living in the UK.