Taking Flight: Lessons Learned on Adopting Figma at United
By Jessica DeJong
United Airlines
Helping ORION, United's design system, take flight
Services
Program Management
UX Design
Visual Design
Content Strategy
Front-End Development
United Airlines℠, one of the world’s largest airlines, needed a major revamp of its existing employee-facing design system, called ORION.
To assist with the rollout of updates to ORION, One North’s experienced UX, design and front-end development teams collaborated with United’s design system team to create an updated informational documentation site and reusable software library for the components of the ORION system. One North helped United increase scale, velocity, and expertise—and promote widespread adoption of the tool.
This upgrade established a standardized documentation approach for components that are directly referenced live in the documentation site. This allowed for seamless updates, ensured consistency in conveying usage guidelines to designers and developers, and allowed for scalable content on component pages after the rollout of ORION 2.0. Together, we created a living, breathing, and universal source of truth for not only the components that the United team uses, but also, how the work gets done.
A systematic approach
During the discovery phase, One North held two working sessions with United’s design system team and uncovered opportunities to help improve their ways of working, processes, and documentation, as well as introduce automation to the ORION system. This discovery highlighted the imperative to expand system documentation to encompass both mobile and desktop, enhance adoption among both design and development teams, elevate the system’s impact from a branding perspective, and, ultimately, create a more holistic design system.
The initial scope of the project was to work alongside the ORION 2.0 design system upgrade effort, focusing on two separate workstreams: design systems documentation and building a reusable component library. Together, One North and United later found that a blend of the two workstreams would automate the software tool library. This would ensure that the software was continually updated and linked to a dynamic documentation site along with the UX visual components of the design system.
Architecting and automating ORION’s documentation
The design system documentation team created a new visual brand identity and information architecture for the ORION documentation site—including both the individual component documentation and a way of working governance model for all designers, developers, and contributors.
One North also leveraged a commercial platform United was previously utilizing, helping the design system team to discover new features and understand the best way to utilize the platform’s architecture. The platform is a central hub for publishing documents live and enables the United team to automate any documentation changes, allowing for live linking with real-time updates from Figma and code edits directly to the documentation site. Our updates to United’s documentation process eliminated the need to manually update content and screenshots each time there were changes to the Orion design system components. Ultimately, this freed the United team to focus on other critical tasks and priorities.
Streamlining development
One North partnered with the ORION development team to assist with actualizing the web component library. Software development efforts centered on three main objectives; auditing the existing codebase, creating automations to enhance development, and supporting these efforts with new processes.
We first focused on integrating Storybook. For ORION, Storybook acts as an interactive hub to view and document components in isolation. This allows the core team to view and test live components while simultaneously providing documentation for adopting users.
Our next step was to make the process of build –> test –> share easier for the ORION core team. To do this, we used GitHub actions to listen for significant code changes and automatically create a linkable Storybook instance to review updates. This technique allows for in-progress development to be viewed by developers and non-developers alike, increasing the velocity, ease, and quality of component reviews.
Next, we set to work on securing the codebase. The One North development team pored over the repository, making 25+ recommendations on best practices and helpful methodologies. Additionally, extra protections, such as automated code linting, vulnerability scanning, and pull request/bug report templates, were put in place to help safeguard the codebase moving forward.
Finally, we eased the development lift on releasing the finished product. The One North team added additional automations to generate changelog updates, created tailor-made releases for specific JS frameworks, and published the entire package to their enterprise npm library. One North helped build key components in the library and will provide ongoing support of the system to ensure best practices.
Increasing adoption and morale
One North designed a variety of ORION swag items to help support a successful launch and promote adoption across teams. Leveraging the ORION logo and tagline developed by our team, we created presentation templates and video call backgrounds, curated amenity kits (T-shirts, bags, stickers, lanyards, and posters), and helped put together an online store housing the merch. This not only helped to elevate the design system and amplify the ORION brand, but it also boosted team morale—instilling pride in the team’s work and demonstrating the power of branding, even in internal initiatives.
One North has been an excellent partner helping us get our ORION 2.0 release across the finish line. They have shared best practices and delivered significant contributions to our design system, particularly with the documentation on our reference site, the development of our first UI component library, and migration to Figma. Additionally, their design team has helped us create a strong brand and visual identity for ORION that has helped increase awareness and adoption of the design system and fostered a sense of pride within my team, who are often seen sporting their ORION T-shirts and hoodies.
A united team and end-to-end solution
The key to this project was collaboration. One North and United’s system designers and developers operated as one team to ensure the greatest amount of visibility and collaboration on both ends of the project. Working closely together, we delivered an end-to-end solution through the creation of a new component library and shared ways of working—empowering Orion to be as valuable a tool for developers as it is for designers.
One North remained flexible in processes and timelines, co-developing the project retrospective and next steps after each phase to maintain alignment with United’s ways of working and project management. One North also created hand-over goals at the end of each phase. This helped position the United team to successfully take ownership and maintain the system on their own—aiding with onboarding and encouraging streamlined adoption. Together, One North and United have created a cohesive, intuitive and scalable design system that can be easily evolved to meet future demands.
By the Numbers
03
Visual identity collaboration sessions 05
Collaborative process sessions 20 +
Discover/review sessions 03
JS Frameworks now able to support ORION 85
Commits merged 24
Pull requests issued 05
Updated sources of documentation 18
New component pages 08 +
Additional support pages
Powered by perspectives on all things strategy, creative, and technology
Insights & Events
Up next
Mars
Elevating the Associate experience with content strategy
