The Cheeseboard Collective
UX/UI Design - Web
Overview
The Cheese Board Collective in Berkeley, California, comprises two worker-owned-and-operated businesses: a cheese shop/bakery commonly referred to as "The Cheese Board" and a pizzeria known as "Cheese Board Pizza". This restaurant is famous and always busy with locals, yet their website feels neglected because it’s so static. In this case study we wanted to revitalize this website to be more dynamic and increase user engagement.
Role
Research,
Design, Prototype
Team
Andrea Aguilar
Devi Chandra
Karren Suryajaya
Patricia Fnu
Duration
2 weeks
Tools
Figma, Photoshop
Problem
The current static Cheeseboard Pizza website suffers from information overload, with excessive text making it challenging for new customers to locate essential details and a lack of visual elements, in the menu section for instance, which can discourage exploration and hinder user engagement especially for new customers.
Research
The research aims to enhance the Cheeseboard Collective website's usability. It involves closely observing user goals, difficulties, and motivations, guiding the redesign process to improve the experience. The goal is to identify ways to keep users engaged while providing a streamlined and efficient interaction with the websites' features.
Heuristic Evaluation
We began our research with a Heuristic Evaluation of the current website. We identified significant heuristic violations with the website's learnability, efficiency, and satisfaction of use. Key findings as follows:
Overload of Text and Information: Excessive content led to cognitive overload, affecting readability and user-friendliness.
Lack of Visual Elements: Absence of images or visual representations of menu items makes it challenging for users to get a sense of what to expect.
Inconsistent Visual Hierarchy: Inconsistency in font sizes, styles, and text alignment throughout the website, making it difficult for users to identify important information quickly.
Ineffective Use of Calls to Action (CTAs): The website lacks prominent and clear CTAs, such as "Order Now," "View Menu," or "Find Us," which could guide users toward desired actions.
Minimal Interactivity and Engagement Features: Absence of interactive elements, such as feedback forms, social media integration, or user-generated content, which could foster engagement and community building.
Existing Homepage
Existing Menu
Existing Navigation - Location Only
Existing Special Events Page
User Interviews & Online Surveys
We conducted 5 remote online interviews to gain insight about the website's usability. Key findings are as follows:
Generally, users felt finding information on the website was overwhelming, especially for a newcomer. The text-heavy pages discouraged them to explore. The lack of visuals was also a drawback.
All of the interviewees agree that incorporating an online order pick up feature would be convenient and efficient due to the restaurant's consistent long lines.
Participant #4
" Overall, the website needs a revamp. It's not user-friendly for newcomers, and it doesn't do justice to their great food. "
Project Goals
We started defining the main focus of the project based on our research and further analyzing the current website. We came up with these proposed UX elements that we will focus on in the website redesign:
1
Interactive Menu
3
Navigation &
Parking Finder
2
Pick Up Orders
4
Intelligent Popups & Cheesebuilder
Sketches & Wireframes
Finally, we synthesized our best ideas and moved forward into the wireframing process. We polished our prioritized features for the web redesign.
Daily Menu
Pick Up Orders
Navigation (Maps)
Cheese Builder
Design Specification
We recreated the visual components making sure all the new components were in line with the existing theme colors and brand identity.
Typeface
Color Palette
UI Design
The wireframes is translated into the final design, which embodies all the visual explorations of colors, moods, and styles.
Homepage
Intelligent Pop-Ups
Menu - Pizza
Menu - Bakery
Menu - Cheese
Cheese Cake Builder
Navigation - Route
Navigation - Parking Spot
Pickup Orders - Pizza
Pickup Orders - Bakery
Interactive Menu
This feature transforms the Cheeseboard Collective's menu into a visually engaging and user-friendly experience. It incorporates images of the pizza offerings, making it more attractive and informative for customers. Moreover, the bakery and cheese menu lists are thoughtfully organized with filters, allowing users to easily navigate through daily and seasonal specials, as well as select from various cheese types, enhancing the overall user experience by simplifying the menu exploration process and catering to diverse preferences.
Navigation
This feature offers user-friendly directions from their current location to the Cheeseboard Collective restaurant, with options for walking, biking, public transport, or driving. It also includes a parking finder, displaying nearby parking spots from various parking apps and redirecting users to a chosen spot's details. This feature ensures a hassle-free journey to the restaurant, including parking, for an improved overall experience.
Cheese Builder
The "Cheesebuilder" feature offers an engaging and informative way for users to customize their order. Users can select from a range of options, such as cheese varieties and sizes, while seeing real-time updates on the visual representation of their chosen item. This feature also provides details like the total price, serving size, and more, making it a fun and effective tool for creating a personalized experience.
Pickup Orders
This feature allows users to order and schedule their pickups online, prioritizing time efficiency, convenience, and customer comfort. The menu is thoughtfully organized, presenting a wide range of products with the option to add multiple items to the cart. Descriptive pop-ups for each product offer users detailed information along with visuals. This feature streamlines the pickup process avoiding long lines at the restaurant.
Usability Testing
Once the prototype was ready, we conducted a usability testing with a group of participants. We asked them to complete a few tasks on the prototype to observe how users interact and navigate within the app.
Observations
-
90% found the navigation on the revamped website significantly easier
-
The "Cheesebuilder" feature stood out to 85% of the users
-
Overall, 80% of users had a positive impression of the revamped website
Insights
-
While the website was improved for desktop, users wanted mobile optimization as well to be developed
-
Further customization options within the "Cheesebuilder" feature, such as adding dietary preferences or more detailed ingredient choices
Takeaways
The Cheeseboard website revamp project was an enjoyable project, especially since the restaurant holds a special place in our hearts as a local favorite. We recognized that the website was overdue for a makeover. Our primary focus in this study was to infuse dynamic UX elements to enhance user-friendliness, ultimately creating a more engaging and enjoyable online experience for visitors.