The World Cup Nations Guide is a conceptual project which celebrates the 2018 World Cup in the form of an interactive map exploring the 14 qualified European countries.
The project was a collaboration between myself and Sean Hervo and was designed to appeal to sports fans interested in the national football team and tourists interested in visiting the country.
A large part of the project was to undertake research of 14 countries to understand the performance of the national football team as well as understand the culture of the country. The research was conducted in order to write copy that inspires the user and motivates them to visit the country or book match tickets.
I do not condone the 2022 Russian invasion of Ukraine. The World Cup of 2018 being hosted in Russia was a decision taken by FIFA and I have no political affiliations. If you are looking to support Ukraine in its recovery, donations can be made and more information can be found on Ukraine.ua.
Interactive Map
The main welcome screen of the website provides the user with an eye-catching map of Europe, with each of the qualified nations assigned to a unique marker. The map was created using Snazzy Maps as they provide high-quality, accurate map illustrations that can be used as the centrepiece of the application.
Interactive Map of Europe | World Cup Nations Guide
The website was developed using the responsive web design methodology, which ensures the users have an optimised experience on mobile, tablet and desktop devices. CSS media queries were used to ensure the content fits the size of the device and image assets were compressed so they load quickly on a mobile 3G network.
Responsive Design on Mobile, Tablet and Desktop | World Cup Nations Guide
The main interactive elements of the project are the map markers. When a marker is clicked, a modal opens with information about the selected country. The modal was built using Lity as it is a lightweight and accessible lightbox tool.
The content of the modal was split between two tabs, which are aimed at two types of users:
- Sports fans who are interested in watching a national football team play.
- Tourists who are interested in travelling to a specific country.
National Team Profile
The modal displays a carousel of images that allow the user to become familiar with the players of the national football of the country that was selected.
Croatia Football Team Profile | World Cup Nations Guide
The content for the team profile details information that sports fans find interesting such as how the country qualified for the World Cup and their chances of progression at this tournament.
Once the content for the nation has been digested, the user is then given a call to action that takes them to the football association of the respective country. This way, the application can be used as a tool to drive ticket sales for upcoming matches that the national football team is playing.
Country Profile
The second screen provides the user with reasons to visit the country such as culture, weather and tourist attractions.
Croatia Country Tourist Profile | World Cup Nations Guide
Given the primary focus of the application is for sports fans who are interested in the World Cup, additional effort was required to bring tourism-related content into this overall international theme. Additional photography of the country was added to the carousel to inspire users to travel there on holiday. A video from the tourist board was added to the page to add interactive multimedia and provide users with more incentive to visit the country.
Finally, the user is given a call to action that takes them to the tourist board website from the suitable country. As a result, the user can utilise the application to learn about a country and then facilitate travel afterwards.
Custom Events Tracking
The website makes use of custom events using Google Tag Manager and Google Analytics. Using the CAL Methodology (category, action, label), the application fires an event every time the user clicks:
- A map marker of a country.
- The football association link in the national team profile.
- The tourist board link in the tourist country profile.
Using this approach, we can collect data in Google Analytics for each call to action and measure the success of each respective country.
Having the data collected in this approach means it can be analysed and visualised in Google Data Studio. Using this approach means we can easily understand the most popular countries and the conversion rate for both match tickets and tourist enquiry leads.
Final Thoughts
The project was a great opportunity to explore my passion for sports in the form of an interactive map. It was enjoyable working collaboratively to create the content for each of the suitable countries.
The project enabled great exposure to Google Tag Manager and the ability to create custom events. The approach used is relatively quick and easy to set up, however, it provides a wealth of insightful analytics data that can be used to gain a more advanced understanding of how customers use the application.
From a development perspective, new skills were picked up by using Snazzy Maps for the custom map graphic and Lity for the modal content – both will be added to the arsenal for future projects.
No financial gain was made as a result of creating this conceptual project. If you have any potential legal enquiries, please get in touch via my contact page.