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.
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.
Interactive Map of Europe | 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 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.
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 (category, action, label) Methodology, the application fires an event every time a map marker is clicked, the football association link is clicked and when a tourist board link is clicked. Using this approach, allows data to be collected 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 in Google Analytics and visualised in Google Data Studio.
End Outcomes
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.