building a design system
designing and developing atomic components for play travel
project background
Play travel is a consumer website with the ability to build your own packaged holiday. They needed a system of designed components that could be used in a modular way across multiple product types and remain consistent in both mobile and desktop views. The system would need to be available to many departments both internally and externally. Updates to the design system would also need to be managed via workflow and allow for multiple changes in a single release cycle.
Client
Play Travel
Period
2021-2022
Atomic design is the idea that smaller design elements combine to form larger components. Utilising this methodology, foundational objects were designed and a style guide provided to the business on how to use.
atomic principles
Larger more complex components were then built based on these elements, and multiple variations created quite easily.Atomic design is the idea that smaller design elements combine to form larger components. Utilising this methodology,easy to access and clear workflows
A design system is only valuable if it is easy to access for various applications. Using Adobe’s creative cloud as a backbone, asset libraries were created and shared across the marketing and development teams.
Any business stakeholder could access the style guide website, allowing feature requests to be more detailed.
iterative
The web is always being updated, and this design system was no exception. Following business input, mock development and testing, component libraries were updated and those updates pushed to relevant business teams for delivery on a weekly basis. With over 300 components, the ability to deliver consistent and timely improvements to the front end experience was important.