top of page
Frame 11.png
Free football 6 (2).png

Game Overview

This mobile football game is a fast-paced, competitive experience that allows players to choose from a predefined set of teams, compete in tournaments, and showcase their football skills. Designed specifically for teens aged 13-18, the game emphasizes dynamic gameplay, intuitive controls, and sleek design to captivate its target audience.

Tools used:

Group 1601377.png

Goals

The objective of this UX case study is to ensure that the design enhances usability, prioritizes user goals, and keeps teens engaged by:

  • Highlighting essential information through clear visual hierarchy.

  • Making call-to-actions (CTAs) prominent for seamless navigation.

  • Balancing the emphasis between team identity and tournament progression.

  • Experimenting with two distinct low-fidelity prototypes to refine layout priorities.

User Research

The game is designed for teens aged 13-18 who:

  • Enjoy competitive and casual football gaming.

  • Value visually engaging, intuitive interfaces.

  • Appreciate customization and progression systems.

Group 1601341.png
Group 1601341-1.png

Design Approach

1. Visual Hierarchy

  • Bold Colors: Red highlights for the "Next Match" draw immediate attention.

  • Clean Fonts: Simplify navigation and focus on tournament progression.

  • Dark Background: Enhances contrast, making vibrant team colors, icons, and text pop.

2. Call-to-Action (CTA)

  • A bright cyan "Play" button is prominently placed to encourage quick access to the game.

  • Secondary buttons for customization, settings, and stats remain visible yet unobtrusive.

3. Bottom Section Widgets

  • Compact widgets track goals, stats, and tournament progression without overwhelming the screen.

  • Progress indicators use dynamic animations to maintain engagement.

4. Usability Enhancements

  • Distinct team icons and colors improve visual clarity and usability.

  • Intuitive layouts ensure seamless navigation, even for first-time players.

Low-Fidelity Prototype Approaches

Two different low-fidelity prototypes were created to explore how best to balance player avatar prominence with tournament progression clarity:

Prototype 1: Player Avatar as the Central Hero

  • Key Focus:

    • The player avatar occupies the central position, serving as the focal point of the home screen.

    • The user's team logo, name, and formation are displayed prominently near the avatar.

    • Game mode buttons and tournament progression take a secondary role in the layout hierarchy.

  • Strengths:

    • Creates strong engagement with the player avatar, enhancing customization and personalization.

    • Appeals to players who value their team identity and enjoy the "ownership" aspect of their team.

  • Challenges:

    • Tournament details and progression may be less noticeable for competitive players.

2 (1).png
30.png

Testing and Insights

Usability Testing:

Low-fidelity prototypes were tested with a group of teens aged 13-18. Key insights include:

  1. Engagement:

    • Players who enjoyed personalization preferred Prototype 1.

    • Competitive players gravitated toward Prototype 2 for its tournament clarity.

  2. Navigation:

    • Both prototypes were intuitive, but Prototype 2 required fewer steps to access match-related information.

  3. Aesthetic Preferences:

    • Teens preferred vibrant colors and dynamic elements (e.g., animations for progress tracking).

176.png
177.png

2. High-Fidelity Prototypes

Based on testing, a high-fidelity prototype was developed, combining the strengths of both approaches:

  • The player avatar and team details are integrated into a left-hand panel.

  • The tournament layout occupies the right-hand panel, with "Next Match" prominently highlighted.

  • Widgets at the bottom track progress and stats without cluttering the interface.

114.png
104.png
175.png
101.png

Key Features

  1. Dynamic Home Screen:

    • Split layout balances team identity (left panel) and tournament progression (right panel).

  2. Customizable Player Avatars:

    • Animated avatars enhance engagement and personalization.

  3. Tournament Progression:

    • Clear indicators for ongoing matches, upcoming rounds, and standings ensure players stay informed.

  4. Call-to-Actions:

    • A bright yellow "Play" button encourages immediate action.

103.png
105.png

Colour and Typography

Group 13.png
Group 15.png
Group 1601740.png

Outcomes and Learnings

  • Players appreciated the balanced focus between team identity and tournaments.

  • Clear visual hierarchy and bold CTAs enhanced navigation and reduced decision fatigue.

  • Testing revealed the importance of integrating competitive and personalization elements to cater to diverse player preferences.

iPhone 18.png
Mask group (3).png
Prototype 2: Tournament-Focused Layout

  • Key Focus:

    • The tournament aspect takes center stage, with "Next Match" and ongoing matches highlighted.

    • Player avatars are integrated into the design but take a secondary role.

    • The layout is inspired by popular football games like FC Mobile, ensuring familiarity for players.

  • Strengths:

    • Keeps players oriented toward progression and competition, aligning with tournament goals.

    • Ensures essential information (e.g., next match, standings) is easily accessible.

  • Challenges:

    • Reduces the emphasis on team identity and player avatar engagement.

178.png
121.png
106.png
122.png
bottom of page