About UFC
UFC is a series of fighting games based on the mixed martial arts promotion Ultimate Fighting Championship (UFC) developed by EA Vancouver and published by EA Sports.
The details of the designs are not available at this time due to a non-disclosure agreement.
The Problem
In spite of the fact that UFC is a 10-year title, there isn't any established principle and guideline for designers and developers to follow. The design team saw the gap, and that was where our design system journey began.
Other than contributing to the feature design of the UFC game and growing UX maturity, I drive the first UFC design system setup.
Key Achievements
-
Develop the design system as the primary designer
-
Construct the Figma libraries which consist of 120+ components and 60+ screen templates with comprehensive documentation
-
Collaborate with designers within and outside UFC (e.g. FIFA, NHL) to obtain insight into their needs and process
-
Evangelize the benefits of the design system to designers, producers, engineers, and leadership
-
Set up frameworks and support ongoing updates and maintenance
Why does UFC need a design system?
Lack of proper documentation as
the source of truth
There wasn't any universal documentation to refer to across the team. For example, we did not know there were 16 versions of a simple grid until we listed them in the audit. In the absence of a holistic view, the team was unable to communicate effectively across disciplines.
Inconsistent UX and UI patterns
"When should the tab navigation be center-aligned?" Such questions popped up frequently in the production. Because there is no defined UX and UI principle for designers to follow. It led to inconsistent patterns in designs.
Extra effort on crafting one-off widgets
We also noticed that there are a lot of one-off widgets where they weren't reused on any other screens. These components required extra effort on the part of designers and developers. The team started to wonder if we could use other similar widgets to replace those "snowflakes".
A simple example in UFC 4, the toggle switch on the left screen was applied only on this certain screen. While the chevron toggles were used in the rest of other screens.
Lots of reskin effort
UFC, as a series sports game title, would usually reskin some of the screens each cycle, meaning resue and renovate them. As a result of no proper documentation, some duplicate widgets were created. Hence, the reskin work takes more than 100 days, which is 1/4 of the production time.
Long new hire onboarding time
For new hires, the onboarding time is relatively long with a lack of guidelines. The extra capacity of experienced teammates is needed to orient the new hires.
GOALS
-
Help replicate designs quickly by utilizing premade UI components and elements in the Figma library while maintaining flexibility on exploring art styles
-
Identify and document reusable elements
-
Ensure UX and visual consistency across wireframes and mockups
-
Unify languages within and between cross-functional teams with better definitions for existing components' states and properties
-
Standardize documentation for smooth hand-offs between domains and quick ramp-ups with new hires
How did I create the design system?
Stage 1: Research and Define
-
Interviewed our teammates in different domains to understand their workflows and needs
-
Researched other design systems in the tech and gaming sectors
-
Defined the goals of our design system
Stage 2: Audit and Wayfinding
-
Audited the existing game and identified the usable components
-
Defined the principles and scope of the design system
-
Single Source of Truth: The design system would be well-documented with clear guidelines as a centralized source for the team to follow.
-
Consistency: The design system would be covering the entire UFC game with cohesive colors, typography, icons, and any other assets.
-
Scalability: The design system would have the flexibility to allow for easy expansion and modification each cycle without compromising its integrity or usability.
-
Reusability: Components in the design system should be reusable year over year functionality-wise, and easily combine into new designs.
-
Stage 3: Development
With the atomic approach, we set up these libraries in Figma in the following order. Those libraries currently contain 120+ components and 60+ templates and still expanding.
Atoms
Grids, Colors, Typography, Icons, Graphics
Molecules
Simple widgets
(e.g. single button)
Organism
Complex widgets
(e.g. button menu)
Templates
Screen templates with documentation on best practices and variations
Stage 4: Iterations and Onboard
-
Gathered feedback from team members across disciplines
-
Created a demo working file for testing the design system
-
Iterated and improved the design system based on feedback and test result
-
Implemented design system into the production process
Stage 5: Maintenance
-
Set up the framework for year-over-over style change
-
Defined criteria to screen and add new components to the system, our two main criteria:
-
Is that any existing components that can replace it?
-
Is it relevant to multiple features? Can it be reuse in the next cycle?
-
-
Developed a review process according to the criteria
Instruction on year-over-year style changes
New component screening framework
What have I learned?
Consistency vs Flexibility
The UI elements and patterns vary greatly between game titles in each cycle. How can we ensure that the design system is sustainable and usable year after year? One of the biggest challenges is maintaining flexibility while maintaining consistency. Even though we want to keep the UIs consistent, we don't want to limit designers' creativity. Here are our solutions:
-
Low-to-medium fidelity components of the core design system will be used to create wireframes
-
The visual designer will work on aesthetics using wireframes and documentation. Then we will construct another high-fidelity component library based on the core library to maintain consistency.
A unique feature of our design system is that no art style is restricted in the first place. In the meantime, we maintain consistency with best practices documentation and guidelines in the core library.
Create a "useful" design system
The worst system is the one that doesn't get used.
The last thing we want was to craft a system that was not beneficial to the team. It's important to remember:
"Users = Our teammates"
To avoid a "useless" design system, we constantly talked to our teammates about their needs and top-of-mind pain points to see how we could improve their workflow. Set priorities so that the design system could benefit the team in the first place. Also, with their contributions, we were able to achieve buy-in quicker and easier in the later stage.
And more...
-
Data management - Ensuring the significant amount of data in the design system is up-to-date among production cycle
-
Knowledge sharing - Sharing the things we learned with fellow designers and the team in an effective way
-
Reach out and learn from others - Huge shout out to NHL, FIFA design system team, as well as UFC designers and developers
What are the impacts?
The design system is expected to significantly improve our teammates' productivity. Based on the internal predictions, the design system is expected to:
-
Reduce engineers' workload by 20-30%
-
Cut 1/3 of reskin time on both design and development domains
The time saved will be invested in solving high-level problems to craft an even better experience for our players.
