Tottenham Hotspurs Landing Page
I dedicated my spare time to a personal project aligned with one of my passions-watching my favorite professional soccer team, Tottenham Hotspurs! Therefore, I decided to create a landing page and thank you page for their website. The goal of this landing page is for users to sign up for their email newsletter. Strictly following their brand guide.
Project Type
UI/UX | Wireframe | Prototype | Branding | Desktop and Mobile Design
Date
09/23/2024
Timeframe
Week long design sprint
Used Softwares
Adobe XD | Adobe Illustrator | Photoshop | Procreate
Research
After dedicating a day to researching how to create an effective landing page these are a few of my key takeaways.
CALL TO ACTION
This page should follow the brand guide of the rest of the site.
Know your target audience.
Use white space to keep visitors engaged and focused.
Visitors should be able to grab all information in seconds of opening the page.
Make sure the page is responsive.
Craft a benefit-focused headline.
Choose and image that illustrates the offer.
Write a compelling copy and speak directly to user by using “you” and “your.”
Have a form that is easy to access.
Keep all important information above the fold line.
Make sure the landing page is free of distractions to keep users focused on the main goal.
I also did research on Tottenham Hotspurs’ brand guide to make sure my design would look like a part of their site and this is what I gathered.
Target Audience
The primary target audience for Tottenham Hotspurs includes football enthusiasts, loyal supporters of the club, fans looking to buy tickets to attend games, and individuals passionate about the English Premier League. This demographic spans various age groups, with a particular focus on fans who actively engage with the sport, attend matches, purchase merchandise, and seek exclusive content related to Tottenham Hotspurs. Additionally, the club targets a global audience, appealing to fans from diverse backgrounds who share a common love the team and the beautiful game. Although a fan can come from anywhere in the world. The people actually visiting their website are people that want to buy tickets to attend games. Meaning they are most likely located near or in North London where this team is located.
Initial Sketch
This is the initial sketch I created in Procreate on my iPad, aiming for a simple, distraction-free page with ample white space following the Tottenham Hotspur brand guide. Key information is above the fold, ensuring a clear and accessible call-to-action. Sponsors and socials are placed at the bottom for consistency with other pages. Only the team logo in the header to keep focus on the main goal of the landing page.
Possible Headlines
After understanding the target audience for Tottenham Hotspurs, I came up with the following headlines and sub-headlines for the landing page.
Headlines
“Come On You Spurs! Stay in the Loop!”
“Redistribute the passion! COYS!”
“Bleed Lilywhites? Join Us!”
Sub-Headlines
“Unlock access to exclusive content, news, and special offers - Join the family today!”
“Sign up for exclusive news, updates, and behind-the-scene action - Your passport to the heartbeat of Tottenham Hotspurs!”
“Don’t miss a highlight - subscribe for all things Tottenham and connect with fellow fans worldwide!”
I understand the significance of choosing the right headline for the landing page as the the headline is one of the first thing the user will see. It needs to be concise, to the point and relatable to the user. Therefore, immediately I knew that I wanted the headline to have “Come on You Spurs” or “COYS.” This is a very common saying amongst the fans. In the end, I decided on the first headline and sub-headline in the list above.
Lo-Fi Wireframe
Creating these lo-fi wireframes allowed me to focus on the essential functionality and user experience of each webpage. By simplifying the design, I could prioritize intuitive layout and navigation, ensuring that the interface is user-friendly and effective.
Prototype
For the landing page background photo, I strategically chose Tottenham’s two key players. Heung-Min Son, the team captain, and James Maddison, the vice-captain. I chose these two for their significance within the team. Notably, Heung-Min Son’s gesture in the left photo draws attention to the focal point of the page - the email form.
To maintain simplicity and user focus, I opted to display only two upcoming fixtures. This design choice aims to streamline the user experience and emphasize for the primary goal.
Another thing I decided to change in the prototype from the rough draft was the location of the links on the landing page. At first I had it right below the photo but I wanted to make sure the user stayed on this page and not get distracted to any of the other pages on the site. Therefore, on the thank you page, after they signed up to the newsletter, it moved above the upcoming fixtures so they could explore the other pages on the site.
The following are the mobile versions of these pages that I created.
Final Thoughts
As the second UI/UX design project I tackled, I believe that this turned out very well. I know that there is always room for improvement and I welcome any feedback. The next steps to this project would be to take it out on the field and get feedback from actual users and fans. I could play around with different photos and headlines to see which ones grab the attention of the user the best. As always, the design process is iterative so the design can always be improved!
Thank you for reading and take a look at my other designs!