United Airlines: Rebrand & App Design System
United Airlines launched an all new rebrand for the B2C native mobile app and website in May 2024. The app launched to a total of 16.2 million users on the App Store and Google Play Store. This release of the rebrand launched a modern, yet trendy feel for the airline. I was brought in to help reimagine the native iOS/Android app experience UI while auditing the app for UX concerns. The full launch release of the rebrand will come end of 2024. Aside from reimagining the app, I helped contribute to and maintained the mobile design system in Figma as part of the Atmos Design System team. United had another huge shift from converting designers from Sketch to the one true superior design platform, Figma. All hail, Figma! 🙌
Role: Senior UX Designer
Duration Length: 1 year, 4 months (Feb 2023 - May 2024)
Responsibilities: Partner with off-shore developers to understand feasibility and lend a guiding hand to new components and design direction, work with Atmos design system team to identify changes and receive approvals for new mobile components, present designs to developers and leadership, transfer design system from Sketch to Figma (yes I know how to use auto-layout), partner with other UX designers to educate them on new design updates and guide them on best practices, help convert 25 designers to Figma. I think this qualifies me as a cult leader now.
P.S to all you creeps, you can Venmo $25 to @jennifercingatura for Figma file access 🫡
I got 99 problems and another rebrand is one of them
I was around when United launch their last rebrand in 2018 and here I am again in the year of our lord 2024 seeing another. This time around, United wanted to shed it’s usage of the purple colors and get back to basics with feelin’ blue again. The iconic United Blue also needed to be jazzed up just slightly. United partnered with a local Chicago design agency to craft an all new branding experience. Giving the United Blue a jazzy modern update along with all it’s color companions.
With this new rebranding also comes with wrangling the mobile design system to be more uniformed. Before, the mobile design system got out of hand with one off components and color usages. A lack of consistency throughout the app made parts of the flows feel different from one another. Atmos, the Design System team at United, wanted to make sure consistency is key this time around. And by gosh dang it, did I want to set up our mobile designers for success (and maybe bully them a bit too.)
Designing a design system
First, I had to translate the design system from Sketch to Figma. Believe me, I was happy to not have to deal with that design blasphemy of a program any longer. I created each component from scratch in Figma (IYKYK) and resized correctly to account for all mobile device sizes and separated the components for iOS and Android. Using the Atomic Design foundations, I broke up the design system into atoms, molecules and organisms. Things like buttons would live under molecules while things like the cart experience would live as an organism.
A utility library was created to help host most atoms that would be shared between web and mobile design system files such as colors, icons and imagery.
New phone, who dis?
Using the new components I applied them to the most complex flows within the B2C app. I saw room to include new components we didn’t have such as the full page modal as seen in iOS (Android had to be custom created, but it exists!) I introduced card formatting into the app to help break up sections on screens for easier scan ability. Working with the Atmos team and company leadership, I presented ideas for approvals. Partnering with mobile developers, I handed off screens within Zeplin and troubleshot any issues that came up during their development process during daily stand-ups.
Apart from UI work, I looked across the board for UX functionality concerns. Being that the app is owned by different squads across the larger 40+ person team, I sync’d with designers and their teams about how to update UX functionality with some flows not being updated in 5+ years. The design squads will push for said changes in future feature launches throughout 2024-2025. My work on the rebrand update would be the driving force behind guiding all designers to learn how to use the different components, layouts, colors, and imagery in the right ways. Everyone is going to be drinking this Kool-Aid now.
Writing a Design System Bible
What do you do when most of the designers at United have never used Figma or forgot how to use Figma? Well you get on your soapbox and start preaching the teachings of Figma. Joking, you write out documentation to host within the Figma experience.
United currently doesn’t have a 3rd party website to host the mobile information, like our web design system has with Storybook. So using Figma is the next best thing we have to gather all documentation together. Using Figma’s component and variant documentation feature, I wrote up usages for each component and their respective variants. I provided documentation sheets for designers to see all the different states, their usages, and do some gentle bullying on how not to use specific components. Basically I wrote a Figma bible, so maybe this does make me some sort of cult leader after all.
Check out a sample of that component bible documentation below.
