VOLTA Shop
EA Sports | FIFA 20/21
Focus
Strategy, UX & UI Design, Interaction Design
Deliverables
Wireframes
High-Fidelity Mockups
A one stop shop for players to unlock unique vanity items by using VOLTA coins or completing objectives through a ladder of increasing prestige.
Overview
VOLTA Shop was first introduced in FIFA 20 for our casual players who want to have fun with football and play with personal expression.
FIFA historically mirrors real world team kits, so this new take on vanity was brand new.
The Challenge
How might we design a store that informs both ladder objectives as well as the tiered rarity system for vanity items?
Requirements to frame the feature
VOLTA Shop is unique because it function as both a store front as well as a game board.
Production provided me with a list of requirements to follow:
Vanity items need to be visible at all times
Objectives text and unlock price need to visible at all times
Purchase, buy more and equip states must be easily accessible
Locked & unlocked items need to be easily distinguishable
Using colour and height mechanics
Colour As A Tool
I used colour to distinguish the different tiers of rarity. I also used light/dark tiles to help players quickly identify what is locked vs. unlocked.
Tile Height Mechanics
The height of the panel needed to be tall enough to display the challenge but also short enough so the vanity item could be visible.
Active/completed objectives (full tile height) - To make space for the objectives text, Equip Now and Unlock More buttons.
Preview of upcoming objectives (full tile height) - To make space for the objectives text
Locked items (shortest tile height) - So it doesn’t block the vanity item image
Revisiting the UI
In FIFA 21, we wanted to review and improve the existing VOLTA Shop.
This time, Production was not as strict on vanity items being required to be viewable at all times. This allowed us combine the 2 rows of content from the previous year, into one linear ladder.
Linear Ladders
The vertical ladder made it clear to users that objectives needed to be completed in order. This new UI is a scrollable list with number ten always anchored in place to display the item of highest rarity.
Preview Panel
The preview panel was added so players could have a more focused space to view all the crucial information such as the vanity item tier, challenge objective, progression and unlock price.
Insights & Takeaways
Marketing and design clash
Sometimes the goals of marketing vs. the goals of UX design do not align. Showing vanity items at all times was a marketing call by Production so they could better promote the products. Unfortunately, this meant a lack of UI clarity for our laddering objectives system which resulted in some confusion for our players.
You can’t win them all, but luckily we were able to improve the design of the screen in FIFA21.