Sector:
Sector:
Sector:
Hospitality
Role:
Role:
Role:
Lead Designer
Maggie’s Rock ‘n’ Rodeo is Scotland’s first country-themed bar, with it’s own Buckin’ Bull and exciting in-house events including the Cowboy Ceilidh, Rodeo Riders, and the Cowboy Stripshow to name a few. Previously known as Maggie Mays’, they underwent a major rebrand and since then the venue has been growing in popularity and the team behind it have been able to add exciting new events to the roster. Their original website was built to host the events and offerings that were available at the time of the rebrand, but wasn’t scaleable enough to keep up with the venue’s evolving operational setup, leading to the events fighting for visibility on the site.
Maggie’s Rock ‘n’ Rodeo is Scotland’s first country-themed bar, with it’s own Buckin’ Bull and exciting in-house events including the Cowboy Ceilidh, Rodeo Riders, and the Cowboy Stripshow to name a few. Previously known as Maggie Mays’, they underwent a major rebrand and since then the venue has been growing in popularity and the team behind it have been able to add exciting new events to the roster. Their original website was built to host the events and offerings that were available at the time of the rebrand, but wasn’t scaleable enough to keep up with the venue’s evolving operational setup, leading to the events fighting for visibility on the site.
Step 1
Step 1
Discovery
Discovery
Discovery
The Challenge
The Challenge
The Challenge
The main challenge was an unscaleable site design that couldn't keep up with frequent event additions. Events competed for space, reducing visibility and impacting ticket sales. A secondary issue was a high drop-off rate with only around 10% of users completing the booking journey from first view to confirmation.
The main challenge was an unscaleable site design that couldn't keep up with frequent event additions. Events competed for space, reducing visibility and impacting ticket sales. A secondary issue was a high drop-off rate with only around 10% of users completing the booking journey from first view to confirmation.
Competitive Analysis
Competitive Analysis
Competitive Analysis
I analysed direct and indirect competitors to identify gaps, strengths, and user expectations. We were already ahead with a more streamlined booking process than most. Some competitors had further improvements via different systems, but switching wasn't an option due to operational constraints - so any enhancements had to work within our existing setup.
I analysed direct and indirect competitors to identify gaps, strengths, and user expectations. We were already ahead with a more streamlined booking process than most. Some competitors had further improvements via different systems, but switching wasn't an option due to operational constraints - so any enhancements had to work within our existing setup.
Analytics Research & Surveys
Analytics Research & Surveys
Analytics Research & Surveys
To delve deeper into the issues, I conducted a full web audit using tools such as GA4 to analyse user behaviour, PageSpeed Insights to analyse performance, Accessability and SEO, and user surveys to gain direct user feedback. From this I was able to identify area's of the site that were underperforming and gain a deeper understanding of the main pain points. I then met with the primary stakeholders to present my research findings and gain insight from their point of view.
To delve deeper into the issues, I conducted a full web audit using tools such as GA4 to analyse user behaviour, PageSpeed Insights to analyse performance, Accessability and SEO, and user surveys to gain direct user feedback. From this I was able to identify area's of the site that were underperforming and gain a deeper understanding of the main pain points. I then met with the primary stakeholders to present my research findings and gain insight from their point of view.
Step 2
Step 2
Planning & Ideation
Planning & Ideation
Planning & Ideation
User Flow
User Flow
User Flow
This site had 3 routes to focus on:
As a user, I want to book a table
As a user, I want to buy tickets to (event name)
As a user, I want to hire a space for a private event
Using these routes as a base, I created user flow diagrams to visualise the user journey and fully understand the process that users will be going through to achieve any one of the above statements. This allowed for more context to identify areas where the journey could be streamlined and how to reduce friction.
This site had 3 routes to focus on:
As a user, I want to book a table
As a user, I want to buy tickets to (event name)
As a user, I want to hire a space for a private event
Using these routes as a base, I created user flow diagrams to visualise the user journey and fully understand the process that users will be going through to achieve any one of the above statements. This allowed for more context to identify areas where the journey could be streamlined and how to reduce friction.
HMW Statements
HMW Statements
HMW Statements
I analysed direct and indirect competitors to identify gaps, strengths, and user expectations. We were already ahead with a more streamlined booking process than most. Some competitors had further improvements via different systems, but switching wasn't an option due to operational constraints - so any enhancements had to work within our existing setup.
I analysed direct and indirect competitors to identify gaps, strengths, and user expectations. We were already ahead with a more streamlined booking process than most. Some competitors had further improvements via different systems, but switching wasn't an option due to operational constraints - so any enhancements had to work within our existing setup.
"The booking process is cluttered and I'm not always sure of what's been booked"
How might we…streamline the booking journey and make the essential information clearer
"I struggle to find all the event information (price, time etc)"
How might we…present all the necessary event information in a more easily scannable was
"I want to hire a space for a private event but I'm not sure how"
How might we…make it clear what's available to book
Sitemap
Sitemap
After analysing the data from the previous steps and considering the primary pain points which were the lack of scannability and how the information was being presented. I started to work on the sitemap to visualise where the information will sit on the wireframes.
After analysing the data from the previous steps and considering the primary pain points which were the lack of scannability and how the information was being presented. I started to work on the sitemap to visualise where the information will sit on the wireframes.
Step 3
Step 3
Design & Prototyping
Design & Prototyping
Design & Prototyping
Wireframes
Wireframes
Wireframes
Using insights from the research and wireframes, I created prototypes to visualise the final product before building in Squarespace. I continuously referred to user stories to ensure clear paths, intuitive flow, and scannable content. The Prototypes were then shared with stakeholders for feedback on design, copy tone, imagagery, and overall feel.
Using insights from the research and wireframes, I created prototypes to visualise the final product before building in Squarespace. I continuously referred to user stories to ensure clear paths, intuitive flow, and scannable content. The Prototypes were then shared with stakeholders for feedback on design, copy tone, imagagery, and overall feel.
Lo to Hi-Fi Prototypes
Lo to Hi-Fi Prototypes
Lo to Hi-Fi Prototypes
Using insights from the research and wireframes, I created prototypes to visualise the final product before building in Squarespace. I continuously referred to user stories to ensure clear paths, intuitive flow, and scannable content. The Prototypes were then shared with stakeholders for feedback on design, copy tone, imagagery, and overall feel.
Using insights from the research and wireframes, I created prototypes to visualise the final product before building in Squarespace. I continuously referred to user stories to ensure clear paths, intuitive flow, and scannable content. The Prototypes were then shared with stakeholders for feedback on design, copy tone, imagagery, and overall feel.
Custom Code
Custom Code
Custom Code
This site was built using Squarespace as it was important for the venue team to be able to edit the site content themselves when needed (event time changes, menu updates etc). Although this is best operationally, Squarespace doesn't offer a large variety of widgets, so to push this design past the stock assets I created a number of custom widgets to improve functionality and the way in which information was presented.
This site was built using Squarespace as it was important for the venue team to be able to edit the site content themselves when needed (event time changes, menu updates etc). Although this is best operationally, Squarespace doesn't offer a large variety of widgets, so to push this design past the stock assets I created a number of custom widgets to improve functionality and the way in which information was presented.
Style
Style
Style
The original site paired wood texture overlays with the brands red and cream colour scheme to match the printed materials and venue design. While on-brand, these elements reduced scannability, the textured distracted from CTA's, and the colours lacked contrast for web use.
I updated the colours to meet WCAG contrast standards while keeping them brand-consistent, and replaced textured backgrounds with flat colours to improve focus on key visuals and CTAs
The original site paired wood texture overlays with the brands red and cream colour scheme to match the printed materials and venue design. While on-brand, these elements reduced scannability, the textured distracted from CTA's, and the colours lacked contrast for web use.
I updated the colours to meet WCAG contrast standards while keeping them brand-consistent, and replaced textured backgrounds with flat colours to improve focus on key visuals and CTAs
Booking Journey
Booking Journey
Booking Journey
Booking a table is a key function of the site, so it was important to make the process as seamless as possible. The venue uses "Design My Night" for bookings, which offers an embeddable widget. While most competitors used the default version, it lacked visual customisation and often felt out of place.
To improve this, I added custom code to better align the widget with the sites design and enhance the mobile experience, going beyond what competitors had implemented.
Booking a table is a key function of the site, so it was important to make the process as seamless as possible. The venue uses "Design My Night" for bookings, which offers an embeddable widget. While most competitors used the default version, it lacked visual customisation and often felt out of place.
To improve this, I added custom code to better align the widget with the sites design and enhance the mobile experience, going beyond what competitors had implemented.
+
%
Mobile Performance Improvement
+
%
Mobile Performance Improvement
+
%
Mobile Performance Improvement
+
%
Faster Mobile Load Times
+
%
Faster Mobile Load Times
+
%
Faster Mobile Load Times
+
%
Desktop Performance Improvement
+
%
Desktop Performance Improvement
+
%
Desktop Performance Improvement
+
%
Faster Desktop Load Times
+
%
Faster Desktop Load Times
+
%
Faster Desktop Load Times
Step 4
Step 4
Testing & Results
Testing & Results
Testing & Results
Performance Testing
Performance Testing
After the design was signed off, I began setting the design up on Squarespace using password-protected, hidden pages so as to not disrupt the exiting site until it was ready to fully transfer over to the new design. While setting said pages up, I continuously tested them using pagespeed insights to ensure there were no performance issues. What I found was that compared to the original reports I conducted using the original design was that the performance of the new sites were greatly improved with regards to page load speed and page size.
Overall
Overall
The site refresh proved to be a huge success, with improvements across the board including: Accessability, Performance, Aesthetics, Booking User Journeys to name a few.
The site was also now set up in a way that allowed it to be more scaleable, meaning it'll now be able to keep up with any operational changes in venue while still remaining consistent.