A First for Everything
Mach 1 is Delta’s first omnichannel Design System. It is a global system that ensures consistency and reusability across all Delta products, providing a more cohesive experience. Each product will now feel like it comes from the same Delta brand.
However, despite its excitement, Delta’s newly built omnichannel design system was difficult to navigate. To ensure all teams were getting the same information, a guidelines site was requested.
Former Documentation
Mach 1 was documented in Figma. For many new designers and developers, navigating an extensive design file and following multiple design frames across over 15 separate pages was quite frustrating.
Additionally, the entire system was constructed on an atomic structure. Meaning many components were categorized under atoms, molecules, or organisms. Though it is great to have this structure when building out a system, for newcomers, it makes it more complex to find what they are looking for.
Streamlining The System
🗣️ The Ask
Design and publish a reference site to serve as a one-stop shop for all key parts of the Mach 1 design system, while housing it in Figma as a prototype and utilizing Mach 1 components to represent what Mach 1 can be and is.
⭐️ The Goal
Make a complex design system as simple as possible while transporting its information into one easy-to-use site for both designers and developers.
Creating the "Site"
First, our Creative Director, Mike Hickman, created a simplified IA of the design system that consisted of Primary and Secondary pages with corresponding detail pages.
Second was determining the navigation placement. Side Nav was selected due to it providing access to all levels of the site instantly.
Third was branding. ACD Jesse Burgman and AD Bridget Walsh created a logo that connected to Mach 1's vision – Speed, Connection, and Momentum. Illustrations, crafted by yours truly, were paired with that vision in mind.
Ongoing in the background was prototyping. To make the design function like a live site, the inclusion of boolean variables, conditionals, and intentional transitions was essential.
Design Reaching All Teams
The team created a stunning, easy-to-navigate design system site for all types of users in under four weeks that made the clients, developers, and designers excited to use. I am very proud of what our team accomplished.
A Site of Design Guidance
Though prototyping looks different today than our former spaghetti string chaos, this experience showcases all talents, including motion, art direction, UX, and visual design. It is also amazing to hear that this site is still in use today.
The Team
Jesse Burgman
Associate Creative Director
Bridget Walsh
Art Director
Mike Hickman
Creative Director
Sana Advani
Management Supervisor
Sarah Smith
Group Program Director
