This original World Cup app is an infographic project I created in correspondence with our increasing reliance on digital interfaces as our sources of information. Information graphics in particular have become a quick and intuitive resource for us to read and understand data.

I decided to collect data representing a consecutive period that many users would find useful and relevant. At the time I developed this project the 2022 Qatar World Cup was in process, and I found many people around me actively searching up the results as each tournament progressed, constantly refreshing to receive updates. An easier way to consolidate this information would be through a seasonal app infographic designed to be the main information source for cellphone users.

One of the main design skills I wanted to drill into focus was storytelling through data visualization. How could I tell a story through the World Cup data, and how could I visualize data points through diverse mediums?
‍

World Cup Mobile

Mobile Designer

Published Dec 14th, 2021

👇🏾 Read about my design process below

I. Data Collection

Here is a sample of what the research process looked like. I would organize matches into chronological order and collect the most common searched statistics: country, scoreboard, yellow cards, etc.

real-time data collection of matches via Google search

II. Sketches

My first step in the data visualization process was turning each match into a sticker-like entity, organized by date in chronological order.

5 lo-fi black and white sketches for the organization of the site

III. Digital Transformation Process

My first step in the data visualization process was turning each match into a sticker-like entity, organized by date in chronological order.

Hi-Fi Wireframes

I later developed more interactive elements to the design, such as a flip interaction that displays the number of shots, pass accuracy, and the number of yellow cards.

Home Page

Color was used for both consistency and variation in my design. Burgundy and yellow were colors of the Qatar World Cup brand, and should also be applied in the app for consistency.

Color also provided typographic hierarchy and distinction between interactive elements.

Data Visualization

Daily

organization for match cards by day of the week

Features include a tapping interaction over each card, revealing the number of shots, pass accuracy, and the number of yellow cards. There is also easy navigation between Today, Week, and Month Categories through a submenu.

Weekly

organization for match cards by day of the week: Monday

organization for match cards by day of the week: Tuesday

Alongside the card interaction and submenu, there is also easy navigation between all seven days of the week for easy navigation within the category.

Monthly

organization for match cards by month: November

Alongside the card interaction and submenu, there is also easy navigation of all calendar days. There is a bright blue color applied to the current day, and a blue hover property is applied to promote easy distinction and navigation for the user within the calendar.

Standings

home page for team standings organized by country. Country name and key displayed.

Features include a tapping interaction over each flag that displays the country name and another tapping interaction over the key symbol that reveals the definitions to better understand the symbols used in the infographic.

Reflection

Notable Features

🗄️ Diverse Organization of Data: Daily, Monthly, Weekly.

Representing the data through these 3 categories supports user data comprehension, as they can perceive the statistics through more than one chronological lens. This organization allows more autonomy for the user to choose how much data they want to view at once.

🕹️ Interactive Features such as hover and tapping functions promote user experience by consolidating necessary information into plain view and allowing the user to opt into revealing additional features. Interactions such as the country name or key reveal prevent a cluttered screen which is an important usability principle of designing mobile applications.

🎨 Detail Orientation:

‍Color, typography, layout, and visualization support data comprehension because they are established through shared visual properties (i.e: menu items, background colors, interactive elements). Linking interactive elements with shared visual properties promotes consistent, legible, and varied design to support ease of user experience.

⚽ World Cup Mobile App