Marc bakery Website Design

Marc is a fancy bakery that offers affordable and tasty products. The typical user is between 20-60 years old, most of the users are moms and grandmoms. Marc's goal is to make not only shopping fun but also easy and fast return and exchange items process.

My role:

UX Designer

UX designer leading the Marc responsive website design  

Responsibilities:

UX Designer

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design

Project duration

May 2021 to August 2021.

October 2021 to December 2021

The problem:

Available online shopping websites have cluttered designs, inefficient systems for retuning items, and a confusing exchange process.

The goal:

Design a Marc bakery website to be user-friendly by providing clear navigation and offering a fast and straightforward exchange and return process.

Process:

01

Understanding the user

1. User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target users and their needs. I discovered that many target users are eager to try new recipes and discover new tastes. However, many fancy bakery websites are overwhelming and confusing with the return and exchange process, which frustrated many target users. That caused an enjoyable experience by trying new products challenging and disappointing. 
2. User research: pain points

Navigation  
Bakery website designs are often busy or do not give enough information, which results in confusing navigation

Interaction
Hidden information or small icons about a return or an exchange frustrate the user and lead to dropping the task.

Experience
Online return or exchange websites don’t provide an engaging experience

3. Persona: Maya

Problem statement: Maya is a busy working mom who needs online exchange and return features, intuitive website navigation because she wants the return /exchange process to be stress-free.

4. User journey map

I created a user journey map of Maya’s experience using the site to help identify possible pain points and improvement opportunities.

02

Starting the design

1. Sitemap

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

2. Paper wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user's pain points about navigation, browsing, and exchange flow in mind. The home screen paper wireframe variations focus on optimizing the browsing experience for users.

Stars were used to mark  the elements of each sketch that would be used in the initial digital wireframes.
3. Digital wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.

 

Because Marc’s customers access the site on a variety of different devices, I created designs for additional screen sizes to make sure the site would be fully responsive.

 

Digital wireframes 
4. Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype.
The primary user flow I connected was adding an item to the cart and return/exchange process, 
so the prototype could be used in a usability study.

Low-fidelity prototype
5. Usability study: parameters
6. Usability study: findings  

These were the main findings uncovered by the usability study:

Cart 
Once at the checkout screen, users didn’t have a way to edit the number of items in the cart

Navigation 
Users would like to have more clues about steps in the exchange process

Return and exchange
Users weren’t able to easily find(allocate) the orders for return

03

Refining the design

1. Mockups

Based on the insights from the usability study, I made changes to improve the site’s exchange/return flow clues. One of the changes I made was adding numbers of steps to in return process. This allowed users to understand more clearly the flow. 

To make information about return /exchange more visible I added additional links on the top menu.  

2. Mockups: original screen size
Mockups: Original screen size
Mockups: Screen size variations  

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

4. High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team. 

Hi-fidelity prototype
5. Accessibility considerations

I used headings with different sized text for clear visual hierarchy.

I used high contrast rate for the colors

I designed the site with alt text available on each page for smooth screen reader access

Beautifully Designed

If it’s a billboard ad, you’ll need a super catchy headline and simple design due to the speed at which people will pass.

Buy Now  |  $79

Sticker sheet

Illustrations 

04

Going forward  


Impact:  Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

 What I learned: I learned that even a small design change can have a huge impact on the user experience.


Thank you!