Olympics Dashboard

This product was based on an Analytics dashboard, with the purpose of keeping up with tournament games according to users’ preferences, in this case, my favorite tournament ever, the Olympics game.

TASK

UX Design: Dashboard, User Research, User Interview, Heuristic Analysis, UI Design, Prototype.

UI Design: Style guide, Wireframing, Prototype. 

TOOLS

Figma, InVision Studio
Adobe Photoshop, Adobe Illustrator

PLATFORM

Desktop

TIMEFRAME

2 weeks (December 2020)

The Olympic Games

“The goal of the Olympic Movement is to contribute to building a peaceful and better world by educating youth through sport practiced in accordance with Olympism and its values.”

The Olympic Games are considered the world’s foremost sports competition, with more than 200 nations participating. The Olympic Games are normally held every four years, alternating between the Summer and Winter Olympics every two years in the four-year period.
Sports: The Olympic summer Games program consists of 48 sports.

The official Olympics portal

The Olympics website covers everything of the event; all the official news and content are posted there, such as schedule, sports, athletes, events, etc.
Apart from that, there is the Olympic Channel, where you can watch 24/7 non-stop Olympics content like replays, series, films, etc.

Defining the real problem and Brainstorming

I decided to pick one problem and explore it. There are several answers and root problems that can emerge from it.

– Why? It’d require much time and effort since there is so much information happening at the same time;
– Why? All pieces of information aren’t organized in the same place;
– Why? There are many websites, but none of them show all this specific information together in one interface;
– Why? There isn’t a product that does that.

If I had only today to change this issue, what would I do?
– I’d find resources that can show me the information I want to, even though It’d require me more time than I’d like to spend.

Say I’m explaining this to an old friend, what do I say?
– I want something that makes me alarm when my favorite matches happen and keep track of my country’s score.

Is the problem likely to remain or even grow over time (on a universal level)?
– I believe no, as soon as the technology evolves, things will get easier.

Why should people use this solution?
– It’d make the process easier and save them time.

Which risks we have?
– Not being possible to deliver accurate information in real-time.

What is a success for this project?
– People being satisfied with having all the information and do not forget about the matches they want to see.

The User Research & Data

💬 It was interviewed 5 people

Who watches the Olympics?

The Olympics public are people of all ages eager to root for their countries and watch their favorite sports; certainly, Olympics ratings are clearly highest among older viewers (age between 55-74 years old). In Rio 2016, 200 countries were broadcasting the games, with an average of 27.5 million viewers across all platforms, including digital streaming; the leading country viewing the matches was the United States. 6.6 million international travelers attended the games.

Based on the data gathered, I identified two core personas that share the organization’s aim:

– The ones who watch live;
– The ones who watch the matches through a device (Tv, computer, smartphone, etc.)

Both share the same desires and be aware of their country’s status in the competition, regardless of time zone and distance. It’s hard for them to be aware of everything that is happening due to their daily activities. The vital content listed from them is the medal score and match time.

The core pain point identified were:

1- Hardness to find all the information in one single place;
2- Not knowing where to find specific information;
3- Difficulty to keep track of the score since it changes quickly.
4- Having to switch to another application

  • The ones who watch the matches through a device
  • The ones who watch live

 

 

Ideation

The idea is to have an interface of one single page without having to scroll and that shows all the content desired by users.
First of all, I gathered all the information and features in order to guide me on the content that the product must have:

– medal score;
– matches calendar;
– next matches;
– highlighted moments;
– news;
– filter by country;
– filter by sports;
– time zone.

Second of all, I listed some ideas for the product:

💡 The matches could be synced with the Olympics channel, having a link to watch the live match;
💡 The product could have filters by country and sports;
💡 The different time zones should be carefully manipulated since it changes all the matches’ timing.

Sketch

All things concerned, I designed the following interface, applying all the relevant ideas.
I took note of keeping all the main information on the Z-Pattern Layout, since this will be how the users will eye scan the page.

Consequently, I designed all the interactions and secondary pages that the product might have.

Style guide

First Design Iteration

💬 All the content displayed was based on previous Olympics.

Low fidelity wireframe

High fidelity wireframe

Is the usability of this interface good enough?

Reviewing UX laws (Occam’s Razor)

Fitts’s Law, Hick’s Law, and Occam’s Razor: depending on the user’s skills, the notification feature might not be easy to use at first. This learning curve could be simplified. The search, country, and time zone filters’ functionality might not be understood at first glance.
Postel’s Law: the time zone feature could accept either the time zone abbreviations or country name

Heuristic Analysis

Visibility of System Status: the red dot showed on the calendar day is too small; most users won’t notice it at once. The notification could be displayed in a better way, perhaps changing the whole day icon color.
Aesthetic and Minimalist design: Can I reduce the information displayed on the dashboard?
The Game and Calendar features basically work in parallel, so why not combining them and make the interface more welcoming and easier to be understood;
The News feature shows content that is not necessarily related to the games; this might not be as important to users for a first glance, so why not separate it to another page.

Refined design

Prototype

💬 All the content displayed was based on previous Olympics.

Artboard_17Artboard 4

Features

Notification
When clicked on the notification icon, the component will turn green and the details will be displayed on the top right side of the interface.

Time zone
When selected a time zone, all the times displayed on the interface will be changed according to it

Search
It’ll show results according to the typed word/phrase

Country
When selecting a country, all the content on the interface will be exclusively about this country.

Restropective

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Thank you for scrolling

0
px

Other projects