UI Case Study: Mon Paris Bakery website design revamp
Year: 2022
Duration: 10 days
Figma, Illustrator and Photoshop
Introduction
Mon Paris is a French and European coffee shop & bakery located in Fort Myres, FL. The current website is outdated and has some design issues that I am set out to solve. Note that this is a personal project and it was conducted to test a design concept, it is not a real project that is based on communication.
Problem
The website is outdated and has some design issues that are confusing and disturbing to the user and would cause the user to quit the website resulting in fewer sales. In the next section, I will be discussing the current issues in detail.
Goal
The goal is to decrease the number of users quitting the website and increase sales by %80. This goal will be achieved by adding more features to the website, eliminating all design issues and re-designing the website to make it more visually appealing in a way that truly represents the brand.
Design process
1. Problem definition
I started my process by evaluating the current website layout and content to check for the weak points and to decide on what should be improved.
1.1. General issues
Starting with a general problem that was found in almost all web pages, the background image on all pages is distracting and sometimes makes it hard to read text. The typeface used is really nice for short text such as titles but using it for full paragraphs and adding a shadow to it makes the text hard to read. The text is center-aligned and that requires an extra effort on the eyes to check the starting point on the next line. There is no clear text hierarchy between different titles and body text. Furthermore, the website is not responsive and does not adjust the sizes based on the screen size which is mandatory nowadays.
1.2. Homepage issues
The homepage does not contain any call to action to direct the users on what to do and it does not highlight any important sections from the website. The logo is not in its default location, top left of the website, it is instead shifted down and another logo is added instead of it. This is confusing for the user when trying to go back to the homepage, because by default it is expected to click the top left corner logo to go back to the homepage. Moreover, the red tagline in the logo does not contrast well with the background and that makes it hard to read.
1.3. Menu issues
The bakery has a big menu with a variety of dishes that are organized in a way that makes it hard for the user to view the items. Menu items are divided into small cards, combined with a handwritten typeface and text-shadow making the items hard to see. In addition, the user has to scroll a lot to reach the end of the menu on the desktop, imagine how long the user has to scroll on mobile devices. This would result in the user feeling bored and quitting the website.
2. Research
I checked the competitors and analyzed the current state of their websites and checked their strong points. Thereafter, I identified the features I want to add to the website that is expected to improve it. I decided to allow the users to order online and make table reservations through the website instead of just viewing the menu.
3. Wireframes
After deciding about the features, pages, site map and information the website should have, I started by creating low-fidelity wireframes to roughly visualize the new look of the website and I identified the best practices to organize information.
The website will consist of 9 pages in total; homepage, about us, menu, online orders, pick up orders, cart and login, reservations, and contact page.
The homepage should feature the important sections of the website, such as menu items and online orders. The menu page organizes menu items in a way that makes them easier to navigate. The online orders page is divided into two pages, the first one is for delivery orders that redirects to uber eats and the second one is for pick-up orders, a cart and a login page to pay for pick-up orders. The reservations page allows the user to reserve a table for a number of people on a certain date and time.
4. Brand adjective
After completing the wireframes and before moving into hi-fidelity design I set a design definition. Since it is a French bakery, I wanted it to give a luxurious feeling so I chose design assets, typeface, icons and color palettes based on this.
Typefaces
Baskerville and Proxima Nova
Color palette
#1A1A1A
#1E2223
#CDBB6A
#F7F5E8
5. Logo design
The existing logo is actually really nice but it has some remaining white parts from trying to isolate it from the background. I tweaked it a little bit to make it match the new brand adjective.
6. Hi-fidelity design
The homepage now features the important sections from the website and has multiple calls to action. The menu page is divided into tabs based on categories and each category is divided into three subcategories indicating the origin of menu items. Users can now place their orders online for delivery and pickup and they can make table reservations.
.
The checkout page is clearly divided into three sections; cart, user info and payment. To simplify the process for the user, the user info section is divided into two small forms instead of one big form, with user details in one form and order details in another.
Conclusion and next steps
In this design project I revamped Mon Paris bakery and coffee shop website and fixed the design issues that are in the current website. New photos should definitely be taken for menu items and then add them to the design. In the next step I would like to implement a prototype and validate my design.
Comparison
.
