Designing a Scalable & Accessible Date Picker 📅

Creating a User-Friendly, Responsive, & Inclusive Calendar Component

Introduction

The component should be treated as a design system deliverable, focusing on scalability, accessibility, adaptability, and interaction across various devices. Several assumptions guided the design process:

• The component is intended for web platforms, enabling users to select dates for delivery or collection purposes.
• Documentation and usage guidance are integral to ensure broad usability and alignment with various market needs.
• Opportunities for creative flair, such as animation, were explored to enhance user experience.

Competitor Analysis

Before embarking on the design journey, I meticulously conducted a competitor analysis to comprehensively understand the current landscape of date picker components. This in-depth research identified standard features and best practices and guided the prioritisation of essential elements for the leanest version of the component, instilling confidence in the design decisions.

Fig 1.1 — Competitor landscape.

Feature Prioritisation

To establish the Minimum Viable Product (MVP) for the date picker component, I used the MoSCoW method to categorise features identified during competitor analysis. This method prioritises features into four categories:

• Must-Have
• Should-Have
• Could-Have
• Won’t-Have

For the initial implementation, I focused solely on the Must-Have features. While this process would typically involve collaboration with a Product Owner (PO) to ensure alignment with business goals, I conducted the prioritisation independently.

Fig 2.1 — Date picker MoSCoW feature prioritisation.

Low-Fidelity Wireframes

During the design exploration phase, I paid meticulous attention to detail, ideating several concepts at low fidelity to explore different layouts and interactions for the date picker component and using Figma’s Simple Design System components allowed for quick iterations without requiring pixel-perfect accuracy or auto-layout functionality, ensuring a secure and thorough design exploration process.

Fig 3.1 — Date picker low-fidelity wireframes.

Figma Design System Setup

Next, I set up the design system in Figma, incorporating local variables for:

• Colours
• Typography
• Spacing
• Border radius
• Box shadows
• Iconography

Additionally, I created a button component, anticipating its potential use within the interface.

Hi-Fidelity Design & Documentation

I developed the date picker component to a hi-fidelity version. The design leveraged nested elements and boolean properties to show or hide features, such as the delivery date label and supporting icon. Each text element included a text value property to ensure proper component usage.

Fig 5.1 — Figma date picker local components, variants and nested elements.

Hi-Fidelity Design Considerations

Accessibility

• I hid the back chevron for the current month to prevent users from selecting past dates and avoid a disabled back button.
• Documentation focused on tab orders, screen reader flows, markup, touch targets, and ARIA/content labels.
• Despite challenges, I tried to maintain an 8px gap between touch targets.

User Interaction/States

• I replaced the close icon with a cancel button for improved clarity and accessibility.
• I documented all states for the dates, including disabled (past dates), default, and selected states.

Edge Cases/What-If Scenarios

• Breakpoints for mobile, tablet, and desktop were designed and validated.
• A Spanish UI version tested scalability across different markets, considering text wrapping and localisation requirements.

Mobile Variant

An alternative design using a toast-up/sheet mechanism enhanced flexibility for responsive design.

Flair

Creative documentation for the component’s mechanism added a touch of flair, though a more detailed prototype would have been ideal with additional time.

Fig 5.2 — Figma hi-fidelity date picker component and documentation.

Summary/Next Steps

This case study outlines the process of designing a scalable, accessible, and user-friendly date picker component. Key focus areas included responsiveness, accessibility, and user experience across devices. Future steps to integrate this component into a design system would consist of:

1. Engaging in technical discussions to assess implementation feasibility.
2. Conducting a design review to evaluate the UI and component usage.
3. Documenting usage guidance for broader adoption by the design team.