The Finals × You

XYOU, Berghs

I explored how UX principles from the fashion and retail industry can improve the store and customization flows in the game THE FINALS, with a focus on usability, ethics and win-win outcomes for both players and the game.

Figma prototype

Deliverables: UX Research, Store & Customization Flows, UI Design, Figma Prototype
Duration: 4 Weeks Over a Year,
Alongside Studies
Company: Embark Studio
Team: Solo

Three THE FINALS contestants in yellow and black on a red stage, with a machine gun, a crate and a white sphere.

Presentation

The brief

XYOU is a course at Berghs School of Communication where students work on their own projects for a whole academic year, often together with a company. I worked with Embark Studio on their game THE FINALS.

How can THE FINALS make players feel a stronger connection to their contestant through a more intuitive customization experience?

The store in THE FINALS today: a long scroll of item rows. — * How the store looked at the time

The Contestants screen today: clothing categories on the left, a grid of items and the contestant in the outfit editor. — * How the store looked at the time

Research

I mapped how customization works in THE FINALS and other big shooters, and looked at fashion e-commerce for clear categories, visible filters and products shown in context. Online player feedback and five interviews pointed the same way: too much content at once, too much scrolling and too many menus.

Emotionally grounded — you feel rather than just shop.

Customization flows sketched for Counter-Strike, Apex Legends, PUBG, Fortnite, Call of Duty and Overwatch.

Forum comments about the store: “harder to find things but looks a lot more stylish”, and requests to zoom out and use dropdown menus.

My solution

I moved the main navigation to the top and rebuilt the store entry around a rotating podium, inspired by physical retail: products on mannequins with their accessories, showing how they look in-game. A filter bar under the podium helps players quickly narrow down what they’re looking for.

Just like in a real store, you’re welcomed by products meant to inspire you and make you want to buy them, and the idea was built from there.

The redesigned store: three contestants on a round podium with weapons and gadgets, the filter bar below and the item grid next to the player’s contestant.

The same store filtered to Weapons: the podium stays, and the grid below shows only weapons.

Player and product, together

The player’s contestant stays visible next to the products, and items in the cart are applied right away, so you see the result before you buy. Products can be saved to a Wishlist, which sits in the Contestant tab next to saved outfits.

The store with the player’s contestant on the right, dressed in the items in the cart, and a heart on each item for saving it.

The Contestant tab’s Wardrobe: saved outfits on the left and the Wishlist next to them.

The checkout panel: Remove from cart, the purchase of 2 items for 600 credits, Save for later with a heart, and Checkout.

Fewer steps, less scrolling

Body types moved into the Loadout, so body, weapons and playstyle are chosen in one place. “My Outfits” and “Style” merged into a single Wardrobe, with filtering that shows less at once and makes the categories clear.

The Loadout view with the three body types in a row above the weapon and gadget slots.

The Wardrobe with headwear opened into its sub-categories and a grid of items next to them.

Key learning

The project was completed, and it became clear what the “customer”, the players, wanted: freedom of expression, with the structure, clarity and guidance to avoid overload.

Research and insights carry a lot of weight in a project like this. For me, they clearly shaped how the final design came together. The next step is to add effects and animations that take it to the next level.

The finished store in colour, annotated with the four principles: structure at the top navigation, expression on the podium, guidance in the item grid and clarity beside the contestant.

Next project