ATMOS Design System at United

Atmos is United Airline’s brand-new design system. The goal was to create a centralized system for both design and development.

 
 

Role and contribution

I was the lead UX and visual designer during the creation and maintenance of Atmos. The internal United Design System team worked with Brad Frost, Dan Mall and Josh Clark and the whole Big Medium team to get things set up and running smooth.

My responsibility was supporting the system, education of internal and external teams, as well as the visual design of new components.

 
 
smartmockups_kcwbavsi.jpg
 

From the ground up

I was pulled into the Atmos team early on, just after the team had earned buy-in and a hand full of basic components were starting to take shape. In this phase, the focus was on making styling decisions, nailing down best practices and developing a sturdy foundation. There was a lot of discussion regarding “the need for tertiary buttons” and “if #006080 was accessible on certain features.”

As a design team, we were also working to build out a functioning sketch library of easy-to-grab symbols, perfecting education on the grid system and creating/editing content for the reference site.

Suddenly, in the midst of working through the details, there was also a growing need for better organization, company-wide education and general automation. This is where we learned what design systems are all about: people.

 
 
smartmockups_kcw9migh.png
smartmockups_kcw9eps7.png
 

Creating a system for the system

While it is important that the system be efficient, well-thought-out and speedy, it became clear to us that to get there, you need people behind you. Education on the ins and outs of Atmos, constant updating of the robust reference site full of best practices and individual design reviews became the norm. We worked hard to make each team member an Atmos expert and instill within them a global viewpoint.

Atmos is still a work in progress, however I am blown away by the difference it has made in only 2 years time. Below are are a few examples of Atmos tools and components created for the system. For a more in-depth look at the process, I am happy to sit down to discuss the Atmos process from beginning to current state.

 
 

Component creation: A Lightbox Modal for image-heavy content

Accessible color palette and icon library

Extensive, wire-framing, competitor analysis and research for a shopping cart

Promotional and educational marketing

Study on line length, it’s effect on reading fatigue and impact to visual design

Component creation — Toggles and Selectable Cards