How might we...

make it easier and quicker for users entering their date of birth?

User pain points

The majority of date of birth inputs out there use one of the following solutions:

Dropdown = Lots of scrolling

Dropdowns can mean endless scrolling for your birth year—a real headache, especially if you're not a spring chicken anymore.

Calendar = Lots of clicking

The calendar/date picker often requires endless clicking through months to reach your birth year, making the journey to your birth year a bit of a digital odyssey.

Some calendar inputs have a dropdown for the year, which is a definite improvement over clicking through all 12 months for each year of age. Imagine being 100—that's a whopping 120 clicks! 😳 

Unfortunately, the one I was dealing with for this project lacked that time-saving dropdown feature.

Discovery

Popular design systems bench marking

Research - UX articles and studies

​

Fortunately, during the discovery phase, I came across a valuable Medium article that led me to one of my trusted sources for accessibility and usability ideas: gov.uk. They had already tested best practices for inputting date of birth, and I picked up some great tips from their blog post Asking for a date of birth.

👍 Testing using a text input for the year yielded significantly better results than the dropdown, with users completing the question more quickly and expressing relief at avoiding the usual lengthy dropdown.

👎 However, less tech-savvy individuals encountered challenges, such as attempting to type into the dropdown and facing difficulties with scrolling. Additionally, after navigating the initial dropdowns successfully, users expected a dropdown for the year but upon clicking encountered none. Despite being issues for a minority, their team aimed to find a solution that catered to everyone's needs.

📅 Calendar pickers are recommended for events close to the current time or date ranges, they didn't perform as well when tested for dates in the distant past.

The winner?

3 seperate number fields

Why?

No added interaction cost—users don't need to hunt for a number they already know. This pattern cuts down on potential errors, boosting data capture accuracy. Without extra menus and scrolling, the risk of selecting the wrong number is minimised.

Design

Now that I had a game plan, it was time to see what other components were similar in the design system that I needed to make sure our style matched up with. Then, I dove into my component building checklists...

Deliver

Date of birth component

Below, you can see the intricacies of the Figma component, including all its properties and its design for flexibility in future iterations.

States

Input text styles

Developer handover

Detailed developer handover notes, covering interaction states and behaviours, error handling, stress tests, and focus order.

States

Avoiding errors

Error cases

Auto tab

Stress test

200% text size

Focus order

✌️ And that's a wrap on the date of birth component journey!

Leveraging insights from gov.uk, I've successfully enhanced the user's experience in inputting their date of birth—making it easier and quicker. A flexible, robust Figma component is now ready for the entire team to use. I've handed over all the nitty-gritty details to our developers, and I'm excited to see it come to life.