American Airlines: Design System Adoption Study
DESIGN SYSTEM BEST PRACTICES + USER RESEARCH
THE ASK:
American Airlines had been working on their primary Design System, “Aileron”, for over 5 years with little success regarding adoption, usage, or ownership within the design and front end development teams.
They reached out to DXC to perform a full DS audit and adoption study to align on why both designers and developers alike we struggling to use the system correctly, bring to light any blockers, and offer clear solutioning for next steps.
Participation
Design Direction
Design Systems SME
User Research
Process Mapping
Client
American Airlines
Year
2024
THE CHALLENGE:
Over an eight-week period, my team and I collaborated with the American Airlines UX team to identify current obstacles hindering the adoption of the Front-End Design System, Aileron.
We needed to deliver findings, planning initiatives, roles and responsibilities aligned with the funding requests for the next fiscal year. This included outlining the technical and design recommendations to reduce barriers on adopting Aileron, enablement services to clarify stakeholder requirements and governance responsibilities, and a prioritization plan that outlines adoption strategies and targets.
Services Provided
Ethnographic Research
Contextual Inquiry
Ecosystem Mapping Workshops
User Interviews & Focus Groups
Product Demos
Process Mapping
Peronas
PHASE ONE
Platform Assessment
PHASE TWO
Vision & Strategy
PHASE THREE
Sythesize & Share
THE PROCESS:
PHASE ONE
FIT-GAP ANALYSIS FOCUS
Developer Integration Issues
Documentation Gaps
Limited Adoption Rate
Lack of Community Involvement
Impact on User Experience
The system faced gaps in integration, documentation, and adoption, limiting its ability to serve as the unified source of design and development standards. To overcome these challenges, Aileron needed to evolve and align with modern development practices, improve developer experience, and build a more collaborative and scalable design ecosystem. This evolution was essential to standardize the .com experience and enable future expansion to other digital touchpoints across the enterprise.
Fit-Gap Recommendations Based on Results
We found that the best ways to ensure a successful transition to React & Angular while positioning American Airlines for long-term digital transformation included the following:
Adopt Native Codebase to the Design System: Since AA has a massive FrontEnd staff, requiring them to learn new Web Component languages and systems wasn’t going to improve adoption or compatibility. Crafting components in the codebase they will dwell within made the most sense to the development and leadership teams.
Establish a Community-Driven Model: Create an open-source-like environment where external development teams can contribute to the design system. This approach will foster collaboration and innovation, while the core team will manage and oversee the architecture, governance, and community contributions.
Expand the Core Team: Supplement the current team by adding key roles such as a community manager to drive content creation and a group of specialists who will support pilot teams and ensure the timely resolution of ad-hoc issues.
Build Out Comprehensive Training and Documentation: Leverage AI to automate documentation capabilities with Storybook, along with additional self-learning videos, workshops, and peer-to-peer training. This reduced the learning curve for new teams adopting the system.
Track Key Metrics: Establish clear KPIs to monitor adoption rates, community contributions, component usage, and the effectiveness of support and training programs.
VISION & STRATEGY
PHASE TWO
TECHNICAL SOLUTION OVERVIEW
For teams that prioritize ease of adoption and immediate productivity gains, Native Component Packages with a common design repo will provide a strong advantage for seamless integration and reduced learning curves. Automating, especially with tools like Angular and Storybook offering a model to follow. However, the long-term success of this approach hinged on careful planning, strong governance to ensure consistency across all platforms, and added maintenance and documentation.
We defined the responsibilities between Aileron Designers and Developers by clearly outlining where each team had ownership.
The Design Team’s Ownership:
Figma: Shared design platform for creating mock-ups that will be replacing their previous Sketch-based ecosystem.
Design Tokens: Shared Across Angular and React libraries. Ensures consistent color, typography, spacing, etc.
The Development Team’s Ownership:
Lerna.js monorepo: Manages Design Tokens, Angular and React component packages, and Storybook.
React and Angular Native Component Package: Native components built using design tokens.
Storybook for Angular & React: Auto-generated documentation for both frameworks.
Build & CI/CD Pipeline: Automated builds and versioning, ensures components and tokens are properly built, tested, and versioned.
DESIGN ASSET MANAGEMENT RECOMMENDATIONS
A 3-Tiered Design Asset Hierarchy:
A scalable hierarchy in Figma to support a multi-layered atomic design approach, transitioning from a single platform to a multi-platform model.
Global Designs
Rule: If an element or component is shared across two or more Platforms, it should be classified as a Global Design Component.
Platform Designs
Rule: If an element or component is shared among three or more Products, it should be designated as a Platform Design Component.
Product Designs
Rule: These consist of unique components, pages, and layouts intended for use within a single Product.
FIGMA & STORYBOOK GUIDANCE
Once we had a scaled approach to the Aileron re-work, we brought in Figma & Storybook experts that were able to help guide the team through best practices on using the Figma platform specifically for Design Systems while ensuring the Storybook repository is templated for success with clear instructions and documentation requirements for use. This team eventually grew to include React & Angular Developers that were able to cleanly convert the previous DS to their new respective codebases.
Since the rework was going to take time, we moved to the last phase of work.
With 34 digital properties already using Aileron, it was important for us to ensure that adoption was able to happen at scale while ensuring that the design & development teams are able to navigate and execute within the Design System without the pain points we found earlier. In order to capture metrics on this for future analysis, we deployed a two-fold approach via Figma and Storybook built-in tools to measure success without 3rd party plugins or trackers.
SYNTHESIZE & SHARE
PHASE THREE
FIGMA ADOPTION CAPTURED BY:
Component Usage Analytics
Library Usage Across Teams
Style & Token Usage
Update Propagation
STORYBOOK ADOPTION CAPTURED BY:
Story Coverage
Code Analytics & Repos
Component Update Frequency
Visual Regression Testing
AA.COM SQUADS USING AILERON
Once we determined how we were going to measure, next was defining our success criteria.
ADOPTION KPIs
Governance Framework
The Aileron team has clearly worked to delineate roles and responsibilities over the last few years. However, this team has low authority within the American IT ecosystem, and therefore, strong governance will require the team to lean heavily into leadership influence rather than traditional governance for enforcement mechanisms. The governance model we presented focuses on influence within three workflows: Strategic Planning, Community Enablement, and Continuous Improvement as workstreams. Currently, only Community Enablement is operational, but road mapping will be built into this workstream as thing move forward.
This framework aims to formalize the approach to managing stakeholder engagement and communications through a regular meeting cadence, road mapping, and resource management to allow the team to gain influence in the organization, with adoption to follow.
FRAMEWORK OVERVIEW
FRAMEWORK RESPONSIBILTIES
THE RESULTS:
As all design systems are living and breathing ecosystems that need constant iteration and refinement, so too is Aileron now on track for success with full partnership from my team and the client’s UX department.
We were able to capture some significant metrics to inform the KPIs while aligning on Next Steps for the next phases of work.
Engagement Metrics
NEXT STEPS: FOundational Enablement
NEXT STEPS: stakeholder expectations model
Why set the expectations with all stakeholders? To establish a governance framework, the we identified stakeholders to continually engage and play a role in the adoption, enablement, use, and ultimately success of Design System.
This next step is communicating and getting buy-in on Aileron's roles and expectations of its stakeholders. Remain open to their input, pushback, and feedback. It's important to highlight the mutual benefits of collaboration and demonstrate a willingness to work together towards common goals. The aim is to create an environment of mutual respect and cooperation, ultimately leading to more productive and positive interactions and a positive experience with the Aileron team.
migration analysis: FOr early adopters
Our final deliverable for this specific engagement was a detailed analysis of all products in the Aileron portfolio for reference and alignment on how to ensure that the KPIs and Stakeholder Responsibilities are approached appropriately across a large enterprise ecosystem like AA.
PROJECT RESULTS
This engagement led to a much larger scope of work that included keeping most of the team present during this Adoption Study while expanding the roster to include Design & Development SMEs to own thw heaviest areas of lifting between Figma & CSS while leading the charge in component optimizations, template libraries, and inclusion of additional platforms beyond React & Angular.
Current adoption status as of May 2025 is over ~70% across the entire digital AA landscape with full inclusion and support from all areas of business to engage and align with the Aileron team for all UX/UI product creation both internally and externally. A massive win for our team and the client as they now have a consistently growing adoption rate with full investment from leadership.