Matt Shetler, Adrienne Pugh, Marcel Swanepoel, Jeremy Albert, Harold Emsheimer, Julie McConnell, Phil Rampulla, Rhys Harwell, Ben Taels, Riley Florence, Craig Parkinson, Jesse Raymond, Pavlo Grubyi, Kelly Rice, Jacob Grubbe, Sean Smith, Martin Craster, Rachel Leiker, and a hundred more...
My Role
Product Lead, Creative Director
Business Impact
50% of UI technical debt solved.
Increased time to delivery of improvements to the UI by 95% in many cases.
New flexible visual identity for Fortnite unlocked the transition to a platform with thousands of experiences
Common design language unified more than 20 different teams working on different parts of the platform, creating cohesion and efficiencies.
What I did
Created the concept and got stakeholder alignment.
Worked collaboratively across departments to align on Rifts as the metaphor.
Directed UX & UI.
Directed Visual Design, UI Art, and Interactive work.
Directed technical implementation of design system and new tooling.
M
Overview
Four years ago, when I joined Epic, changing a screen in Fortnite’s front end, like the lobby, would take six months. It would also need most of the existing UI team. The UI team was drowning in tech debt, with no way to solve it. It wasn’t their fault. They had to move as fast as they could to build Battle Royale and keep up with players. So that meant making one offs. Over time, they piled up. Creating the Metaverse with a broken user interface was impossible. It needed huge changes.
Imagine trying to remodel a car by replacing its engine while it’s driving 70 down the freeway. That was our task in redesigning Fortnite’s UI. We had to make a scalable design system. It needed a new, flexible identity because it had to accommodate an unknown number of brands. We had to rebuild it all in Unreal Engine. This was while we continued to ship new seasons and three new games to players.
We created Rift UI.
Rifts in Fortnite make the absurd and unexpected reality. They tie worlds together. They send you flying into the air. They open doors to other dimensions and times, drop dinosaurs, heroes, and villains into your world. It was a perfect metaphor to tie the many worlds of the developing Metaverse together using UI.
It would serve as the glue.
We then focused on getting the whole company behind this new design. Our first efforts began to show with the launch of Chapter 5.
Results
We evolved Fortnite’s UI from a single game into one that could support infinite games. We rebuilt it from the ground up with scalable design systems and new technology, while reducing our tech debt and time it takes to launch features to market.
A Unifying Metaphor
We utilized the “rifts” that exist in the lore of Fortnite as the metaphor for the new UI design system. Rifts connect all the worlds of Fortnite. We felt it was an apt metaphor for the UI, which serves as the glue that brings everything together.
Core Principles
Every design system should base its core principles on the needs of the product and players. Ours was about putting content first. We made things simple and built for the scale of the Metaverse.
A Wide Range of Brands
We needed our design system and UI to be flexible. It had to support a wide range of designs. This included those for opinionated brands like Dragonball Z. It also catered to creators without a brand who didn't want their designs to mimic Fortnite.
Adaptable UI
Rift UI is based on about 70 core components. Its system can change styles without altering components. To do this, we made new technology in Unreal Engine and UMG. We took our ideas from CSS.
New Structure
Fortnite is moving from being a single game into a platform for hundreds of games and brands. We redesigned the information architecture to scale for it. It adapts to the unique needs of each game.
Highly Performant
We rebuilt the UI from scratch on new, scalable systems. This included making new style sheets tech built into Unreal Engine itself. This made the UI scalable across the entire Fortnite ecosystem. A change that took months could now be completed in days.
.png)
.png)
