Designing a Scalable Component

As part of my efforts to support the whitelabel business’s adoption of the design system, I collaborated with a design systems designer to create a date picker component.

2023

Senior Experience Designer

Rocket Travel by Agoda

Challenge

Design a proof of concept complex component that aligns with design system standards while addressing the needs of a travel platform?

Solution

I collaborated with a design systems designer and engineers to create a fully documented, multi-variation date picker component that was implemented in a reusable landing page template and launched on a partner site.

Introduction

As part of my efforts to support the whitelabel business’s adoption of the design system, I collaborated with a design systems designer to create a date picker component. This was a critical element in a proof of concept for a new, reusable landing page template designed to improve scalability and velocity for partner launches. The goal was to ensure that this component not only met the functional needs of the landing page but also showcased the potential for more complex components within the design system.

The Challenge

Historically, landing pages were custom-built for each partner launch, which limited scalability, was a heavy engineering lift for launches, and was difficult to maintain over time. To address the company’s goals of faster partner launches and platform scalability, our team aimed to create a reusable landing page template that could be flexible enough to reuse, but contain all the necessary features of a landing page. One essential functional feature of this template was a search widget, requiring a consistent and user-friendly date picker component to handle date-bound criteria for hotels, flights, cars, or activities.

Up to this point, the design system primarily consisted of simple elements. The date picker represented an opportunity to push the boundaries of the design system by introducing a more complex component that would bring consistency to an interaction that was used in many places across the ecosystem.

Initial Design

As a member of the proof of concept team, I designed the first variation of the date picker. I drew inspiration from common patterns in travel sites, including industry leaders and comparable experiences from outside the travel industry.

The date picker is likely an interaction users have encountered before so it needed to feel familiar, be accessible, and align visually with our platform’s UI.

  • AirBnb

  • Hopper

  • Expedia

  • Booking.com

Collaboration with Design Systems

I worked closely with a design systems designer to:

  • Vet the initial design and align it with the design system’s strategy and standards.

  • Document the component according to design system guidelines, including specifications for spacing, color, typography tokens, and intended use.

Component Construction

We built the date picker using existing design system elements such as buttons, labels, and headers. I created variations for mobile, tablet, and desktop screen sizes to ensure responsiveness and usability across devices.

Documentation

This project marked my first experience contributing to the design system’s component library. I learned to:

  • Document properties for design systems developers, including spacing, color, and typography tokens.

  • Write clear usage guidelines to ensure consistency in implementation.

  • Appreciate the meticulous standards maintained by the design systems team.

Cross Team Collaboration

Engineers from my team and the design systems team collaborated on the component’s development. Given the time zone differences between our teams in the US and Asia, we coordinated through late-night and early-morning calls. These sessions fostered mutual understanding of white label needs and strengthened global teamwork.

I’m proud of my role in creating the date picker component, which addressed immediate needs and demonstrated the value of investing in scalable, reusable design solutions.

Results

The date picker was celebrated across both the direct-to-consumer and whitelabel sides of the company.

Adoption

The component was included in the new landing page template, which debuted during the company’s largest partner launch of 2024.

Implementation

It set a precedent for introducing more complex components into the design system, enhancing the platform’s scalability and consistency.

Scalability

Key Takeaways

Strategically introducing complex components can elevate a design system’s utility and showcase its potential. A well-designed component can drive consistency and scalability while meeting the unique needs of a platform.

Pushing Boundaries for Impact

Effective teamwork across design and engineering—spanning time zones—is crucial for success.

Collaboration

Documenting a component for a design system requires diligence and attention to detail, providing valuable insights into scalable design practices.

Learning and Growth: