OVERVIEW

ROLE

Fournée Bakery

UX/UI Designer 

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

SOFTWARE

Sketch, Illustrator

DATE

June 2018

Project Takeaways

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. 

Wireframes

The approach for the wireframes was to ensure that the design would be compatible with a desktop, Ipad, and mobile device.

Screen Shot 2020-02-01 at 12.18.09 PM.pn

Interactive Design

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. 

iPad_Home.png

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. 

iPad_Menu@2x.png
iPad_Menu_Open@2x.png

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.

Desktop_Contact@2x.png

Let's Connect

Feel free to reach out for jobs, projects, and collaborations!

icons8-linkedin-104.png
icons8-dribbble-96.png
icons8-instagram-96.png