Patisserie

The product: 

A web page for a French Patisserie for users to order their products online.

Project duration:

December 2022

The problem: 

Not enough information of the product, lack of a note space for users to leave specific comments, the classification of the products.

The goal: 

Make a patisserie menu easy to access and with a detailed product information for better understanding of what the user is ordering. A section for notes to describe special requests.

My role: 

UX designer designing the webpage of PATISSERIE from conception to delivery.

Responsibilities: 

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

User research

I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research that a lack of information and a lack of make special requests when ordering online was frustrating.

Research showed that users needed a better classification system also a good search engine, and a space to leave notes when ordering online. Also was noted that users need make sure security of their payment information is priority.

‍

Pain points

_Security

Users need to be sure that they will receive what they ordered.

_Time

Users need a fast an intuitive way to order a product.

_Product

Lack of information of healthy products.

‍

Persona: Ivan

Problem statement:

Ivan is an extrovert engineer who needs to buy a cake from an online french patisserie because He wants to surprise his friend on her birthday who lives in france

User journey map

Mapping Alexis user journey revealed how helpful it would be for users to be able to personalize their order.

Sitemap

My goal here was to make an intuitive information architecture decisions to design a simple an easy website navigation.

Paper wireframes with screen size variations

Digital wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help make a simpler and faster user experience to get to the checkout page.

Digital wireframe screen size variation

Low-fidelity prototype

You can find the Lo-Fi prototype here.

Usability study:

Parameters

_{Study type:}

Unmoderated usability study

_Location:

United States, México, remote

_{Participants:}

5 participants

_Length:

5-10 minutes

‍

Findings

After conduction the unmoderated usability test the following findings stand out.

_Homepage

Users wanted to find promotions easily.

_{Product Description Page}

Allergens information was requested.

_Checkout

Users wanted to make sure the notes they left were in the confirmation page at checkout.

‍

Mockups

Based on the insight from the usability study, I added a promotions tab at the top of the homepage.

‍

I added a notes section and an allergens section to the product description page and I also added the confirmation of the users notes in the checkout page.

Mockups screen size variations

High-Fidelity prototype

You can test the hi-fi prototype here.

‍

Accessibility considerations

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

I used icons to help make navigation easier.

Provided access to users who are vision impaired through adding alt text to images for screen readers.

‍

Takeaways

Impact

Users thought the website was very easy to navigate and were happy with the notes section.

‍

What I learned

I learned that users ideas and requests always have to be considerate in the design to actually give the user what they need.

‍

‍

‍