Turning the Olympic Games into a better experience

[Project 6: Curated Event Microsite] 5-Days Sprint | Individual | Ironhack São Paulo

Since the 1990s, the culture of events has been a phenomenon on the rise. Festivals, conferences, launches, exhibitions, and fairs have been improving the way to attract users every year. Digital communication is one of the most important pillars for successful events. The strategy needs to be well defined to convey a message consistent with the experience of the event.

In Ironhack’s Bootcamp UX / UI Design project # 6, we were guided to create an online platform for an existing festival, as well as to improve the user experience. For that, I followed some steps in Design Thinking:

1. DISCOVERY: choice of the festival, market study, and research;
2. DEFINITION: persona, user journey, storytelling, and mood board;
3. IDEATION: development of information architecture, sitemap, and user flow;
4. PROTOTYPE: style guide, creation of high fidelity wireframes and prototyping
5. TEST: Validate the concept, usability test, and accessibility.

Sprint

It was necessary to complete the whole process of discovery, definition, ideation, prototype, and test within 5 days, following the Kanban model.

1. Discovery

Step 1 — Festival Choice: Why Paris 2024?

There were several reasons why I wanted this edition of Paris 2024 instead of the coming Tokyo 2020.

I thought I could get faster and more accurate results by observing and learning from Tokyo 2020, but with postponing the games due to COVID-19, I decided to move forward this academic project and get my insights for the next Olympics.

Here are key facts to love Paris 2024 edition:

• in 1900, Paris hosted the Olympics Games in which women were first allowed to compete.
• in 1924, Paris hosted the Olympic Games again, in the same year Art Deco, the first complete French artistic movement, reached its height at the 1924 Games.
• 2024 will be a celebration of a centenary event in Paris.
• Gender equality is expected to reach its peak at the 2024 Olympic Games.
• Breaking, skateboarding, sports climbing, and surfing will be professionally included on the sports program of the Olympics 2024, contribute to making the program more gender-balanced and more urban, and offer the opportunity to connect with the younger generation

Step 2 — Desk Research: The current scenario

Each country may have the official named broadcaster for the Olympics, partnering with the IOC (International Olympic Committee) collaboratively to strictly control access to coverage of the events and overtly manage the way fans consume media. Today, thanks to social media and instantaneous access via the internet, the world is home to millions of individual broadcasters, each using their own personal platform to share news and views. Now they could follow the action wherever they were and choose the sport they wanted to watch.

A record-breaking 15 million fans downloaded the official London Olympics app. At that point, the shift to mobile was underway as 60% of traffic to the official London Olympics website came from a mobile device. Now, the official app for the Rio games is expected to double the numbers of previous Olympics to 30 million downloads. Of all the changes brought about by the digital revolution, the most salient one is that in the past four years we have all become broadcasters. Viewers crave unedited, unbiased, and authentic opinions or insights in real-time. And more and more avenues crop up to give us what we want.

How can the IOC embrace real-time sharing content, where spectators won’t lose focus on what they want to watch while protecting their business deals and sponsors who have paid a fortune for broadcasting rights?

Step 3 — Quantitative Questionnaire

This is the time when the quantitative questionnaire comes into play: To validate (or invalidate) the assumptions I already have about my users.

I took my personas and our journey and remove from them the assumptions that I would like to validate, such as:

In which device(s) do you watch the Olympic Games? — Mark all that applies:

• TV at home
• TV at Sports Bar
• Desktop at home
• Desktop at work
• Cellphone

What assumption do I want to validate this question:

Most people are mobile-first and watch the games on the go.

or another example:

Do you follow your favorite sport and athlete prior to the Olympic Games?

• Yes, I watch all world cups and qualification events related to my favorite sport prior to the Olympic games
• I try to stay informed about the qualification events prior to the Olympic Games, but I don’t watch all of them.
• I usually follow a particular sport

What assumption do I want to validate this question:

Most people who watch Olympic games on TV or the Internet are sports fans that follow sports and athletes throughout the whole season.

Step 4 — Qualitative interviews

After analyzing the data collected, I wanted to deep further into the APP.

My goal to understand WHY the past website/App was not working well to understand the root of the causes of the problems. then I interviewed 5 people who had used the app in the past Olympic Games-Rio 2016. Unfortunately, users did not remember very well how the iterations were from 4 years ago, so I can’t guarantee the accuracy of the results. However, based on the data I have, combined with the survey, I used my conclusions to develop the best solutions possible.

2. Definition

Step 1 — Users & Journey Map

Although I could identify several types of audience who could benefit from the website improvements, such as stakeholders, athletes, sports committees, sponsors, athlete’s families… etc, I decided to explore three main audiences, focusing on the order of quantity of them:

As you can see, the numbers speak for themselves why it is relevant to ensure the best experience to viewers watching the game across the globe.

3. Ideation

Step 1 — Solution Alternatives & Prioritization

Since I only had 5 days to complete the entire project, I decided to run all the possible ideas that came in my head when analyzing all data collected in the quantitative surveys, quantitative interviews, and benchmark of other large sports events, such as the world cup. I made a prioritization matrix to have a good visual of what the users had in both positive and negative experiences with the site/ app or even in the physical world.

Step 2— The Solution (key features)

1. Personalization of user’s favorite sports, athletes, and countries & Customize the site by geolocation (language and geography)

2. Split-screen for Athletes Guide and Sports Guide & Social Media comments interaction

4. Prototyping

Step 1 — Organizing the information

After ideation, I dove into the information architecture of the existing Olympic Games Website. Unfortunately, since the Tokyo-2020 events have been postponed to 2021, I could only reference previous websites with Post-Event information as a reference.

I started by mapping out the current sitemap to fully understand the hierarchy and navigation structure.

Then, I used card sorting techniques to organize, reorder, and group the content into different sections, ultimately coming up with a simplified and more intuitive version of the sitemap.

This step was crucial and really allowed me to review and restructure the app in order to increase the visibility of the key features, eliminating the ones users did not use, and improving the overall navigation.

Since the scope was a mobile app and desktop, I had to explore a couple of AI options, until I came up with these ones that make the most sense to incorporate with the existing site, taking what was working and improving and adding features.

Step 2 — Low-Fidelity Wireframes

After identifying the problems, it was time to create solutions. I started by scoping out other larger events apps and making observations on which layouts worked best. Then, I went on to brainstorming, generating many ideas and sketching them out on paper. I had a lot of fun doing this and, without much hassle, was able to estimate what could go on a screen, how to organize the layout, and how it all could work out.

This was a big step, to bring my ideas down on paper after all that research. This allowed me to explore different layouts rather than focusing on design details, and ultimately, it allowed me to diverge my ideas before converging back and committing to higher fidelity designs.

Step 3 — Mid-Fidelity Desktop| Mobile App & User Testing

UX findings from the usability test

• Users found it easy to understand the personalized experience offer but questioned whether or not it would be the first items to see.
• Users thought the split-screen from Sport-Guide and Athletes-Guide easy to use and very helpful and intuitive
• Users loved the idea of the engagement without leaving the platform but questioned how realistic this can be.
• Users asked if it is possible to download videos
• Users asked if a podcast/radio feature could be incorporated.

UI findings from the usability test

• Text Style is my Achilles’ heel. I find it extremely difficult and challenging to incorporate typefaces and text styles appropriate for responsive websites/ Apps.

Test Mid-Fidelity Prototype below:

Desktop (HERE)

Mobile (HERE)

Step 5 — Visual Interface

After implementing the feedback points received from usability testing, it was time to make sure that the user interface of the app was intuitive, attractive, and efficient. I wanted to keep consistency in the branding as well as use common interaction patterns that users are already familiar with. I ended up putting together a UI design kit showcasing all the major visual components to be used in the design of the application.

The visual interface was completely inspired by Art Deco, an authentic French Art Movement between wars. Art Deco has reached its height in 1924, the same year Paris hosted the Olympic Games.

I also tried to keep lines very feminine, since gender equality is expected to reach its peak at the 2024 Olympic Games and the logo reflects the lips of Marianne (French national symbol embodying the revolutionary spirit of the Games).

One of the feedback received during the mid-fidelity test was the lack of clarity in identifying the events that are happening live, those that have already happened, and those that are about to happen. Therefore, I decided to use a color distinction to help the user to locate himself.

5. Test

Step 1 — High-Fidelity Mobile APP | Desktop Prototype

Step 2 — & Usability Test

UX findings from the usability test

• Users found it easy to understand the personalized experience offer but questioned whether or not it would be the first items to see.
• Users thought the split-screen from Sport-Guide and Athletes-Guide easy to use and very helpful and intuitive
• Users loved the idea of the engagement without leaving the platform but questioned how realistic this can be.

UI findings from the usability test

• Text Style is my Achilles’ heel. I find it extremely difficult and challenging to incorporate typefaces and text styles appropriate for responsive websites/ Apps.

Test Hi-Fidelity Prototype below:

Desktop (HERE)

Mobile (HERE)

What have I learned from this project?

• I wish it would be based on the statistics from Tokyo 2020, but since it was postponed to 20201 due to Covid-19, I could only rely on data and statistics from Rio 2016. I understand the numbers from the research will change and the scenario will be totally different.
• One week to develop a project without a team, and little supervision can be really hard and challenging as I am still learning and going over the processes, I realized I need to discuss progress more often and document it as I go.
• Definitely I see a need for improvement for my design visual as this is certainly my Achilles’ heel.

Final Considerations

This was the first responsive website I developed. It was quite challenging to create high-fidelity prototypes for different devices on my own in just 7 days, but it was also one of the projects that brought me the most learning.

Contrary to the “mobile-first” approach, I started with the desktop design and then designed the interface for mobile devices, as outlined in the briefing. The biggest difficulty here was how to display the content on the mobile without deleting any information since the viewing space was much smaller.

I am very happy with the solution found. In addition to gaining insights into user research, diving into visual references from the universe in which the target audience is inserted was very inspiring to convey the mood of the event in the online environment.

This publication is part of my journey as a student of UX / UI Design Bootcamp at Ironhack.

Do you have any feedback? Contact me on LinkedIn.

Thanks for reading ✌