Bakery website

Role: UX/UI Designer

Duration: May - June 2022

Tools: Adobe XD

Overview

The goal was to create a mobile e-commerce experience for bakers to browse the catalog, find items they’re looking for, initiate checkout, and complete the purchase.

As a UX/ UI designer, I led the responsive website design from concept to delivery by conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs, determining information architecture, and responsive design.

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 revealed that user problems included obligations, interests, or challenges that make it difficult to go to the bakery in person to buy bread and other baked goods.

Personas

After completing the primary research, I interviewed 10 people who buy baked goods regularly to better understand their needs and goals. I then created user personas based on the user research that helped me paint a clear and realistic picture of users’ goals, needs, and behaviors.

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 easy and simple.

Wireframes

I started designing low-fidelity wireframes using Adobe XD for my low and high-fidelity wireframes. Throughout the different fidelity stages, continuous iterations were made to improve the website’s functionality and UX.

Desktop

Mobile

The high-fidelity mockups:

Watch the high-fidelity prototype here:

Style Guide

Impact and Learning

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

I learned that even a slight design change could have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.