Component Redesign · Design Systems · Accessibility
Date Picker Redesign
A systematic audit and redesign of an enterprise date picker component — addressing alignment, state inconsistencies, and usability gaps across a global design system.
Project Overview
Following a visual refresh of the enterprise design system, I conducted a thorough audit of the date picker component and identified four distinct categories of problems: alignment issues, state inconsistencies, an incorrectly styled button, and several usability gaps.
What started as a cleanup became a more considered redesign — balancing visual polish, accessibility standards, and real-world development constraints. The result shipped to production and applied across every brand in the system.
Project Details
Before (left) and after (right) — the redesigned component aligned to the refreshed design system
How We Got Here
The design system had recently gone through a visual refresh — updated typography, color tokens, and component styles across the board. After the refresh landed, I ran a component-by-component audit to identify anything that hadn't carried through cleanly.
The date picker surfaced four distinct problem categories. None were catastrophic in isolation, but together they created a component that felt misaligned with the rest of the refreshed system — both visually and behaviorally.
Scope: Because this component lives in the core design system, every fix applied immediately across all brands and products. There was no partial rollout — getting it right mattered from the start.
The Problems
Four problem categories were identified and addressed. Each is documented below with the specific issues found, their impact, and how they were resolved.
Alignment issues identified during audit — unbalanced spacing, misaligned arrows, and left-aligned Today button
Missing button selected state, unthemed hover/selected states, and hard-to-see focus indicator on selected items
Left-aligned "Today" link — off-brand color and incorrect affordance for an action control
MM/DD/YYYY format tied to American conventions, and year field with limited use case
Constraints & Tradeoffs
Not every identified improvement made it into the shipped component. Two items were scoped out due to development complexity and timeline, and moved into documentation instead — a deliberate decision made in collaboration with the development team.
The date hint field is currently a custom field and not programmatically generated. Full internationalization of date formats was prohibitively complex to implement within the release timeline. Rather than delay the core improvements, we documented the constraint and provided guidance for teams working across locales.
We initially explored removing the previous/next month navigation arrows, citing accessibility concerns around redundant controls. However, depending on how a month falls — particularly when the last day lands on a Saturday — users wouldn't be guaranteed visibility of adjacent months in the calendar grid. The arrows were retained to preserve navigability across all calendar configurations.
Design principle at work: Moving items to documentation rather than blocking a release is a legitimate product decision — it keeps real improvements shipping while being transparent about known limitations. The goal is progress, not perfection held hostage by edge cases.
Outcome
The redesigned date picker shipped to production within roughly two weeks of the audit, applying across every brand in the design system simultaneously. The component now aligns with the visual standards of the refreshed system, meets accessibility expectations for interactive states, and communicates its controls with appropriate affordances.