Let It Brie
A responsive web design for a local cheese shop
Scroll for more ↓
Whether you’re going on a date night, or having lunch with your friends, this cheese shop is a local restaurant that provides food, wine, events, and large cheese boards. This is place where friends and loved ones can gather and experience all the different flavors of cheese and accoutrements they are served with. They are in need of a responsive web design to cover all the different things they have available.
Role: UX Designer (Research, Visual Design, Interaction Design, User Testing)
Tools: Figma, Adobe Illustrator, Adobe Photoshop, Miro, Trello
Duration: 2 Weeks (80 Hours)
Challenge: Create a responsive website and branding
Team: Self Directed, with feedback from the mentor and peers
Design Process
01 Research
Research Plan
Competitve Analysis
Social Media Benchmark
Field Research
User Interview
User Persona
02 Define
Sitemap
User Flow
03 Design
Lo-fi Wireframes
Branding
Style Guide
Hi-Fi Wireframes
04 Prototype & Test
Hi-fi Prototype
Responsive UI Design
Usability Testing
Research Findings
Wireframe Iteration
01 Research
Research Goals
The goal of this research is to better understand consumers (old and new) and what made them want to explore this business, as well as identify any potential opportunities and/or threats.
Others goals include:
Find the target market
What brings them to the restaurant
How did they find the restaurant?
What piqued their interest / what’s most interesting about the restaurant
Methodologies
Competitive Analysis - used to analyze the current market and identify potential opportunities and /or threats
Primary Research - Will interview participants to better understand their wants and needs
Field Research - Used to understand the cheese board market more and how they categorize charcuterie board items
Social Media Benchmark - What makes Let It Brie stand out from other cheese sh
Competitive Analysis
I started out with a competitive analysis to analyze the current market and identify potential opportunities and / or threats
Social Media Benchmark
To understand the local competition, I did a social media benchmark to find what made Let It Brie different.
What makes Let It Brie Different?
Family, Community, Small parties
Let It Brie is family oriented and community driven.
They have weekly events like wine and cheese nights and live music.
Because it is located in a college town, there are many students and young couples who like to visit, but their main crowd are people aged 45-65 who like to visit with friends or family for a meal.
Primary Research
Building on a general understanding of the market, I wanted to have a real connection with the customers and gain direct insights on them through primary research.
I went to the Let It Brie store, where I was able to talk to one of the owners. She was kind enough to sit down with me and answer a few questions. I then asked if I could interview a few of her regular customers, to which she agreed.
I created an interview guide to facilitate the user interview process and had asked a total of 13 questions, hoping to understand their needs for the website.
Here are a few takeaways:
The most popular way people found the business was through friends / word of mouth
Most people did not know anything about charcuterie before coming to the store and relied on the owners / workers to create their board for them
People liked that there was an element of surprise for the cheese meats and accoutrement
3 people were looking for the menu with images
2 people were looking for information on upcoming special events
Baby boomers seem to be the age range for regulars, although some have mentioned that many younger professionals visit as well, since there are many local businesses around the area. Boomers also rely on images to see menu items, and are less likely to purchase items if there are none.
User Persona
Through the research and knowledge about the regular customers, I created a user persona to represent the key audience. This helped me focus on addressing the major needs of the most important user groups.
02 Define
Sitemap
Let It Brie already had a basic website, and I wanted to improve upon it while still keeping the original skeleton. Some things I have added to their website is the blog and upcoming events, which would help regular customers feel more included in their community. This sitemap helped me to visualize the relationship between the content and examine the hierarchy.
User Flow
Since most people said they would go on the website to view their menu, I created a user flow showing how they would view the menu, and even order online.
03 Design
Lo-fi Wireframes
Initial sketches were created to get my ideas going. My main focus was on the menu page, but I also wanted to create frames for other pages that may be used or seen based on the user persona.
Style Guide
I completely redeveloped the visual style of Let It Brie to have a more calming and inviting vibe. This style guide incorporates the logo design, color palette, typography, imagery, and other UI elements needed for the hi-fi wireframes.
Responsive UI Design
I created responsive UIs to further help me examine the overall feeling and visual balance of the website.
Usability Testing
After making the wireframes, it was time to create the prototype, so people can interact with it and test the website. I proceeded with doing a usability test, where I was able to test out the prototype with 5 different people using 3 different scenarios. This helped me to understand the pain points and / or things that were not working about the website. Here were some takeaways from the testing.
Final Look
With all the high-fidelity pages designed, I built up the final prototype with the included revisions.
