Silver Linings Cooking
A responsive website for a suburban catering company.
TIMELINE
80 Hours
ROLE UX Researcher UX/UI Designer
Overview
Silver Linings Cooking is an up and coming catering company based in Metro Detroit. It is a small business comprised of the two caterers who built the company. The company was established in 2020 and launched their website in 2021.
The current website is confusing and difficult to navigate, therefore their only client base has been through friends and word of mouth.
Problem
Update the website by improving the visual appeal and functionality to create a seamless user experience and optimize SEO to grow their customer base.
Solution
The new design has made the ordering process easier for both the caterers and the customers. With the publication of the new design, online ordering has doubled!
Old Design
New Design
My Design Process
Research
Usability Tests
Affinity Map
Competitive Analyses
User Persona
Feature Roadmap
Site Map
Define
Mid-Fidelity Wireframes
UI Kit
High-Fidelity Prototype
Design
Usability Tests
Iterations
Test
The current website is not prioritizing the main lucrative aspect of the business: recipes, blog posts, etc. are all given the same prioritization as the actual catering
I want to make the catering (menus, online ordering) the star of the show to improve business traction and customer satisfaction
Once the customer base grows, the client can focus on the other aspects of the business that they enjoy creating to expand on their dreams for the company
Research
Based on my conversation with the clients as well as my own investigation of their website, I determined the goals of my research:
Research Goals
Conduct research on local competitors
Determine pain points for customers navigating through the website
Learn questions that customers have when ordering catering
I conducted a usability test because I needed to observe user interactions with the current website and note pain points/room for improvement. I wanted to see what needed to be fixed and what was working instead of starting over.
Assessing the Damage
100% had questions about the ordering process
100% had a hard time navigating through the website
Quantitative Results
Catering page is difficult to navigate: each menu category opens to an entirely new tab
Catering form is confusing: can’t specify what you want to order
Website is somewhat visually appealing but improvements can be made
Navigating from page to page on the website is confusing: task bar is at the bottom of the page
Some pages on the website seem confusing/unnecessary: store page is empty, gardening page is not related to catering
Conclusions
I created an affinity map based on my usability test results. This helped me organize my user’s pain points/suggestions in order to prioritize changes.
Organizing and Analyzing
Assessing the Competition
I asked the clients who their main competitors were and conducted a competitive analyses.
Competitive Analyses
2 out of the 3 websites were not high quality/visually appealing and were not as user-friendly as I would have suspected
The 1 website that was higher quality was said to be less of a competitor to their business because they are higher-scale
I learned that these are long-established companies in their area, thus the quality of their websites is not as important
I was left confused after my analysis:
Conclusions
The quality of Silver Linings’ website is important because they are working to become as established as these companies.
Define
I created a user persona to help represent the customer base of the website. This helped me remain focused on who I was designing for throughout the design process.
Who am I Designing For?
User Persona
I created a feature roadmap to help me with prioritization in my design process. I went through their current website to see the existing features and prioritized based on what what would be the most important for the consumer.
Prioritizing the Design Process
Feature Roadmap
I created a site map to help me organize the new layout of the site and visualize how a user will navigate through. I used my secondary research of catering websites to help me organize.
Re-Organizing the Navigation
Old Website
old and new for comparison
Design
I started the design process by researching popular catering businesses and noting what worked visually and functionally. I then began designing my wireframes.
Bringing the ideas to life
Redesigning Around Pre-Established Branding
After completing my initial wireframes, I worked to establish the design elements of the website. The clients wanted to keep their original logo, so I based the UI kit around that, with a fun yet professional feel in mind.
Prototype
With the UI kit and wireframes complete, I moved on to create a high fidelity prototype on Figma.
Comparing the Designs
OLD
NEW
For the general menu, the client has an order form that they say has never been used. Customers need to reach out to place an order. I confirmed that they prefer to be contacted for general orders anyway, so I made the information easier to access.
Client offers weekly preset Shabbat order options. They typically have three to choose from but allow the option for customization.
Test
I sent out my Figma prototype and conducted usability tests over Zoom.
5 participants from various backgrounds were observed and offered feedback. Participants were given two tasks to complete: contacting for a general menu order and customizing a Shabbat order.
Participants were then asked to provide general feedback on the feel/flow of the website.
Tasks
Task 1: submit a customized Shabbat Order
Results
Task completion rate: 100%
Task 2: browse the general menu and contact to place an order
Task completion rate: 100%
On the Shabbat order form, I received feedback that the plus sign under the soup option was confusing. I went back to my design to find a more intuitive solution.
Iterations
Learnings and Next Steps
Since I was working on updating an already existing website, I learned the importance of user feedback in figuring out what works and what doesn’t.
I learned the difficulties of navigating the needs of the user with constraints from the client. Having continual check-ins with the client throughout the design process was crucial for keeping me on track.
Without running ideas and designs by the client, I would have found myself losing time by going back to change already completed designs.
After completing this project, I continued to design for the remainder of the site. I published the completed website using Wix, and I continue to update their website as their business grows.
