Piece of Cake Bakery

View On Figma
Piece of Cake Web Mockup

PROCESS

1. Define
2. Research
icon for tools
3. Analyze
4. Design
5. Prototype
icon for project type
6. Launch

1. Define | What is the problem?

PROBLEM:

New customers are hesitant purchase from Piece Of Cake due to it's confusing and outdated website which also lacks online ordering.


HOW MIGHT WE?

- How might we allow customers to streamline their online orders?
- How might we match the playfulness and quaintness of the physical bakery?
- How might we optimize our website for mobile users?
SOLUTION:

After conducting competitive research, interviewing users, and visiting the bakery, I've identified opportunities for improvement:

1. Implementing e-commerce with optimized ordering to engage new customers.
2. Emulate a sweet aesthetic that focuses on "delicious treats" and highlights the bakery's expertise
3. Create a responsive design that makes browsing products simple and ordering seamless

2. RESEARCH | USER ANALYSIS

Piece of Cake homepage analysis
current Homepage
"I don't have a lot of time... I need to order ahead of time."
1. Expired GoFundMe feature
2. "CONTACT US!" leads to Contact Form
3. Side Nav difficult to read

The homepage could be less cluttered and easier to navigate, saving our users time to complete their tasks.
line break divider
"I've never ordered a cake before so it's difficult to know what to ask for without knowing my options."
This user fears the inability to put ideas into words, thus fearing their cakes won't come out as imagined.
Current Contact Form
current Contact Form
line break divider
current Menu Page

"I first check online to see products before going to the store in-person."
The menu page has major opportunity for product images.

3. ANALYSIS | USER PERSONAS


3a. | COMPETITVE ANALYSIS

Milk BarCarlo's Bake ShopBaker & Spice Bakery

Having been in business for 45 years and receiving awards and rave reviews, the bakery has the potential to exceed it's competitors when they have a digital presence.

Competitive Analysis chart

4. DESIGN | WIREFRAMES

Homepage wireframe and hi-fidelity designProduct description page wireframe and hi-fidelity design

4. DESIGN | BREAKDOWN

Create an optimized ordering form that makes online cake ordering simple and tangible.

Homepage

1. Soft, bold colors to compliment their branding and a hero image of cake

2. Shop By Occasion section as the first look into products

3. Introduction to baker and map location
Homepage
line break divider

Product Listing

1. Simple visual icons to represent cake ordering process

2. Large images of product

3. Gallery to invoke customers' imaginations
Product Listing Page
line break divider

Product Description

1. Multiview images of product

2. Various options and customizations for product

3. Reviews to build reputation
Product Description Page
line break divider

Checkout

1. Breaking down checkout into 3 steps

2. Ability to check out as a guest or with an account

3. Suggesting related items
Checkout page

line break divider
Mobile Mockup
line break divider
custom color style  guide
font style guide
line break divider

conclusions + lessons learned

Things I'd do differently next time

This was my very UX project and case study. On that note, 3 very important lessons I learned during this process are:

1. Research, research, research! My eagerness to start adding images and color led to working hours longer than expected. Understanding that designed backed by thorough research will  create a meaningful user-centric design, not just pretty pictures.

2. Hone in on ideal users. Initially, I wanted to accommodate a large audience. This ended up complicating my process, my design and caused confusion along the way. I often forgot whom I was designing for despite having user personas.

3. Ask for feedback and iterate. Dedicating time for feedback throughout the process is important for creating a product that aligns with user needs and goals. I often found myself relying on visual design to persuade the audience which caused flaws in both design and user experience.
line break divider