PROJECT
The Ultimate Knockout
CLIENT
UEFA
DATE
October 2023
ROLE
UX/UI Designer
RESPONSABILTIES
Research, Game Design, UX & UI Design, Wireframing, Prototyping, User Testing
UEFA’s ‘The Ultimate Knockout’
Crafted exclusively for UEFA, ‘The Ultimate Knockout’ is a captivating web-based game that serves as a celebration of football knowledge. Participants immerse themselves in a unique experience, choosing avatars and stepping into fully customizable locker rooms before hitting the football pitch. The game’s distinctiveness lies in its immersive 3D environment filled with football references, providing players with an entertaining journey through the football universe.
As an added incentive, the winner will receive tickets to the Champions League final!
Design Process
1. Empathize
User Research
Personas
Empathy Maps
2. Define
Hypothesis
3. Ideate & Design
Information Architecture
Wireframes
High-Fidelity Prototypes
Visual Designs
4. Deliver
User Testing
Design Iteration
Prototype development
My Role
1- Empathize
Qualitative Research
We conducted interviews with potential users to gain deeper insights into their demographics, behaviors, preferences, and expectations regarding the ‘Ultimate Knockout’ experience. Below are examples of questions asked during the interviews to uncover valuable insights:
—How frequently do you visit the UEFA website, and what specific purposes or information are you usually seeking?
—What motivates you to participate in football-related online experiences or games?
—Can you elaborate on your past experiences with football-themed games or quizzes? What aspects did you enjoy the most?
—How do you typically engage with football content on social media platforms? Which platforms do you prefer, and why?
—How important is personalization and customization in the online experiences you engage with? What aspects do you appreciate being able to customize?
Quantitative Research
We used Google Forms to analyze user behaviors and preferences, aiming to uncover patterns and trends among our target audience.
—In an online football competition, would you rather:
A. Compete against friends and other players in real-time matches.
B. Complete challenges and quizzes at your own pace without direct competition.
—When customizing your avatar in a football game, do you prefer:
A. A wide range of preset options for quick customization.
B. Extensive customization options allowing for more personalization.
—In a football knowledge quiz, do you prefer:
A. Questions focused on current football events and statistics.
B. Historical trivia questions about iconic moments and legendary players
User Personas
Ryan Gosling, The Casual Gamer.
Ryan, 35, Liverpool. He is an avid FIFA player, spending a significant amount of his leisure time immersed in the game. Ryan enjoys competitive gaming experiences that offer fast-paced action and realistic gameplay mechanics.
Emma Stone, Football Enthusiast.
Emma, 24, London. Raised in a household passionate about football, Emma’s family discussions often revolve around the sport. With football deeply ingrained in her upbringing, Emma is thrilled at the prospect of winning tickets to the final match.
Empathy maps
What he says:
“Competing against friends or online opponents keeps the game exciting for me.”
What he thinks:
“Winning against tough opponents gives me a sense of accomplishment and satisfaction.”
Ryan’s pains:
Difficulty finding time to play FIFA due to work commitments.
Ryan’s gains:
Joy from winning matches and achieving success in tournaments.
What she says:
“I can’t wait to share the excitement of the game with my family and friends; it’ll be a great bonding experience for us.”
What she thinks:
She considers how the game will challenge her football knowledge and skills, hoping for engaging and interactive gameplay.
Emma’s pains:
Emma may feel overwhelmed if the game lacks intuitive navigation and clear instructions, hindering her ability to fully enjoy the experience.
Emma’s gains:
Emma hopes to connect with other football enthusiasts through the game, fostering a sense of community and camaraderie.
2- Define
Preliminary ideas
Initially, the early game concepts revolved around users selecting their preferred football style, such as ‘Analyst,’ ‘Old Schooler,’ ‘Enthusiast,’ etc., each corresponding to distinct locker room designs. However, this approach was later abandoned in favor of a more flexible and open customization system.
Initially, early concepts incorporated a ‘football personality’ test before the experience to tailor it according to each user’s unique perspective of the competition. However, after conducting user testing, this feature was discarded in favor of streamlining the experience for quicker engagement.
The locker room experience initially comprised several interactive sections. However, we opted to streamline it by integrating large screens capable of displaying essential information about the competition, including the leaderboard, countdown to the next event, and optional UEFA content.
3- Ideate & Design
User Flow
We utilized Figma to craft a comprehensive flowchart outlining the user journey, detailing each step necessary to navigate through the entire experience.
As we conducted testing, we introduced the option to skip all personalizations for users who simply wanted to jump into playing the game on the pitch. This enhancement was integrated to provide flexibility and accommodate varying user preferences during the testing phase.
The unique decision-making process involves physically positioning oneself on one side of the pitch corresponding to the chosen answer. Those on the correct side seamlessly progress in the game, while others, though eliminated, have the option to continue as ‘ghost’ spectators.
An exciting evolution in gameplay includes the incorporation of obstacles and entertaining elements within the pitch environment, providing a sense of progression to players while they await the next answer. This addition aims to guarantee that no player feels compelled to abandon the experience halfway, keeping engagement high throughout the entire journey.
High Fidelity Wireframes
Prototypes were crafted using Figma, with a focus on consistency and coherence with UEFA’s branding. This involved developing a comprehensive Design System and Style Guide to ensure alignment with UEFA’s existing products and visual identity.
4- Deliver
Interactive Prototype
Experience Prototype
The ‘Ultimate Knockout’ experience is meticulously designed to empower players with complete control over the personalization of their characters and locker rooms. Before entering the pitch for the online competition, users have the freedom to tailor their avatars and surroundings. Recognizing the importance of engaging visitors who arrive early to the experience, special attention is given to providing entertaining elements, ensuring an enjoyable and immersive atmosphere leading up to the scheduled daily competition start time.
In the initial step of ‘The Ultimate Knockout’ experience, visitors are invited to craft a personalized avatar for the upcoming competition. Leveraging the innovative ‘Ready Player Me’ tool, users can either capture a real-life image of themselves to be translated into a lifelike 3D avatar or choose from a plethora of options for creating a unique representation. This not only enhances the user’s sense of ownership but also adds a personal touch to their virtual journey.
As the development progressed, recognizing the importance of flexibility, we introduced a ‘Skip’ option within this flow. This addition allows users to expedite the process and move swiftly into the game, catering to those who prefer a quicker onboarding experience without compromising the overall enjoyment of ‘The Ultimate Knockout’.
The journey of locker room personalization in ‘The Ultimate Knockout’ initially commenced with only subtle color changes, gradually evolving into a comprehensive customization experience encompassing choose of theme and items modifications. Users are given the option to leave the locker room unaltered if they prefer a quick entry into the game, maintaining flexibility in the user experience.
Notably, the personalization sequence concludes with an invitation for users to add a unique username. While it’s positioned as the final step due to modifications in the flow, we recognize the ideal scenario would involve earlier acquisition of user names.
Acknowledging initial UX challenges, particularly in visibility of the pitch entrance within the captivating locker room design, iterative modifications were implemented. The door to the pitch was strategically relocated directly behind the standing avatar, with the screens positioned to the sides instead. This adjustment not only enhanced the visual intuitiveness but also ensured a smoother transition from the personalized locker room to the exciting gameplay arena, addressing and improving upon early UX considerations.
As a thoughtful addition to ‘The Ultimate Knockout,’ we introduced a feature aimed at crafting shareable moments for social media. Players now have the opportunity to capture and share their personalized avatars, generating a buzz around their unique virtual identity.
This shareable moment can be easily created at the player’s convenience, either before or after engaging in the game. By seamlessly integrating social media moments, ‘The Ultimate Knockout’ extends beyond the gaming arena, transforming each player’s journey into a share-worthy celebration of their passion for football and personalized gaming experience.
In ‘The Ultimate Knockout,’ gameplay takes on an innovative twist where players are presented with two possible answers to a football-related question. The unique decision-making process involves physically positioning oneself on one side of the pitch corresponding to the chosen answer. Those on the correct side seamlessly progress in the game, while others, though eliminated, have the option to continue as ‘ghost’ spectators.
An exciting evolution in gameplay includes the incorporation of obstacles and entertaining elements within the pitch environment. Drawing inspiration from football training sessions, these interactive features provide an engaging space for players to enjoy while awaiting the next question. Whether it’s navigating obstacles or kicking a ball, this addition not only amplifies the entertainment factor but also reinforces the communal and playful atmosphere of ‘The Ultimate Knockout.’ It transforms the waiting period between questions into an enjoyable experience, encouraging players to stay connected and immersed in the game dynamics.
UX & UI Design
Game Design & Testing
