Case Study
Logan’s Baked Goods
Responsive Design
Designing an online bakery website
PROJECT OVERVIEW
Logan’s Baked Goods Responsive Website
The objective of this project was to design a responsive website for a newly launched bakery business, marking our first collaboration with the client.
PROBLEM EXPLORATION: ABOUT THE CLIENT
The client needs a website to display her new bakery project that she is running as her side-business.
RESEARCH
Goal: Understand what potential users expect to see on a bakery website.
We can readily make assumptions about the content found on a standard online bakery website using our own experiences and thought patterns. However, during the research phase, it is essential to rely on data and comprehend the "why" from the user's perspective.
Objectives:
Determine the key pages users anticipate finding on a bakery website.
What attracts them to the website.
Methods:
Competitor analysis
Surveys
I chose to conduct surveys instead of user interviews for this project because I believed the issue we were addressing was straightforward enough to gather necessary information through quantitative data. Ultimately, prioritizing both the client's preferences and requirements is paramount.
COMPETITOR ANALYSIS
I looked into local bakeries around the Washington D.C. area, along with one major cupcake chain.
ABOUT THE SURVEY
-
What is your preferred method of placing an order with a bakery?
What aspects of the bakery websites you visit stand out and make them enjoyable or memorable?
What features or information would you expect to find on a bakery website?
Are there any specific features you would like to see on the bakery website?
SURVEY RESULTS
Top items potential users want to see in a bakery website:
Warm, colorful, welcoming site
Ingredients list
Photos of products
Basic shop information
Online ordering
Due to the time constraint of this project enforced by Designlab, I had to exclude the online ordering feature of this project. However, I will continue to work with my client on building her online shopping experience post project submission.
MAIN TAKEAWAYS
Quantitative Feedback
Qualitative Feedback
IDENTIFYING MVP
Website MVP will include:
Homepage, Menu, About, FAQ, Custom Order Inquiry/Contact
PRODUCT ROADMAP
SITE MAP
TASK FLOWS
After compiling the survey results, I convened with my client to go over the findings and welcomed her input. We reached a consensus that the initial phase of the project would encompass essential sections (menu, about, faq, contact), reserving the online ordering feature for subsequent iterations. Additionally, we carefully reviewed each section of the website to establish the sitemap, ensuring that all information was appropriately located.
DESIGN: LOW-FIDELITY WIREFRAMES
DESKTOP WIREFRAMES
MOBILE WIREFRAMES
To streamline the process, I didn't find it essential to create low-fidelity wireframes exclusively for tablets. This is because roughly 90% of the desktop design can be directly adapted for the tablet version, albeit on a smaller screen.
DEVELOP: DESIGN SYSTEM + BRANDING
“I really want it to come across as a “homey” brick and mortar even though I am operating online for now. I would also like to have my dog, Logan, incorporated in the logo design.”
DESIGN: HIGH-FIDELITY WIREFRAMES
DESKTOP
MOBILE
USER FEEDBACK
CLIENT USER TEST FEEDBACK
Overall, the client expressed satisfaction with the prototypes I showcased. The feedback on the task flows she evaluated was clear-cut, and she encountered minimal difficulties while navigating the website. The input she provided was not as extensive as I had anticipated, mainly revolving around minor adjustments to the custom order form.
GROUP CRITIQUE FEEDBACK
During one of my group critique sessions, I solicited input from individuals with backgrounds or expertise in UX design and received the following feedback.
Most of the significant changes were centered around the desktop view. As a result, the upcoming iterations will concentrate on refining the desktop experience.
ITERATIONS: HIGH-FIDELITY WIREFRAMES
FINAL PROTOTYPE: DESKTOP, TABLET, MOBILE
REFLECTION
This project was particularly enjoyable and engaging for me. Creating the branding and website from the ground up granted me a lot of room for creative expression. The added thrill of designing for a bakery infused an extra element of excitement. I'm eager to keep collaborating with my client to expand her website further and to witness its launch.