The Sweet Sap

Redesigning a local business' website to provide users with a more seamless experience.

Background

Many restaurant websites tend to include similar types of content, such as menus, reservation options, information about private events, and the ability to place orders online. This can make it difficult for a restaurant's website to stand out from the competition unless it has a unique specialty or offering. For small businesses in particular, it can be a challenge to differentiate themselves based on content alone. In these cases, it becomes especially important to focus on creating a user-friendly website with an attractive design that reflects the identity of the restaurant itself. This can help to attract and retain customers and make the website more memorable and enjoyable to use.

My role

Timeline

Tools

Client

UX/UI design, research, information architecture, wireframing, prototyping, usability testing

3 months

Figma, FigJam, Mural, Notion

The Sweet Sap

The problem

Based on my observations of the current website, the client and I have identified these areas for improvement on the Sweet Sap website:

• The website currently has an unevenness to the simple yet hectic design.
  
• The menu is difficult to read due to the high contrast, small font size, and a lack of formatting.
  
• The website is not responsive on both web and mobile browsers, which can make it difficult for users to access the website on different devices.

*These screenshots were taken after the client had updated the website on her own, not original images I showed to the users during the user interviews.

The solution

• Improve the website's overall aesthetic and visual appeal to attract more customers and make a strong first impression.
  
• Enhance the website's overall usability and accessibility, ensuring that it is easy to navigate and use for all users.
  
• Make it easier for users to find and access information about the mission of the restaurant, as well as its menu, location, and hours of operation.

Market Research

As part of my research for the project, I looked at a variety of websites for different types of restaurants to see how they convey their mission and message through their layout, aesthetics, and overall vibe. Understanding these trends can help inform the design choices I make as I work to revamp Sweet Sap’s website. Through this process, I discovered that there aren't many opportunities for restaurants to differentiate themselves through content, but rather through the layout, aesthetics, and overall feel of their websites. I conducted comparative research to gather this information, examining websites of 10 sit-down restaurants and 10 fast food restaurants to come to these conclusions:

• Sit-down restaurants have a more sophisticated look, with a focus on color schemes that include black, white, blue, and neutral tones. These restaurants often display their menus as images or PDFs, without any/many photos of the dishes.
  
• Fast food restaurants prioritizes efficiency and straightforwardness, often displaying nutritional information alongside images of menu items and using simple and easy-to-understand descriptions and images.

User research

To gather insights and gather feedback on the website design and functionality, I conducted virtual semi-structured user interviews with 10 individuals within the target demographic of 21-42 years old. The goal of these interviews was to gather valuable insights and suggestions from this specific age group, as identified by the client as a key audience for the website. The following are the results of these interviews:

• 80% of participants mentioned that the home page seemed cluttered and overwhelming, with some finding it overstimulating.
  
• 100% of participants mentioned that the menu text was hard to read due to its small size.
  
• 100% of participants suggested that including photos of the food and restaurant would help them better visualize the dining experience.

What does Amanda think?

To better understand the needs and preferences of our users, I used the findings of the user interviews to create this persona, Amanda, that represents the target audience for our restaurant's website. I aimed to empathetically understand the experiences and challenges that users encounter while navigating restaurant websites. By addressing the pain points and frustrations that users shared with us, I hope to create a website that is more intuitive and enjoyable to use.

Ideation

Feature set

Based on research and feedback from the client, I noticed that some key features should include:

Site Map and Information Architecture

Idea shift and iteration

After discussing the various options with the client, we made the decision to make a few changes to the original plan. Initially, the client had expressed an interest in adding a reservation booking feature to their website. However, upon further consideration and research, we realized that this may not be feasible due to budget constraints and limitations on website templates. So I proposed to implement a third party reservation system instead.

Additionally, I had originally proposed the idea of implementing an online ordering function on the Sweet Sap website. While the client was open to the idea, I found through user interviews that this might not be necessary. All of the users I spoke to already had third party ordering apps installed on their devices, and expressed that they primarily used these apps for the convenience of delivery. As such, the client and I determined that offering online ordering directly through the Sweet Sap website may not be a viable option at this time.

Wireframing

Prototyping

Some main pages included in this prototype:

• Home page
• Private events inquiry
• About us
• Store information

I conducted semi-moderated usability tests virtually with 10 participants via Google Meet to better understand the user and client's preferences.

Iterations after usability testing

After the testing, I attended a client meeting, where I presented the findings and other identified areas where I can improve the UI and user experience on the website to make it easier to navigate. I wanted to ensure that the website not only meets the needs and preferences of our users, but also maintains an aesthetic that is consistent with the vibe of the restaurant. By making these changes, I hope to create a website that is both easy to use and visually appealing.

Before & afters:

Other changes made:

• Refined the wording on some descriptions to keep the information about the restaurant concise and straightforward.
• Implemented hover state buttons to indicate which page the user is currently viewing.
  

Future steps

If I had no constraints, I would:

• Create the design for when users are making a reservation through the website.
  
• Create the design for online ordering straight through the website, rather than with a thirdparty website.

What I would have done differently:

• I would have loved to conduct a more comprehensive research by sending out surveys to a variety of groups of people, not just the ones our client requested. By doing this, we could have gathered valuable insights on how the restaurant's website could attract a more diverse audience.

Let's connect!

Email: Jacquelinehe97@gmail.com