World Cup Tournament Bracket
Overview
Inspired by the FIFA World Cup Qatar 2022, this interactive bracket is a fun way for people to make predictions and explore different possibilities of which teams might face off in each stage.
Audience: FIFA World Cup Qatar 2022 viewers
Responsibilities: eLearning development, visual design
Tools Used: Articulate Storyline 360, Adobe Illustrator
Process
Every four years for the World Cup, I enjoy filling out brackets with friends and coworkers. I have a lot of international friends, and I myself have quite the international background, so it's fun making predictions as to who will win. For the FIFA World Cup Qatar 2022 I had an idea. I wanted to make an interactive bracket that the user could go back and change, in order to explore different possibilities and see which countries might face off at each stage.
Design
I needed to keep the design as simple as possible, since there were a lot of items that needed to go on each layer. For the colors, I went with the official colors of the FIFA World Cup Qatar 2022, which are the colors of Qatar's flag. I got the logo and a few of the balls from Adobe Stock. I used vectors graphics so I could make a few changes in color and separate a few grouped items.
Development
The development was a bit more challenging than I expected, but I was determined to make it work. I knew I would need a lot of different triggers and states, in order to account for every possible outcome. I needed to fit a lot onto one slide, and I needed the user to be able to choose their pick for first and second place in each group, as this determines who plays who in the knockout stage.
I did a quick Google search to see if anyone else had made something like this before, and found this blog about creating a bracket for the 2018 World Cup in Articulate Storyline. This gave me some ideas for my project. I implemented a drag and drop for the group stage, followed by one single layer with motion paths for the subsequent stages.
For the knockout stage, I created buttons with states for each possible outcome. Some of the buttons needed as many as 32 states for each country. Then, I implemented hundreds of triggers. When the user selects a country, there's a trigger to change the state of the winner for that match. Each pairing is a button set.
The most tedious part was the motion paths. I needed to bring each item in and out of view on a single layer, as the user clicks previous or next to view each stage. I couldn't group them all together, as that would interfere with being able to select each country individually, so I needed motion paths for each item in multiple directions. I also needed them to land perfectly aligned, so precision and attention to detail were of utmost importance.
Results and Takeaways
As soon as I reached a stable prototype, I invited friends to try it out. I needed people to try it out to make sure I didn't miss any triggers. Thankfully, everything worked! People enjoyed the interactivity of it. One person suggested adding a feature where the user can click on each country in the group stage and read facts about that team, which is something I'd like to add next time. I would also love to add an option at the end to generate a PDF with the user's choices.
