ATLAS DESIGN SYSTEM - TRAVELPORT
Atlas is a design system that offers a cohesive and efficient product development experience. It serves Travelport's digital organization by streamlining both design and development processes.
Position:
Senior Product Designer and UX writer.
Team:
Atlas Design System
Timeline:
2019 - 2024
Daily tools:
Figma
Balsamiq
Github
Jira
Storybook
Zeroheight
Chromatic
Docusaurus and more…
My Role
My involvement in Atlas has provided me with diverse opportunities to contribute and learn across various aspects of design and technology.
My efforts have primarily focused on:
Delivering high-quality assets and simplifying complex systems for users
Establishing and managing design tokens
Identifying and implementing effective design patterns
Enhancing accessibility standards across the technology organization
Crafting clear, engaging documentation
Collaborating closely with developers to ensure seamless design-code alignment
Promoting system adoption through effective communication, workshops, and migration resources
Mentoring designers on optimal design system use and encouraging "local library" creation
Overseeing design tasks within the system project
Collecting and analyzing user feedback and metrics
Optimizing end-user experience
Leading a workshop on the Atlas Design System for the broader Travelport design team.
The Challenge
Atlas is Travelport's first design system. Previously, designers and developers created every part of the user interface from scratch. This led to inconsistencies across Travelport's wide range of products. Without a unified reference point, common approaches and best practices were often overlooked. As a result, this lack of standardization affected both Travelport teams building applications and the company's end users.
Why a Design System works
A design system is composed of reusable tokens, components, and patterns governed by clear standards. These elements can be combined to build various applications. Design systems significantly reduce inconsistencies, promoting scalability, efficiency, and uniformity in design and development. The Atlas Design System was created with these objectives in mind. Today, most tech companies view design systems as essential and valuable products.
The Atlas Ecosystem
Design library : Figma
Code repository: Github
Front-end workshop: Storybook - builds, views and tests components through Chromatic
Code package: A code library packaged and published to the organisation
Documentation sites: Documentation sites using Zeroheight and Docusaurus platforms
Fundamental Achievements of Atlas Design System
[AND MY IMPACT ON THOSE ACHIEVEMENTS]
From associate to senior designer at Travelport, I supported the creation and refinement of the design system. Throughout this journey, I consistently showcased how the system enhanced our workflow efficiency, elevated our design standards, and bolstered accessibility at various stages of its development. As the system matured, I demonstrated its growing positive impact across the organization.
Consistency and Speedy Delivery
Looking at a simple UI component like a button. A design system ensures consistent spacing, color, radius, and typography. This consistency eliminates the need for designers and developers to repeatedly recreate the same button, reducing minor decisions and redundant work.
Without a system, varying interpretations of the button could lead to subtle differences, causing UI inconsistencies over time. This traditional approach is slow; a design system, however, speeds up delivery. Atlas, serving as a single source of truth, effectively solves this problem.
Consistent Digital Branding
An audit of buttons in Travelport's products before the Atlas Design System revealed how even a simple component could be designed differently. This visual inconsistency affected not only user experience across Travelport’s platform but also impacted the company's brand presence. Each product had a unique look and feel, lacking cohesion. A design system helps create memorable online branding that distinguishes the product from its competitors.
Travelport's product offerings before the implementation of the design system. Each product had a distinct look and feel, lacking cohesion and not seeming to belong under the same brand umbrella.
An example of how even a simple component, like a button, can start to misalign and be interpreted differently in the absence of a single source of truth.
Button variants available in the Atlas library. These are the button source of truth for all digital products in Travelport.
Accessible Design and Code Principles
Consistency in Interactions
The design system implements uniform solutions across devices, screen sizes, and platforms. From an accessibility standpoint, managing default, hovered, pressed and focused patterns was especially important. This approach provides a cohesive user experience.
Text and alt text
Atlas supports and provides standards for text options for all content to support various assistive technologies including visual reading and audio via screen readers. Giving development specifications and providing guidelines on labelling, alt text for accessibility was a daily part of my role.
Colour Accessibility
Components avoid relying solely on colour for conveying information. All tokens and their combinations maintain a 4.5:1 contrast ratio for standard text and 3:1 for large text and graphics to ensure visibility for all users.
Working on a design system requires deep knowledge of accessibility standards and the ability to educate others about them. For the past five years, accessibility has been at the forefront of my work on the design system. Creating accessible components, patterns, and guidelines for users was a core part of my role. Even when dealing with complex products, I consistently advocated for the most accessible experience possible.
Increasing design system adoption
Adoption and usage of the system remain key challenges throughout its lifecycle. While the system offers clear benefits, gaining buy-in can be difficult when people are used to their existing ways of working and are resistant to change.
Demonstrating the power of Atlas
Early in Atlas, Travelport unveiled new branding. The design system team had a few weeks to update tokens, components, and patterns to interpret the new identity for Travelport digital products. This occurred during the initial stages of adoption. With a small number of teams already committed to Atlas, the team leveraged the rebrand to showcase the design system's agility in supporting fast changes across products.
Teams that had adopted Atlas implemented these branding changes within two weeks. In contrast, teams yet to adopt Atlas estimated months to make these changes, as each style adjustment required manual implementation. This exercise proved to be a turning point in demonstrating the design system's value, gaining buy-in from key figures within the company.
Travelport's pre-2020 branding. These components were developed during the design system's early stages. The new UI uses the same component and token source of truth. By consuming an update, designers and developers could refresh their files with minimal manual effort.
Creating community and culture
A design system needs champions. Without advocates promoting its value, it's challenging to convince stakeholders, product managers, developers, and designers of its worth. While design systems require investment in time and resources, their efficiency is hard to demonstrate without supporters.
Gaining support means cultivating a culture and community around the system.
Atlas Guilds
Atlas has set up a Design and Developer Guild to connect the core team with our key consumers. This guild holds monthly meetings with the design and engineering teams and the Atlas core team. As the driver for this sessions I helped create better communication between design and development, which can sometimes feel separate. Atlas also offers spaces like Stack Overflow, GitHub forums, and Slack channels for people to ask questions, provide feedback and report bugs.
Knowledge sharing
Atlas has played a central role in knowledge-sharing sessions. On these sessions I showcased new Figma features like "auto-layout" and "dev mode," promoted best practices for file organization, and encouraged designers to create their own local Figma libraries using Atlas as a foundation.
The Atlas feedback loop
Topics I discussed at Atlas Guild meetings.
Creating the Atlas Design System
Atlas began as a single Figma library housing essential design assets. These assets were carefully selected by auditing products and determining which elements would provide the most value. As the system grew, developers joined the team to create an Atlas React library. Since then, both libraries have evolved significantly. This evolution has been guided by the need for flexibility, atomic design principles, and how users actually interact with the libraries in practice.
Building components
As a designer, I adopted atomic design principles early in the library-building process. This methodology, introduced by Brad Frost, breaks down interfaces into fundamental "atoms", the smallest parts of an interface. These atoms combine to form "molecules", which then create larger "organisms" that compose the interface. This approach enhances flexibility and maintainability in design systems.
Even now, if a component isn't built in Figma using atomic principles and base components, it's difficult to make changes quickly and easily, identify breaks, and maintain the system appropriately. This thought process was also adopted by development.
Alignment between design and development
Initially, the development team didn't embrace the atomic design concept. I advocated for replacing the outdated development library with a new one that incorporated atomic and true systematic thinking. Without atomic principles in the development library, quick changes and system maintenance became challenging. Eventually, after proving its success in Figma, the development team adopted this atomic approach when creating the next-generation Atlas library, "Atlas UI." Now, both Atlas libraries share the same atomic structure.
Documentation
Design system documentation is a living representation of the system at any given moment. As the design system grows, the documentation evolves—adding new content, adjusting existing information, and removing outdated elements.
As a key member of the Atlas team, one of my primary responsibilities was overseeing the design system documentation, focusing on UX/UI aspects while also supporting more technical content. This role required a diverse skill set, including:
Creating clear examples and illustrations
Writing accessible words, considering that English proficiency varied among team members
Explaining complex concepts effectively
Maintaining a keen eye for detail
I particularly focused on organizing content in a user-friendly and predictable manner, ensuring it was easily consumable for all users of the system.
Atlas.Travelport.Com
Platform as of 2024 - Zeroheight
Design system documentation consists of guidelines and resources that establish a product's design and development standards. It fosters a shared language and understanding about the approach to design and development across various teams and projects.
Atlas’ documentation includes guidelines on typography, colour palettes, spacing, iconography, UI patterns and other design elements. It includes code snippets and additional developer resources.
