Redesigning a barbecue catering website to improve navigation and visual appeal.
UX Designer, Researcher, Tester, Developer.
July 2023 - Present
Being unique in a sea of similar peers is a common concern for UX Designers, but becomes an even bigger concern in the private event catering industry. Mike & Becca chose to specialize in barbecue catering and opened up their business, Scarlet Fire Barbecue (SFQ), in 2022. With playful The Grateful Dead inspired branding and innovative displays (namely, a barbecue sauce fountain. How cool is that?), people gravitated quickly to both their authentic charm and their comfort in operating at the intersection of elegant and laid-back.
The majority of their clients host weddings. Since so much preparation goes into planning a wedding, couples and wedding planners are often skimming quickly through multiple catering websites in order to find the perfect one. The information on Scarlet Fire Barbecue’s website needs to be clear, comprehensive, and easily found. However, their current website is the opposite:
While the food looks great, the website layout lacks hierarchy and visual appeal. It doesn’t reflect Scarlet Fire Barbecue’s business goals, information is difficult to find and the site failed to meet UX heuristic principles.
Wedding planners and couples don’t have time to carefully look through each catering site. I was determined to make SFQ’s website catch their attention and minimize frustrations. To keep user needs at the forefront of the redesign, I used the design thinking process to organize my thought process.
In order for Scarlet Fire Barbecue to be chosen for someone’s event, I had to understand what people were looking for when they were searching for caterers. Most of the events that SFQ caters to are weddings.
Therefore, I talked to two groups of people: engaged/recently married couples and wedding planners. Despite this, both groups’ criteria for finding a caterer was similar.
"I was looking for current and recent reviews as well as how places were presenting themselves. I wanted to know like, are they posting frequently and seem like they care?"
"I don’t want to get my hopes up just to see that they’re out of my budget, or waste time by contacting them and waiting for a response to know that they’re out of range.”
Sourcing my own users took a lot more time than I had expected, with interviews being scheduled across two weeks. In between, I did secondary research by looking on wedding discussion forms to see how people were vetting catering vendors. The general consensus was the same: pictures and trust are essential.
I compared SFQ’s current website with four direct competitors based in the New England area. I found them on the bridal Facebook groups that I used previously to find users for interviews. I picked direct competitors that were recommended by various commentors to ensure that the companies were favorable. While I found that most companies did not give any pricing information on their website, all of them had a menu page and plenty of pictures to showcase their offerings.
I used Jakob Nielsen’s 10 usability heuristics, the most commonly used set of heuristics for UX design, to evaluate where SFQ’s current site was at compared to industry standards. I discovered that the current site’s biggest problems were visual inconsistency and confusing users with images with no context attached.
The biggest issues were lack of visual appeal and not enough information, like reviews. While pricing was on SFQ's website, it was easy for users to miss when in a rush.
Since our biggest visual issues were consistency and aesthetics, my initial wireframing ideas used big pictures and repeating patterns. I also wanted to create a longer homepage so that all necessary information was in one place, versus scattered across pages like in the current site. Lastly, users cited reviews as a commonly desired feature, so they were sure to be included in the designs.
After presenting both versions to the SFQ owners, we decided on the second one because the most important pages were listed at the top, letting users click onto their desired page upon loading the website and without scrolling.
While the main ideas from the low fidelity stage were kept, I changed a few things to improve potential customers’ experience while using the site. First, I decided to use cards for the testimonials section in order to include profile pictures, so people are able to recognize that the testimonials are from the feedback of former clients. I also expanded the menu page to have sides and appetizers as two different sections for clarity and added an FAQ page. The color scheme is consistent with SFQ’s logo for continuity reasons and to represent the brand with color theory: a trustworthy green and energetic colors of fire by using red, orange, and yellow.
In order to see if users could find important information, I gave five users three prompts to complete based on the data I received from the research stage. I also asked them about their first impressions on the overall style and format of the website. These moderated usability testing sessions were done over Zoom. Below are cards explaining the prompts, their average error rate, average time for completion, and selected user quotes.
Can you find pricing info?
Average Trial Time: 58.87 Seconds
Average Error Rate: 1.6 Wrong Clicks
What catering style is used?
Average Trial Time: 16.02 Seconds
Average Error Rate: 0.2 Wrong Clicks
Where is extra info found?
Average Trial Time: 40.15 Seconds
Average Error Rate: 1.6 Wrong Clicks
User Quote #1
"The site feels very well intentioned and is super easy to navigate."
User Quote #2
"I was confused if the services provided were all aspects of one thing or if they were different packages that the company offered."
With these metrics, I learned that users had issues with finding pricing information. Another issue that they had was identifying different services; users misinterpreted the page sections as aspects of one overall service and not different options for service. Keeping their comments in mind, below are a few of the major changes I made.
People weren’t sure which menu items corresponded to each picture, and what items were vegan or gluten free.
Captions were added to each image and vegan/gluten free items were highlighted in a different color.
It was unclear if the page was explaining multiple aspects of one service or if there were multiple service options.
The above descriptions were kept, but this card directory was added to highlight that SFQ provides multiple service options.
As this was my first UX project, I definitely had to balance what I envisioned and the nature of reality. For instance, finding users to interview without a network or breaking the bank proved to be difficult and time-consuming. Coupled with being on a tight timeline, I decided to start sketching out ideas without a full research report. While I felt this wasn't "the proper way" to do things, I went back and revised the ideas upon receiving new information. By doing this, I was still able to be informed about my decisions while staying on track.
Another major lesson I learned was compromising between both business needs and users' needs. While a very common problem for users was lack of transparent pricing, the SFQ owners felt it was dishonest to put a number on the website when so many variables come into pricing, like party size, time of year, location, and what food items they pick. I had to find a happy middle ground for both sides and decided to incorporate a pricing section on the FAQ page to tell users why no definitive prices were listed, and how to get an estimate from the owners.
Lastly, I want to improve on the prompts I give to users during the testing phase. Upon reflection, I realized that one of my prompts was a confusing question and the results could have been skewed. The third prompt aimed to see if users could find SFQ's contact info, but the wording of the prompt made it seem like the task was actually to find a given piece of information within the site. In the future, I will likely make my prompts simpler to truly address the problems I want to assess.