Back to work

Modernising and speeding up
date selection

Date pickers seem simple, but they're not. Ours had long been a point of friction for users — outdated styling, clunky behavior, and limited flexibility. With 166 instances across the product, reimagining the experience was both high-impact and high-stakes.

Scope Component Redesign
Context FreeAgent · 166 instances
Category Design Systems · Accessibility
Focus UX · Interaction · Speed
15 March 2025 March 2025 Mo Tu We Th Fr Sa Su 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Tab ↹ ↑ ↓ ← → Enter ↵ DATE PICKER · 166 INSTANCES · ACCESSIBILITY

Replace friction with clarity and speed

The goal was to replace an outdated third-party date picker with a custom component that was visually aligned with our brand, faster and more intuitive to use, and fully accessible.

This needed to serve both everyday users and power users like accountants who work with dates constantly — getting it right meant reducing friction across the entire product.

A component that was holding users back

  • Disconnected visual appearance from the rest of the UI
  • No quick navigation between distant months or years
  • Rigid input field with poor error tolerance and minimal guidance
  • Poor accessibility for keyboard and screen reader users
  • Needed to serve both basic and power users with different input preferences
  • 166 instances across the product meant any improvement would have wide impact

Custom-built, accessible, and flexible

  • Modern, on-brand design aligned with the full design language
  • Button selectors enabling faster month and year navigation
  • Forgiving text input supporting multiple pre-selected date formats
  • Complete keyboard navigation and screen reader support
  • Technology updates improving long-term maintainability
  • Comprehensive documentation published on the FreeStyle reference site

Research-led, tested with real users

1

Benchmarking & Research

Audited the existing component against industry design systems, identifying pain points in format handling, navigation friction, and accessibility gaps.

2

Cross-Functional Design

Collaborated with design system engineers and designers to develop solutions addressing both UI and systems-level challenges.

3

User Testing & Beta

Validated concerns through structured testing with real users. Beta feedback confirmed the component was 'cleaner,' 'faster,' and easier to navigate.

4

Documentation & Rollout

Released the component in the UI kit and published comprehensive guidelines covering accessibility and formatting on FreeStyle.

Consistent, accessible, product-wide

Modernised Experience

Consistent, on-brand date selection across all 166 instances — bringing the component in line with the rest of the product.

⌨️

Full Accessibility

Complete keyboard navigation and screen reader support delivered for the first time, meeting accessibility standards across the product.

Faster Date Navigation

Reduced interaction time for long-range date selections — particularly valuable for accountants and power users.

🎯

Eliminated Formatting Friction

Forgiving text input accepted multiple formats, removing a significant source of user error and frustration.

Want to talk through this work?

Get in touch →