Key Deliverables:

  • Bespoke Web Design & Development
  • Responsive Web Design
  • Country Information Copywriting and Research
  • Google Tag Manager Custom Events
View Website

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

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:

  1. Sports fans who are interested in watching a national football team play.
  2. 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

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

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.

A Selection of Some of my Best Work

I have completed a variety of client projects from a diverse set of industries – as well as a few conceptual projects. Have a look over my portfolio projects and get inspired about our next project.

The White Dress Bridal

The White Dress are a Scottish bridal boutique chain that offers a wide range of dresses and gowns for bridal parties and events.

They required a website that would give them an online home and showcase their range of bridal gowns and accessories.

View Project

The Cou Cou Corner Cocktail Bar

The Cou Cou Corner is a conceptual premium Caribbean cocktail bar based in the city centre of Edinburgh.

They provide a range of Caribbean cocktails and food in addition to live music and masterclasses. The primary target audience is white-collar workers and tourists.

View Project

Money Tree Expense Tracker App

Money Tree is a conceptual expense-tracking app that allows you to monitor your spending and budget more confidently.

The app provides reports that encourages users to budget and identify where suitable changes could be made to achieve better financial health.

View Project

Highland Kilt Connections

Highland Kilt Connections are a highland wear chain that offer a wide range of kilt outfits for hire as well as bespoke made to measure.

They required a website that would provide a new online home for their brand and showcase their extensive range of exclusive tartans.

View Project

Almond Valley Property Centre

Almond Valley Property Centre are a letting agency who offers residential letting and property management across West Lothian.

They required a website that would advertise the letting services they provide, along with a dynamic feed of the latest available properties.

View Project

Front-End Developer with an Eye for Design

I am a Web Developer specialising in front-end development. My strength is turning a design mockup into a dynamic, interactive web application. I enjoy making an app fun and engaging for users, whilst having strategic business goals in mind.

I graduated from Napier University in 2016 and also have a Diploma in UX Design. My agency and freelance experience mean I can offer your company a diverse skillset covering web development, digital design and SEO.

Learn More About Me

Ready to Work Together?

Do you have a project that you want to work together on or want to hire me as part of your team? If so, I would love to hear from you.