UX Evaluation and prototype development for www.shelbournepark.ie
Shelbourne Park Stadium's website is failing to capture user interest and convert visitors into paying customers. This is impacting ticket sales, event bookings and overall brand engagement.
Strategy:
Research including user analysis, an online survey, competitive benchmarking, comparative usability testing and wireframing culminate in a prototype for user testing.
Tools: Figma, SurveyMonkey, ScreenFlow, Adobe InDesign, Photoshop and Illustrator.
Timeframe: 3 months.
Impact:
• Increased Revenue: Higher ticket and event sales.
• Enhanced Brand Reputation: Positive user experience and strong brand identity.
• Improved Customer Engagement: Increased social media engagement and customer loyalty.
• Data-Driven Decision Making: Informed business decisions and optimized marketing strategies.
• Long-Term Benefits: Potential for new partnerships, diversified revenue streams, and operational efficiency.
Desired outcome
A visually appealing website that significantly improves user experience, boosts ticket sales, and enhances overall brand engagement for Shelbourne Park Stadium.
The brief and constraints
Conduct a comprehensive user research study to identify the root causes of low user engagement and conversion on the current website. Leverage insights to design and prototype a new website experience that aligns with user needs and drives ticket sales, event bookings, and brand loyalty.
Constraints included budget constraints and an outdated website platform.
Research
Survey attitudes
To gauge attitudes towards Shelbourne Park, using SurveyMonkey, I created a short online survey where I asked social media followers about their experiences.
Outcomes from the survey included:
• The most common use case was booking tickets, followed by checking racing results.
• Many respondents found the website 'very difficult' to navigate.
Outcomes from the survey included:
• There's a high level of user dissatisfaction with the website.
• Mobile responsiveness was considered lacking by many users.
• "More intuitive navigation" and "less intrusive advertising" were important user considerations.
Competitive Benchmarking
Next, I wanted to compare and contrast how Shelbourne Park dealt with layout, navigation and user flow in relation to other similar racing sites through competitive benchmarking.
Two big notes here were less internal advertising on our competitive's home pages and cleaner, more streamlined navigation.
Usability
To compare Shelbourne Park's flow to other websites, I then designed a usability test with 3 tasks for 2 users to complete.
1. Booking tickets for a particular event.
2. Booking a table in the restaurant.
3. Booking a group event.
To ensure the viewpoints of both racing enthusiasts and the average punter were taken into consideration, one user was a GRI racing manager and the other was someone with no industry knowledge.
Then, sitting down with both, I had them complete these tasks while recording it on ScreenFlow. The two websites I used to compare against Shelbourne were the Punchestown and Croke Park websites.
“I can see the restaurant booking button but not a lot else. Not sure where any of the racing information is.”
“I’m not sure where to go here, there's a lot going on over the whole page.”
The main takeaways from this round of testing were:
1. The different ad blocks in the hero section are confusing and distracting.
2. The navigation tabs need to be more intuitive.
3. The hero section needs to sell the whole 'experience' more.
4. The website layout is failing to be easily navigated for both industry insiders and the average user.
The solution
As seen below, the existing website has a confusing double layer of navigation and a logo running over one of the tabs. Based on my user research, we would need to clean this up and make navigation more intuitive. The google maps function would also need to be fixed.
Navigation
To start streamlining the navigation, I wrote out each page on a post-it and tried to group these into a smaller number of menu items. The result was 4 menu items and the important 'Welfare' content available as a sticky sidebar.
User flow
Going back to the original navigation, I went through each tab and page to make sure each one fit into a category in the new nav system. At this point, I added 'racing' and 'contact'. Sketching it out by hand originally, I then mocked up the new navigation and the user flow from the home page in Figjam so that my team could give feedback.
Low-fidelity wireframes
Next, I sketched out low-fidelity wireframes by hand. To enhance user experience, I added a Floating Action Button for easy access to the "make an enquiry" function.
The primary CTAs were strategically placed to direct users to the general admission booking page and the restaurant booking page. The hero section's CTA button links directly to the general admission booking widget, while a banner ad highlights restaurant offers and leads users to the appropriate booking widget.
And then, so that I could test out my sketches, I created further wireframes in Figma. These were tested within the Branding team and then shown to our stakeholders.
High-fidelity desktop prototype
One response from a stakeholder was "but where are the ads?". So to provide a clearer vision, I then built a high-fidelity prototype in Figma, using our new branding (see my branding project case study here). This would make it easier for stakeholders to understand the design direction and provide more meaningful feedback.
The restaurant ad was a design compromise. Although it would be visually cleaner to keep any ads below the fold, the board and stakeholders were keen to keep this element prominently displayed.
High-fidelity mobile prototype
As my research showed that 77% of Shelbourne Park's traffic comes from mobile, making sure the new layout worked for smaller screens too was essential. Tweaks here included losing the Floating Action Button on bottom right of the screen - to avoid the screen being cluttered, the FAB would only appear just above the fold and in the footer.
AFTER: Scroll through the revised mobile website experience below:
Delivery
• Low User Engagement: The existing website suffered from poor navigation, limited mobile responsiveness, and intrusive advertising, leading to user dissatisfaction and hindering conversion rates.
• Focus on Booking & Results: User surveys highlighted booking tickets and checking race results as the primary website activities.
The proposed solution involved a complete website redesign with the following key improvements:
• Simplified Navigation: A streamlined navigation menu with a maximum of four top-level categories aimed to improve user orientation.
• Mobile Responsiveness: The website was designed to adapt seamlessly to mobile devices for on-the-go access.
• Reduced Intrusive Advertising: A cleaner visual design with less obtrusive advertising aimed to enhance user comfort.
The high-fidelity prototypes developed for both desktop and mobile platforms will be utilised for further user testing and refinement of the booking process. Following further user feedback, the final design will be handed off to developers for implementation, with ongoing collaboration to ensure smooth interaction and animations.
Results
The redesigned website is expected to deliver significant benefits for Shelbourne Park Greyhound Stadium, including:
• Increased Revenue: Streamlined booking processes are expected to lead to higher conversion rates for ticket sales and event bookings.
• Enhanced Brand Reputation: A user-friendly and visually appealing website will contribute to a more positive brand image.
• Improved Customer Engagement: Easier navigation and mobile responsiveness will encourage repeat visits and increased user engagement.
This project demonstrates the power of user research in website redesign. By prioritising user needs and incorporating competitor best practices, the redesigned website for Shelbourne Park Greyhound Stadium has the potential to significantly improve website traffic, conversion rates, and overall brand image.
What's next
As the project moves forward, I'll focus on:
• User Testing: I'll conduct thorough usability tests to identify any pain points and areas for improvement in the user experience.
• Iterative Design: Based on user feedback, I'll refine the design and functionality of the website to ensure a seamless user journey.
• Development Handoff: I'll collaborate closely with the development team to provide clear design specifications and support throughout the development process.
• Deployment and Launch: Once the website is fully tested and optimised for all types of devices, I'll deploy it to the live server and monitor its performance.
• Ongoing Maintenance: I'll continue to maintain and update the website to ensure it remains up-to-date and user-friendly.
Next project >