Home » FIFA Tournament App

FIFA Tournament App

Phones Mockups with the App

The challenge

Create a multi-tournament platform using a flexible, component-based architecture. This lets each section use the same modular building blocks. We ensure design consistency, scalability, and fast adaptation to tournament moments, content priorities, or partnership needs. As part of this, we define accessibility standards and work with inclusive design and compatibility. One of the main challenges was enabling content editors to create tournament-specific content using a CMS for centralized control. Ensuring a consistent, high-quality user experience across all tournament content. A dedicated portal allows cities to upload event details and activities directly. The app stays dynamic and up to date.

I was the design lead, helping a team of 5 designers build a system adapted to FIFA’s complexity. We worked across areas with stakeholders, stadiums, and Host Cities. At the same time, I collaborated closely with Globant’s Product Team to plan and define the roadmap. We covered the full development cycle, from envisioning to production.

The Process

My involvement began with the envisioning phase, which helped me understand business and user goals directly. A small team, including stakeholders, the tech lead, a service designer, a visual designer, and me, defined the vision and scope. We clarified project goals and engaged with fans from diverse backgrounds. We then collaborated with various teams to develop a roadmap outlining the product and requirements for each release.

I coordinated with business, tech, and POs to gather needs and opportunities, translating them into user flows and providing a clear vision and roadmap to the new design team. I also established the foundations for a robust Design System applicable to all tournaments. Also, I developed flows and mocks for other apps as part of the internal process for cities and content.

Envisioning

  • I started by conducting stakeholder workshops to map pain points, workflows, and hidden opportunities.
  • I interviewed and surveyed football fans to learn about user needs and pain points.
  • I also analyzed event and ticketing apps for features and data display.
  • Define main functions and work with the team to clarify scope.

Definition

  • First, facilitated co-creation sessions with developers and stakeholders to brainstorm solutions grounded in technical feasibility.
  • Next, worked directly with Product Managers and Business analysts to review product development, align on delivery timelines, and define the MVP and future iterations.
  • Finally, defined from the design perspective, the working ecosystem, ceremonies, tools, and way of approaching this challenge.

Development

  • Establish the Design System’s base concepts and foundations by creating a theming and tokenization approach.
  • Define seamless functionality across devices and operating systems, and ensure adherence to WCAG.
  • Keep the design time aligned with the needs, timelines, and understanding of the modularity concept, which involves creating individual, reusable components that can be combined or adapted as required.
  • Translate concepts into modular, scalable design components and continuously validate with tech, POs, and stakeholders.
  • Conduct usability testing in specific flows.

The Design System

The definition was clear: provide customization options for each tournament’s visual identity through the flexibility of its structure, enabling the adaptation of colors, logos, typography, and patterns while maintaining a cohesive, accessible, and scalable design framework.

As a lead, I guided the team in creating theming logic that let each tournament maintain a unique identity. We used adaptable components, flexible styles, and scalable guidelines. The system supports customization for different tournaments without compromising usability or design integrity.

Design Tokens Explanation

The Outcome

The app is now live; some functionalities are still to be revealed, but in general, most of the designed components will be used and visible to final users, and that is a great ending as a designer to see the design live. For now, we need to see how users and FIFA work with the final version of the app and how successful it will be. The app had been included in previous releases and used, but now it’s time for the final test, in the 26th World Cup Tournament.

  • Deliver Value: For this app, I aimed to provide meaningful value to users, partners, cities, and key stakeholders. I supported the design team, FIFA, and external partners, such as cities, in clearly articulating and addressing partnership needs.
  • Modular Approach: Equip the project and technical teams with a comprehensive design system and process to enable rapid development and streamline project handoff.
  • Product vision and roadmap execution: Even though the app had specific releases, I organized the design team and connected with the tech and business teams at the right time to keep components and design available when needed.