Ginger’s Bakery

Local Bakery Site

This case study is focused on developing a desktop-first website for my client’s French bakery named “Ginger’s Bakery”. For this project, the client needed a digital storefront with information on the business and a place for customers to purchase products online.

Tools

  • Figma

  • Whimsical

  • Adobe Creative Suite

Timeline

  • Total Time: 3 Weeks

  • Research and Testing: 1 Week

  • Design & Prototyping: 2 Weeks

Role

  • UX Designer

  • UI Designer


Background

Background

Ginger's Bakery is a beloved local bakery founded by Ginger, who discovered her love for cooking at a young age in her mother's kitchen. After spending several years in France mastering French cuisine, Ginger now runs her bakery using fresh ingredients from her homestead, where she raises chickens, goats, and grows a herb garden. The website needed to reflect Ginger's unique story, her commitment to quality, and her passion for baking, while also making it easy for customers to purchase products online.


Objective

The goal of this project was to design a brand-new website for Ginger's Bakery. The website needed to reflect the warmth and homeliness of Ginger's Bakery while providing a seamless online shopping experience for customers. The primary focus was on enhancing user experience, streamlining the checkout process, and improving overall navigation and accessibility.


Research

Methodology 1: Competitive Analysis

Research Objectives:

  1. Understand user expectations and needs for a bakery website.

  2. Identify desired features and functionalities.

  3. Gather feedback on design preferences and UI elements.

  4. Determine preferences for online ordering and delivery options.

  5. Collect suggestion for creating a user-friendly and appealing website.

Key insights

The competitive analysis reveals that successful bakeries in the small town differentiate themselves through diverse product offerings, strong community engagement, excellent customer service, and a robust online presence. Emphasizing local ingredients and unique specialties position these bakeries favorably in the market.

Methodology 2: User Interviews and Affinity Map

Interviews were conducted about ordering bakery products online. Participants were asked about their experiences and preferences.

Common Pain Points

CONFUSING NAVIGATION

LACK OF FEATURES

MISSING INFORMATION

DIFFICULT CHECKOUT PROCESS


Wireframes and Prototypes

Lo-Fi Wireframes

Based on initial research, the low-fidelity wireframes included layout of the major sections of the homepage and checkout process.

The high-fidelity phase was about refining the major sections, getting critical feedback from the client, and making any necessary adjustments.

Hi-fi Wireframes:

After user testing on the site, improvements were made based on feedback to the overall flow as well as some small changes to the UI that improved experience and accessibility.

Prototyping and Iterating:


Deliverables

Desktop

Tablet

Mobile

Checkout Process