Fourneé Bakery is a small artisan bakery and pastry shop located in Berkeley, CA.
This project was apart of my User Experience course at Berkeley City College. The assignment was to search for a company of our choice and re-design their website.
UX Research, Wireframes, High-fidelity Prototype
In this project, I obtained the following skillsets:
Interactive Design. I used Adobe XD to create the animation. With the menu being tucked away, I wanted to display what the user would see when they navigated throughout the different menus.
Re-designing Websites. I like the challenge of re-designing. It's similar to working on a puzzle piece. I learned that the best way to approach a website re-design is to research. Find out what the branding is, or if they even have one. In this case, they didn't have an established branding displayed on their website, so I had to search around to find out more about them to establish one.
Behind the Design
The goal I created for myself for this project was to have the website tell a story. What was the Fournée Bakery story and how do I portray that in this design? The three main things I changed for this website was the color theme, layout, and adding a section about the chief. It was through these three elements that I was able to capture the story of a passionate small artisan bakery and pastry shop.
Finding Information. The chef plays an important role at a bakery, so I wanted to include a quick bio about him on the menu page. I believe that knowing who the chef is, what his background is, and why he opened this shop is important for users to read about. It not only tells the story but personalizes their experience with the company.
Color. The website had a black background with white text. I wanted to steer away from this because I believed it wasn't in line with the story they were trying to tell. Instead, I opted for the colors that were in their logo and packaging; gold and brown. I added secondary colors to assist with the color theme throughout the website, creating a consistent look and feel.
The approach for the wireframes was to ensure that the design would be compatible with a desktop, Ipad, and mobile device.
I focused on animating the menu page since it was the most unique part of the website. The current problem with the design was the amount of information on the menu page. I simplify the menu by hiding it behind the photos, so the user wouldn't bet overwhelmed with all of these options. Once the user decided what menu they want to look at, they can then click 'view menu' and get the exact information they're requesting without having to scroll through to search for it.
Solving the Problem
P // The home page consisted of one photo, an unorganized layout, and had a lot of information within the header.
S // I solved this by adding the contact information to the footer and incorporated yelp reviews to add content.
P // The menu took up the entire page, and there wasn't a faster way to search for specific information.
S // I solved this by using colors to organize the information, titling the different menus at the top, and adding a button at the bottom that will show an expanding menu. This saved up space and makes it easier to navigate through.
P // The contact page had a career opportunity section and an e-mail.
S // I added a more visually appealing design to the contact information by adding the map in the back. I also added the 'Career Opportunity' button to have it stand out.