Sib bakery

Designing a website for a local bakery base in Seattle, Washington.

About Sib Bakery

Sib Bakery is a local homemade bakery based in Seattle, Washington, offering traditional Persian cookies and cakes made with fresh, high-quality ingredients, free from preservatives and dairy products.

View Desktop Prototype

Project Overview

Role

UX/UI Designer

Duration

4 weeks

Team

3 Persons

Tools

Figma, Maze,

Miro, Photoshop

Business Needs

Create a website with a minimal design to attract customers.
Establishing strong relationships with Iranian and non-Iranian customers.
Promoting the values of homemade and health-conscious treats.

Main Challenges

Gaining customer trust with a trustworthy website design.
Clearly showing the bakery's key values: no preservatives, no dairy, and fresh ingredients.
Making it easy for customers to find and select their preferred cakes and cookies.
Designing an attractive website that highlights the bakery's delicious treats.

Design Process

1-Discover

Interview
Affinity Diagram
Empathy Map
Competitive Analysis

2-Define

Persona
User Flow
Task Flow
Site Map

3-Develop

Mid Fidelity Design
High Fidelity Design
Wireframing
Useability & Iteration

4-Deliver

Visual Design
Final Wireframe
Clickable Prototype
Useability & Iteration

Discover

our first step was researching local bakerys' and understanding our target users’ needs. thus, the study started with 2 phases:

Interview with different types of users.
Competitive analysis.

1-Interview

We wanted to figure out:

1- What are people's main needs when they use websites to search for homemade bakeries?

2-How can we encourage them to use our websites?

3-What are users' frustrations with local bakery websites?

So, we interviewed:

7 people, We asked more open-ended questions, allowing for a discussion with the interviewees rather than a straightforward question-and-answer format.

Affinity Diagram

Following the interviews, we successfully utilized the affinity diagram to pinpoint and narrow down the specific preferences of our customers. This valuable tool allowed us to synthesize the gathered information, identify common themes, and gain valuable insights into customer preferences, ultimately guiding us toward more informed decision-making.

Empathy Map

This empathy map can guide us in tailoring our online presence and marketing strategies to better meet the customer's preferences and expectations.

Here's the takeaway from the affinity diagram and empathy map:

Trust and Reliability:
- Values assurance about cake quality before ordering online.
- Prefers recommendations or knowledge of the baker's quality and taste.
Ease of Ordering:
- Desires a quick and simple ordering process.
- Expect high-quality photos, ingredient listings, and transparent pricing.
Preference for Homemade Cakes:
- Appreciates fresh, healthy, customizable, and unique ingredients.
- Nostalgic about traditional Iranian cakes and sweets.
Concerns about Online Orders:
- Worries about potential cake damage during delivery.
- Seeks clarity on delivery/pickup timelines.
Expectations from the Bakery Website:
- Look for pricing, location, hours of operation, bestsellers, delivery/pickup dates, customer reviews, and detailed ingredient lists.
- Interested in immediate visibility regarding new products and flavors.
Marketing Focus:
- Emphasize authenticity, quality, and convenience on the website.
- Highlight high-resolution product images, transparent pricing, ingredient details, and delivery/pickup information.
- Leverage tradition, nostalgia, and reliability in marketing efforts.

2-Competitive Analysis

Conducting competitive analysis for designing a local Bakery website in Seattle is crucial because it helps us to understand the market landscape, identify competitors' strengths and weaknesses, and find opportunities for a unique design.

Competitive Analysis's Takeaway:

Determine minimal and modern design.
How to present of business values and legitimacy.
How can the website answer users important questions via FAQ.
Prioritize filter based on users needs.
Identify categories of navigation& search bar.

Define

Persona

We gathered all the information collected during the Discovery phase to create a persona, providing us with better insights into users needs and behaviors. This persona guided the design process, ensuring interfaces meet user expectations and drive engagement.

Task Flow

We created a Task Flow to define the main task for a user. Following it helped us determine if we successfully reached the main goal, which is the ability to make purchases via the web. We also used the Task Flow to define tasks for the testers.

User Flow

During the define phase, creating a user flow involves mapping out the sequential steps and interactions a user will experience while navigating a digital product or website.

Site Map

Develop

Mid Fidelity Wireframes

For better results from testers and to enhance stakeholder comprehension, we opted to initially design mid-fidelity versions of main pages. Upon receiving initial approval, we proceeded to create a UI Kit and swiftly transitioned to high-fidelity designs. This approach facilitated clearer understanding for testers and enabled us to identify user pain points efficiently.

Home Page

Product Page

About Us Page

The homepage was deemed the most crucial page in this project, requiring visual appeal to captivate users and prompt them to scroll and navigate the site. Consequently, we designed several iterations of the homepage, seeking stakeholder approval for the final version.

Version 1

Version 2

Version 3

Final Version

Visual Design

We brainstormed and collected essential design values, translating them into visual concepts via mood boards. This guided our selection of color palettes, typography, and visual elements, ensuring a cohesive and inspiring user experience.

Design

Ui Kit

Once we presented our proposed colors to the business owner, we had to do some changes and here you can see the full UI kit we created for this project, including fonts, buttons, forms, and colors.

We optimized component design for maximum reusability by defining various properties. For example, our versatile card component accommodates different products with varying images, prices, ingredients, and descriptions, ensuring adaptability across diverse content.

Iterations

Usability Test Report

In our usability test conducted on Maze with 32 users, we tasked them with purchasing two items, specifying a date and time for pick-up, and applying a discount code. The objective was to evaluate the entire process, from selection to payment confirmation. The results indicated that nearly all users successfully completed the tasks. The Maze report and our observations verified that users navigated through the process smoothly, expressing satisfaction with the purchasing experience. However, during our observations, we gathered valuable feedback that led to identified areas for improvement. These insights guided subsequent iterations, which are detailed in the following section of this report.

Heat Map Report

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Home Page Iterations

During the iteration phase of our local bakery website project, the stakeholder favored emphasizing pick-up options and utilizing the delivery service through the Doordash website. In the initial design, we placed the pick-up address in the navigation bar with a Doordash icon. However, A/B testing revealed that many customers valued delivery. The Doordash icon caused confusion as users didn't immediately associate it with delivery, prompting continued searches for a dedicated delivery feature. After discussions with the stakeholder,

Removed the Doordash icon from the navigation bar and added a delivery option on the product page.
Changed the button label "order & pick up at the store" to just "Start order."
Removed the delivery option by Doordash below the hero image.

Before

After

Changed the content from "order & pick up at the store" to just "Start order"

removed the delivery option

removed the Doordash icon

Product Page Iteration

In the initial version of our product page, we had a single "gluten-free" filter without a title, but during testing, we discovered it wasn't clear or user-friendly. Additionally, there was insufficient space for potential additional filters. Consequently, we redesigned the filter entirely, shifting from a singular focus to filtering content, making it more user-friendly and allowing for the inclusion of multiple filters in the future. This involved changing from a single "Gluten-free" filter to a dropdown for various filters.

Before

After

Changed from a single "Gluten-free" filter to a dropdown for multiple filters

Shopping Page Iteration

In our initial design on the shopping cart page, users only had the option for pick-up. For delivery, users had to click on the Doordash icon on the first page, redirecting them to the Doordash website to place their order, with no direct option to select delivery from our page. After A/B testing, we identified user frustration in navigating back, leading to incomplete tasks. Following brainstorming, we addressed this issue by incorporating both pick-up and delivery options directly on the same page. Now, users can conveniently choose either option, leading to heightened satisfaction.

Before

After

By integrating both pick-up and delivery options on the same page.

Deliver

High Fidelity Wireframes

After conducting comprehensive research, we have transformed our insights into concrete visual representations through the creation of a series of sketches.

View Desktop Prototype

Reflection

What did I learn?

Being a member of the team allowed me to learn how important constant communication can be, particularly at the early stages of the project.
In my role as a UX designer/researcher, I have learned the necessity of iterations and how to cope with unexpected changes and client expectations.

What can we do next?