Creating a design system for a leading travel company
Overview
Overseas Adventure Travel (O.A.T.) is a leading travel company transitioning from print-first to a more web-focused experience. I helped establish a foundation for web growth with a new design system aligned to a major CMS launch.
Launched new CMS on schedule
$120K projected savings
120+ hours of developer & designer time saved
Reusable components for faster development
Timeline
Q4 2024–Q2 2025
Role
UX/UI Designer
Problem → solution → outcome
The problem
O.A.T. lacked a cohesive design system, leading to inconsistent page designs, varying buttons, type sizes, and typefaces. With a new CMS on the horizon and a renewed focus on web, the team needed a scalable system to establish visual consistency and support future growth.
Key constraints
Accessibility requirements (WCAG 2.1 AA)
Tight delivery timeline aligned with new CMS launch
Multiple teams consuming the system
Need for scalable components across varied content types
The approach
I partnered with front‑end and back‑end teams to ensure the design system was both visually cohesive and practical to implement, covering typography, color, buttons, icons, and reusable components with clear documentation.
I designed a comprehensive design system to be used across the web experience, covering typography, color, buttons, icons, and reusable components, along with clear documentation. I collaborated closely with front-end and back-end teams to ensure the system was both visually cohesive and practical to implement. Accessibility was built in from the start, and the system was structured using atomic design principles to support consistency and long-term scalability.
The outcome
The design system improved consistency across new and existing pages while reducing time spent on design and development, enabling faster delivery and more reliable QA. Designers and engineers were able to work more efficiently, and the team successfully launched the new CMS on schedule.
Design system deep dive
A flexible, scalable design system to ensure consistency, accessibility, and efficiency across O.A.T.’s web experience.
Typography
Switched from Open Sans to Circular, upgrading from a common free typeface to a more distinctive, branded typeface.
Created a flexible system that supports all screen sizes, with defined use cases, font sizes, weights, responsive scaling, and line heights, ensuring consistent styling and clear hierarchy across the site.
Colors
Developed a full suite of colors with tints and shades to support accessibility, hierarchy, brand recognition, and visual appeal.
Designed to meet WCAG contrast standards, ensuring readability for all users and helping maintain consistency across diverse page types.
Buttons and chips
Created an assortment of buttons and chips with multiple variations and interaction states to guide navigation and usage.
The system ensures accessibility, hierarchy, and consistent behavior, improving usability and reducing confusion for end users.
Components
Built reusable components to streamline design and development, reduce duplication, and maintain visual and functional consistency.
Components accelerate project delivery and ensure a unified experience across the site.
