LAFC App
Scaling the user experience with a design system
Introduction
The LAFC mobile app is the central digital tool for Los Angeles Football Club fans to manage match day tickets, access BMO Stadium, and stay updated with club news. Available on iOS and Android, it offers paperless ticket entry, interactive stadium maps, concessions, and exclusive content.
My Role
Working within a collaborative design team, I was responsible for auditing existing interfaces and translating them into a unified design system. A key part of my role was participating in collaborative design critiques, where I both provided and integrated feedback from fellow designers to refine our shared component library. Co-led and maintained a library of reusable components and design patterns in Figma.
Problem
The mobile experience reached a point where manual design handoffs and one-off UI solutions became unsustainable. The absence of a scalable design system led to inconsistencies where buttons, typography, and navigation patterns varied across app modules. This created a bottleneck in the development pipeline, as designers and developers spent more time debating basic components than solving core user problems.
Goal
To design and implement a scalable design system.
Consistency: Create a library of reusable, atomic components (buttons, cards, inputs) mapped to a central token system.
Velocity: Streamline the production pipeline to launch new features faster during the MLS season.
Accessibility: Ensure every fan can navigate the app effortlessly, adhering to strict ADA and WCAG standards.
Research
The foundation of the design system wasn't built on aesthetics alone, but on a rigorous audit of existing friction points and a deep dive into industry-leading design standards.​
​​​​
​
Competitive Analysis​​
​
We conducted a comparative study of top-tier sports and entertainment apps to identify patterns that balance high-density data (stats/scores) with immersive brand storytelling.
​​​​
​
Design System Inspiration
​
We audited systems like Atlassian’s Design System and Google's Material Design 3 to benchmark our documentation standards and component states.
​​​​
​
The Component Audit
​
We performed an inventory of the legacy LAFC app, revealing inconsistency across screens that slowed down both design and development. Identified different hex codes being used for the primary color and disparate font sizes and weights. Discovered multiple unique button styles with inconsistent spacing and border radius.
​
Collaborative Iteration
​
We held multiple design sessions and included product managers and developers for their input. A/B testing was used on internal prototypes to see which navigation patterns and components felt most intuitive.
Final Designs​
The result is a design system that feels native to the LAFC brand.
​
Design Tokens: A foundational layer of color, typography, and spacing tokens that allow for global updates in minutes, not days.
Match-Day Components: Specialized modules for live scores and lineup cards.
Documentation: A comprehensive Figma "Source of Truth" with clear usage guidelines for interactions, states (Active, Disabled, Loading), and responsive behavior.
​
Key Takeaways​
​
Design Systems are Living Products: A design system is never "done." It requires a governance model to grow alongside clients needs.
Engineering Alignment is Critical: The system is only as good as its implementation. Frequent "syncs" between design and dev ensured our Figma components mirrored the test builds.