Expedia Group, 2022Calendar UI unlocked.
Context / The Expedia Group Design System (EGDS) was widely adopted across Expedia Group products, enhancing traveller experiences for booking hotels. However, additional components were needed for vacation rentals, suppliers, and partners tasks, particularly for managing bookings through calendar-based interfaces.
Objective & Approach Evaluate and migrate calendar components to EGDS, providing solutions for all traveller, supplier, and partner experiences.
My role / Lead Designer, teaming up with another designer and a small group of web, iOS, and Android developers.
Absorbing knowledge and defining paths.
Embarking on this task was daunting. We needed to become experts in Vrbo’s Baseline Design System and understand the non-hotel use cases requiring new components. We immersed ourselves in Baseline's ecosystem, exploring its components and technical feasibility before starting our initial concepts.
Images / Snapshot of discovery work assessing Baseline components and initial concepts
Enabling flexibility without reinvention.
We began by focusing on Vrbo's availability calendars as it would be the first use case for the new components. After thorough exploration, we devised a strategy to create highly customisable calendars structurally managed by EGDS but flexible for product teams in layout, selection UI, and complete content control through Day templates.
Images / Layer structure for Calendar day cell, Demo of availability calendar showing contextual messaging
Simplifying to resolve accessibility issues.
Our audits and insights revealed usability challenges in existing calendar experiences, including poor contrast, colour overuse and frustrating keyboard navigation. We prioritised improvements to ensure accessibility and usability for all users.
Images / Accessible UI treatments and colours for teams to use, Intuitive and expected behaviours for keyboard navigation
Outcome & ImpactDelivered a versatile suite of calendar components, empowering teams to take ownership of design patterns they create.
Deliverables / Design tokens, Components, Patterns & Templates, Prototypes, Motion design, Documentation & Specs, Training resources, Competitive audits, Onboarding, Support
9
🫱🏽🫲🏻 Key use cases unblocked with new calendar components, accelerating progress on product roadmaps.
Images / Themed calendar UI and components, Day template toolkit, Motion between week and month views, Vrbo availability calendar designs, Calendar day template graphics, Snapshot of usage guides and playground files
“Heeran is a super talented designer who is very easy to work with. He is thoughtful, seamlessly collaborates with peers and partners, and designs simple solutions to complex problems. He demonstrated all of these skills designing a new complex calendar and date selection component system with another design system designer (who was based on the opposite side of the world). I’d work with Heeran again in a heartbeat.”
Travis Fleck
Role at Expedia Group / UX Director
