St. Louis Bar & Grill Website
2022-2023 / Website Design + Strategy
St. Louis Bar & Grill is a fast casual restaurant chain in Canada. I was tasked to redesign their website so it better reflected their fun, bold, Devilishly Good brand, and provide an overall refresh to their outdated site. I started the project with strategy research including competitor analysis, working closely with the St. Louis team to create the fresh new look with their existing brand elements.
The Problem
The previous website for St. Louis Bar & Grill lacked cohesion with the branding, and the functionality wasn’t very streamlined for the average user. The primary pages that the team felt needed fixing in terms of function were the home page and the menu pages. The overall look and feel of the website also needed updating to be more consistent with the bold St. Louis Bar & Grill brand.
The previous site’s home and menu pages.
Home Page Functionality & Overall Design
On the home page, they felt that the primary reason the user would visit the website – the menu – was missing, and there was a lack of personality throughout. They didn’t want to showcase the limited time offers banner so prominently, and the Franchising Opportunities wasn’t a priority for them.
The overall design of the site lacked many of the St. Louis brand fonts, and the team felt the white background on every page was very stark and boring, and “could have been any website”. The navigation on both the header and footer of the website felt clunky and was inaccessible. They also wanted to have a focus on their mobile app in the footer.
Menu Pages Functionality
The menu pages needed a serious overhaul, especially since it was the number one page that users navigated to after the home page. The team felt that the menu images were too small and looked really clunky. The navigation to the different menu categories was confusing to navigate, and wasn’t clear for the user.
Phase One:
Strategy + Research
I began the project with a strategy call with the St. Louis team, asking them a series of questions about the brand and what they’d like to see with the new site. We went over the goals of the site, who the current users are and do’s and don'ts with the creative.
I took all of this information and performed a Site Audit on the current site, analyzing the core pages and what was and wasn’t working with each, as well as my functionality & design suggestions.
St. Louis Current Website Audit (click to enlarge)
Once the Site Audit was complete, I researched their current competitors’ websites and created a document on what was and wasn’t working with those sites. I also researched some inspiration websites from other food brands that weren’t direct competitors, but had sites that were working very well in terms of design and functionality.
Competitor Research
Inspiration from food brands that weren’t direct competitors to St. Louis
The research that I conducted for the website was a great starting point to the design direction that I would go in for the St. Louis website redesign, especially in terms of functionality. It was great to see the strengths and weaknesses of the competitors, and how the new St. Louis website could be better.
Phase Two:
Sitemaps + Wireframes
Once the research phase was complete, I started on the Site Map and Wireframe concepts for the new website. One of the problems that the previous site had was the confusing navigation, so the team wanted to update the customer journey and focus more on the most popular pages. I created a new Site Map to streamline the navigation in the header, home page and footer.
Final Site Map for the new St. Louis website (click to enlarge)
I then created wireframes for the website, starting with the home page and menu pages, the two primary problem pages. For the home page I wanted to focus on larger images, different sections that actually reflected what the user wanted to see (including a prominent section on “Fan Faves” menu items), and a more organized header & footer. I proposed that the menu pages had a sidebar with the menu categories and larger images so the user could easily find what they were looking for.
Home page initial wireframe concept (click to enlarge)
Menu page initial wireframe concept (click to enlarge)
Phase Three: Final Design
Once we had the new website’s functionality decided, it was time to move onto the final design!
Final home page design
Home Page & Navigation Design
For the home page, I wanted to create more colourful sections that reflected the brand, plus add in more brand elements such as the devil’s tail and the rip texture. The header navigation is less clunky and simpler, showcasing the primary pages that the user would be interested in, plus a highlighted CTA to place an order or check out the app. I changed the above-the-fold section to be simpler, and with the “See Menu” CTA as that is the the most likely page the average user will be navigating to. We focused less on the limited time offers, moving them from the main above-the-fold banner to a smaller “What’s On” section. I also added the “Fan Faves” menu section, highlighting some popular items on their menu, or items that the team wants to focus on. I added smaller sections focusing on their cause, Autism Awareness, and their Franchising opportunities. Lastly, I added in a large footer that features their mobile app as well as more organized sections and a smaller newsletter signup area.
Menu Page Design (click to enlarge)
Who We Are Page Design (click to enlarge)
Menu Page Design
For the new menu design, I added in a sticky sidebar with the menu categories so the user could easily flip through to see all of the dishes that St. Louis offers, as well as an Order Now CTA that led to their online ordering platform. The photos are larger and the overall design is much cleaner and easier on the eyes vs. the previous menu design.
Who We Are Page Design
Another page that was missing in the previous website was an “About Us” page, so I designed a new page to showcase the history of the company and it’s values, including a focus on their contributions to their cause, Autism Awareness.
Mobile Home Page Design
Mobile Design
The team wanted to ensure that the mobile website was as clean and streamlined as the desktop, as a majority of their users visited the site on mobile. I made sure that the pages and sections were easy to navigate through and read.
Mobile Home Page Design
Final Thoughts
This was a really fun project! I believe that the site refresh was a very impactful and much needed upgrade from their previous website, as it now reflects their brand voice much better. The functionality on the site is now easier to navigate and actually prioritizes the pages that the user most likely wants to visit. I’m excited and proud of this project!