Salome Katunzi | Catering Website Project

Project overview

Project brief

Mariam's Kitchen is one of the many food vendors who deliver meals to their customers' homes. Customers can purchase meals from her website by selecting from her menu, or they can order catering for an occasion and have it delivered anywhere in New York.

The challenge

The previous website for Mariam's Kitchen faced navigation issues, an unimpressive menu layout and challenges in accessing catering information.

Solution

I designed a user-centric website that simplifies the meal ordering process by making it easier for customers to browse and order food, enjoy meals and order catering experiences.

01 - redesigned navigation

I redesigned the navigation bar to include all the relevant sections and pages of the website for easy navigation.

02 - redesigned catering section

I redesigned the catering section to provide more information on the type of events that this business caters to. I also added a clearer primary CTA for people to make a catering order and a secondary button for users to download the catering menu. This is so that users can have all the information available to them and make it easier for them to get this service.

03 - redesigned footer

The footer was redesigned to incorporate all of the important links and contact information.
The new footer has a cleaner, more professional layout with adequate spacing between each section to ensure that users are guided to the most important areas.

04 - catering/order section (new)

I added a services section to clearly show the two services being offered.

05 - products section (new)

I added a product section to highlight select products from her brand

06 - Events section (new)

I also designed an events section to highlight events they have/will attend.

— step 01

UX audit of the existing website

The first thing I did was present the website to potential users to see what problems they were having. I did usability testing by using a zoom call to observe users engage with the website and obtain feedback from them.

I conducted a moderated usability test where I asked the user’s to complete the following tasks

Make a booking for a catering event
Order an individual meal
Reach out to the business and send them a message
View the entire list of dishes being offered

Feedback obtained from the users was:

No clear navigation bar to assist navigating the website
Catering section is easy to miss and lacks information
Unorganized footer with broken links
Menu is unimpressive and dishes are organized in a random manner.
It is difficult to browse the menu for a certain meal category.

Understanding the market and users

I then analyze the market to gain a better understanding of the catering industry, including how it has changed since the pandemic and what the current trends are, as well as who the target audience of the market is.

— step 02

Our targeted users

Based on the conducted research, the following user persona descriptions were developed to better understand the needs, preferences and pain points of the customers being served by Mariam's Kitchen.

Visualizing the user journey

I created a user journey map to better visualize how users interact with the product and achieve their goals. The user journey map helped me identify areas of friction in the user experience and opportunities to optimize the journey to provide a better experience for our users.

— step 03

Sitemap

The goal is to make it as simple as possible for users to navigate the website and place an order for a single meal or a catering order.

My focus was on optimizing the Mariam's Kitchen's website to provide quick access to the most significant information. To achieve this, I came up with a design that prioritizes the most relevant information and enables easy access to the available catering options and menu.

With this design, customers can quickly find the available catering options, menu and contact information. This approach ensures that users have a smooth and efficient experience on the website.

Wireframes

From the user flow, I generated a wireframe. Some aspects of the website will remain unchanged because the focus was on fixing what wasn't working and I added new sections to meet the users' needs.

All of the new and previously existing sections of the website are represented in the wireframe below.

— step 04

Brand Guide

Next, created a brand guide to help her communicate her business's design standards and ensure consistency across all future design assets. I created numerous brand assets for her to use in her business based on her brand guide. These are items such as business cards, T-shirts, and other stationery that are required by all businesses.

Results!!

20+ orders

Mariam, who only offered her catering services on weekends was booked for every weekend for the next 4 months. Her social media following on Instagram grew from 3000 to 10,000+ followers.

Take aways

Working within platform constraints (Squarespace) allowed me to be more creative and helped me make design decisions that are more focused on what's important.

The importance of excellent stakeholder communication throughout the process. By creating clear goals and transparent communication, you may help cultivate the client connection and set the tone for the project.

Next steps

The next steps will guide the implementation of the redesigned website, ensuring a seamless transition and a positive experience for users

Gather user feedback on the new design through usability testing and surveys. Iterate based on the received feedback to address any unforeseen issues and enhance user satisfaction.
Implement tools to monitor the performance of the redesigned website, including user engagement, click-through rates, and conversion metrics. Analyze the data to make informed decisions for ongoing improvements.

Catering Website Redesign