Pixels to Product: Innovating with Design System

Agoda Engineering
Agoda Engineering & Design
4 min readAug 28, 2023

Design systems have transformed the way organizations approach the process of creating and delivering products by offering a systematic and holistic approach to design and development. This blog provides a comprehensive summary of the Panel Discussion held on August 25, 2023. During this event, experts from Agoda’s Product and Tech teams shared their valuable insights and experiences on the ever-evolving landscape of design systems and the vital integration of accessibility.

Watch the full panel discussion below.

A Glimpse into Design Systems: Foundation of Consistency

The panel discussion began with a deep dive into the core concept of design systems. As our experts explain, design systems are principles, guidelines, and building blocks that establish a consistent visual identity and user experience across a company’s digital products. This is crucial for maintaining brand coherence and user familiarity. The design system acts as a toolkit that fosters effective communication between design and product teams, offering a broad spectrum of elements, from colors and typography to reusable components and layouts.

Importance of Design Systems at Agoda

Our panelists emphasized the crucial role of design systems in Agoda’s product development ecosystem. The design systems lead, Alexander, shared insights into how the design system guarantees that all products adhere to a unified design language, eliminating redundancy and streamlining the design-to-development process.

Within Agoda’s white label team, Jeremy, who leads the design white label team, highlighted the design system’s remarkable ability to facilitate the effortless reuse of components and theming. This dynamic capability paves the way for swift and effective customization tailored to partners’ needs. The system serves as a versatile toolkit that benefits designers and developers alike, promoting collaboration and expediting the journey from design conceptualization to actual development.

Insights from Different Perspectives: Designers and Developers Unite

From a designer’s viewpoint, design systems eliminate redundant design work, allowing designers to focus on problem-solving and enhancing user experiences. With a design system in place, designers can leverage a unified framework that promotes coherent and predictable user experiences. The system’s comprehensive toolkit includes design language, UI kits, visual assets, and guidelines, fostering effective communication between design and product teams and aligning their goals and efforts.

Michael, a senior software engineer, highlighted the value of a design system in creating high-quality components that can be leveraged by teams across the organization. The system streamlines the development process, enabling feature teams to design full-page layouts and focus on business logic layers. By utilizing design system components, developers can ensure consistent UI and reduce maintenance and development costs, aligning with Agoda’s vision for future development.

Accessibility: A Cornerstone of Inclusivity

Accessibility, or the design for all users, including those with disabilities, is fundamental to creating inclusive digital products. The Web Content Accessibility Guidelines (WCAG) serve as a benchmark for creating accessible content. Rushana, an accessibility specialist at Agoda, emphasized that accessibility is a social responsibility, ensuring everyone is treated equally and promoting inclusivity.

While regulations vary across countries, incorporating accessibility is necessary for creating products catering to a diverse audience. Integrating accessibility within a design system is a strategic move that enables designers and developers to create accessible products “out of the box.” However, not all accessibility requirements can be fully addressed within a design system. Page-level considerations, keyboard navigation, and ensuring functionality across different devices require collaboration between design, development, and product teams.

Scaling Accessibility: An Organization-Wide Commitment

The panelists concurred that scaling accessibility across the organization requires a multi-pronged approach. Education, training, and upskilling designers, developers, and product managers are crucial to embedding accessibility principles in day-to-day work. Accessible design language, collaborative involvement of accessibility experts, and automated checks in the development process can contribute to achieving comprehensive accessibility.

Collaboration for a Unified Vision

Throughout the discussion, a common thread emerged: collaboration. The synergy between designers, developers, and accessibility experts can enrich the design system, ensuring it caters to all users. The iterative nature of accessibility underscores the importance of continuous education and training. By weaving accessibility into the very fabric of the design system, Agoda demonstrates its commitment to inclusivity, user-centric design, and quality assurance.

Final Thoughts: Bridging Design, Development, and Inclusivity

In this engaging panel discussion, Agoda’s experts showcased the transformative power of design systems and the critical role of accessibility. By combining design expertise, developer collaboration, and accessibility integration, Agoda demonstrates how design systems and accessibility converge to create an ecosystem that can truly serve all users.

--

--

Agoda Engineering
Agoda Engineering & Design

Learn more about how we build products at Agoda and what is being done under the hood to provide users with a seamless experience at agoda.com.