GEORGIA PEACH'S BAKING CO. CASE STUDY

Several iPhones on a red background showing a bakery website
Georgia Peach’s Baking Co. is a one-person shop located in Southeast Texas that began with a passion for baking. The bakery owner, Liz Morgan, needs a website to show customers all of her available items.
View Figma Protoype

ROLES

Research
Design
Prototyping
User Testing
Branding

TOOLS

Google Forms
Figma
Google Docs
Adobe InDesign
Adobe XD

THE PROBLEM

The client needed a website where her customers can view the menu in its entirety. She wants the site to cut down on decision fatigue and create a more welcoming vibe for customers to contact her. A main feature of her bakery is also to share the connection between dogs and people, so I wanted to highlight that.

The client stated that her customers were mainly in their 30s and ordered items for themselves. The user testing confirmed this.
Image of a macbook displaying the website design

THE SOLUTION

I created a website for her that can easily showcase her items without becoming overwhelming to her clients. It needed to clearly mark which products were meant for humans and which were meant for their furry best friends.

USER SURVEY

I created a survey for the client to send out to her existing customers in order to understand them better. Gathering insight into their likes, dislikes and needs was crucial to designing a site that worked with the real people who would be using the site.
“Very accommodating to special dietary needs, being diabetic I required sugar free and she delivered delicious sugar free options”

75%

AGED 25 - 45

50%

WOMEN

75%

PREFER ORDERING THROUGH TEXT

From the survey I learned that what users really liked about the bakery was the personalization of items. Liz has a way of making each customer feel special and adapting her recipe to match the flavor and dietary needs of her patrons.

Main complaints were not knowing what was available or having too many different options, making it hard to choose.

PERSONAS

CHAD & DIESEL

Man crouching in front of a white dog at the beach
  • In his 30s
  • Buys from small local businesses as often as possible
Motivations: Wants to buy some cheesecake, usually gets something for Diesel as well

Frustrations: Has to ask every single time what items are available and base his decision on a line of text

RILEY & FERN

Woman smiling at dog in park
  • In her late 20s
  • Spends all the time she can with her dog, Fern, who has her own Instagram account
Motivations: Loves the idea of matching dog and people treats, the concept is right up her alley

Frustrations: Not sure how to order, which items can be matched together or what is available
Based on the user surveys I decided to create two user personas following the data collected.
I chose Riley to focus on through my build of the site, thinking through how she would use it and what features would be most important to her.

USER STORIES

Using Riley as a guide, I created a journey map to consider the steps she might take when navigating this site on her phone.
Scenario: Riley is scrolling through Instagram and sees an ad for Georgia Peach’s Baking Co. and loves the idea. She wants to order a matching dessert for Fern and herself.

Expectations:
Graph labeled "PHASE 1" showing an upward arc. At the top of the arc there is a speech bubble reading "Aw, that's so cute!"
  • Sees an add on Instagram
  • Clicks the ad
Graph labeled "PHASE 2" showing a downward arc. At the left of the arc there is a speech bubble reading "Wow, there's a lot of choices.". At the lowest point there is a speech bubble reading "I really can't decide..."
  • Arrives at site
  • Clicks around on menu
  • Decision fatigue
Graph labeled "PHASE 3" showing an upward, then downward arc. At the highest point there is a speech bubble reading "Oh! Maybe I can sort!". At the lowest point there is a speech bubble reading "I have to go pick it up... Where is it?"
  • Finds the sorting option
  • Decides on a product
Graph labeled "PHASE 4" showing an upward arc. At the top of the arc there is a speech bubble reading "I'm so excited to pick it up!!!"
  • Figures out map
  • Places order
  • Confirms pick up date and time

USER FLOW

With my journey map as a blueprint, I created a very basic flow with a focus on the bakery's menu items and images.
User flow showing user going from clicking an ad to placing an order

INITIAL SKETCHES

Three pieces of paper hanging on the wall, showing rough sketches of the site design
I sketched out a few ideas for the site and discussed options with the client. Her favorite idea was having a slideshow as the hero image so she could showcase multiple types of desserts at once prominently on her site.

WIREFRAMES

Grayscale wireframes showing the home page, menu, item details, order form and thank you screens
Based on the user survey, most customers will be viewing the website on their phone. I designed the mobile site first to ensure all images and copy were readable and the layout made sense for a touch screen interface. A few desktop screens were created but due to time constraints, mobile was priority.
View Figma Wireframes

USER TESTING

Two tasks were tested;

Overall, users were able to complete all tasks without guidance. There were a few things that could be improved with the design as well.

One user did have trouble getting to the item details step of the prototype due to lack of indicators to tap on the item for more info.

I also took note that with the user having to remember each item they wanted to purchase, it didn’t solve the problem completely.

NEXT STEPS

Based on my user testing I decided to do the following;

BRANDING

Moodboard showing an image of cheesecake, a white fluffy dog, a peach, a woman sitting in grass next to a dog and peaches sliced in half on a white textured counter.Style tile showcasing the branding and stylization of the site
Based on the client's input, I styled the site. Initially she wanted a light peachy color and potentially a gradient, but with the white background she chose the color contrast was not high enough for accessibility standards. I pulled the red color from the inner portion of the peach to keep with the theme without compromising accessibility.

PROTOTYPING

Red iPhone showing the item details page
I applied the styling to my wireframes, following the examples from my style guide. I chose images that complimented the layout and color of the site. I also designed the home screen for desktop, following the mobile design.
View Figma Prototype

FINAL THOUGHTS

I learned a lot about working with a real world client through this case study. It was also my first time designing a website and it taught me how to design for mobile first and then reorganize that wireframe for a desktop site.

I also gained some valuable insight into how users expect information to be organized. In the future I would like to have the client even more involved in the design process, as their perspective and ideas for the site were extremely helpful. I would also love to test more with disabled users who navigate the internet differently than I do.

Overall, I learned so much from this project and want to continue iterating on this site.
Thank you for taking the time to look at my case study! If you like my work, you can connect with me on LinkedIn or follow me on Behance. If you think we’d work well together, feel free to send me a message through my contact form and I’ll get back to you as soon as I can.
View Figma PrototypeBack to Case Studies