Smallgoods Website Redesign

Overview

For a client project for my consulting club, Cornerstone Community Consultants, my team and I were tasked to redesign the website for Smallgoods, a locally owned cheese shop in La Jolla. Our goal was to make the website more user friendly, emphasize Smallgoods' branding and message, and create responsive designs to view on any device.

Role: Design Lead, UX Designer

Tools: Figma, Google Forms

Timeline: 2 months (April - May, October - November 2022)

Problem

In our meeting, the Smallgoods owners noted how they wanted to establish a larger web presence by having a website that showcases their food, hours, values, community impact, and directory to social media and online menus. They felt as though their current website didn't portray their brand well, and wanted to highlight key points, such as how they only use American cheese, supporting only local produce, and being the highest rated food shop in La Jolla on TripAdvisor.

They also wanted to fix their information architecture, as they felt that some key information, such as their intricate store hours, couldn't be easily recognized and understood. The website uses old technology such as WordPress, and they wanted to switch to something else.

Our team saw the opportunity to design an engaging website, and we asked ourselves:

How might we create a website that better captures the essence of Smallgoods' branding?

How might we reorganize and edit major information to be better presented on the website?

Solution

A complete redesign of the Smallgoods to establish their branding and reorganize their information architecture and hierarchy. The website will be designed, and then passed onto developers to make the website come to life.

Research

Website Audit

Competitive Analysis

Survey

My team and I went onto the previous Smallgoods website and did our own heuristic evaluation. We noted multiple different usability problems on the website.

Along with the website audit, we did competitive analysis on other food shops’ websites to help give us direction for what usable design looks like on food shops.

We also wanted to know what were the most concerning issues with usability and interaction on the website from users themselves. The owners also mentioned how they would love to know what users (especially college students) thought of the website, so that added more motivation to create a survey. The goal of the survey was to gather feedback on the user experience/interaction of finding menu items, catering options, store hours, and social media pages.

The survey got 30 responses, with most of the participants being ages 18 to 22.

Insights

Insights we discovered were how users found it difficult to find out more about catering options and order from off the menu.

70% of our respondents found it difficult to find more information on catering options. Common problems included not being able to find the catering page and the lack of pricing on the catering page. “I don't know where to look”, “Wasn’t sure what page it would be on (took me a while to find)”, and “No clear section that says catering or large orders” were some remarks that users said.

66.7% of our respondents found it difficult to find something to order from the menu. Common problems included that users felt “confused” trying to go through the menu, there was “too much scrolling”, and it was “hard to match the images with the products”.

Because of these two main factors, at the end of survey, 63.3% of users reported to have a negative experience with the website overall.

Ideation

We were specifically tasked with redesigning the home, about, menu, and catering page. My team created low fidelity mockups first, and then kept critiquing each other’s designs until we got to high fidelity designs.

Low Fidelity

Mid Fidelity

Design Outcome

We also refined the initial style guide that the owners had given us.

Navigation Bar

The previous navigation bar contained too much information that was irrelevant to the goals of the user, which is to find the menu or locate the catering information. We simplified the new navigation bar to make the menu and catering page more accessible.

Old

New

Catering

Users found the catering page hard to follow due to not being able to find the catering page, the lack of pricing, and overall confusion on how catering works. Our redesign demystifies Smallgoods’ catering process. We convey what kind of events catering is for, and the different options that Smallgoods provides.

Revamping Visuals

Old

New

More Information On Catering + Award

Frequently Asked Questions About Catering

A key component of our redesign was to create a more attractive and appealing interface with the use of images and visuals.

Old Homepage

New Homepage

Old About Page

New About Page

Full High Fidelity Screens

Mobile

The owners of Smallgoods emphasized their want to improve their website on mobile view as well, so we went on ahead and designed a mobile version of the website.

Reflection

This Smallgoods redesign project is my first ever client project! It was fun communicating with the owners of Smallgoods (and getting some sandwiches from them)! When I was first put onto this project, it didn’t continue throughout the summer. Many of the people on my team graduated before this project could end, and I offered to step up as lead designer on this project coming into this fall. There was now a brand new team of designers who never seen this project before now under my wing. It was definitely a struggle at first, but I didn’t give up and saw this project through. I’ve come out of this project learning how to create design systems from scratch, how to delegate design and research tasks to others, and communicate with stakeholders.