Katich Breads
Improving the customer experience with product information and the ordering process
A responsive website for a Chicago based bread company.
Duration: 3 Weeks
Role: UX/UI Designer + Brand Designer + Researcher
Project Type: Responsive Website
Tools: Figma, FigJam, and Zoom
Domain Area: Food Industry
What is Katich Breads?
Katich Breads is a web-based platform where consumers can order bread for pickup at their local Farmers Markets.
Project Overview
Background
Katich Breads is a bread company based in Aurora, Illinois. They make a wide variety of artisan breads that ar freshly baked by their bakers. They are a company that does not have a storefront, but rather markets their breads online, and makes them available for pickup at over ten different Farmer’s Markets weekly. They rely heavily on their website for customers to place their orders.
The Problem
Although Katich Breads has amazing breads, their website is not user friendly for ordering their products. It can be very confusing for customers and very overwhelming at times. When customers are placing their orders, there is no way to see the different breads, ingredients, and descriptions. On the flip side, when they are looking at the breads, there is no place for them to add those items to their cart. This can lead to a negative customer experience and make it difficult to retain customers and gain new customers.
The Solution
To address the problems, my proposed solution is to develop a new homepage design with a better layout, to design new site information architecture including navigation, and to design a new product listing page that will also offer an option to add items to the cart.
The Goal
The primary goal of this responsive website is to give the users the tools necessary to look at products, order bread, and complete the checkout process. This will be accomplished by:
Providing a more meaningful website to better represent who Katich Breads are and what they offer.
Having an option to add items to the cart while looking at the products.
Adding items to the cart, and then choosing a pickup location and date.
Completing an easy checkout process.
The Process
Through user interviews and competitive analysis, I found that there is an opportunity to improve this website and make it a responsive website as well. This will increase user retention and decrease user frustration.
The Conclusion
I designed and tested two key flows for this responsive design. The designs were rated highly in was of use, concept, and overall design. The participants thought it was very user-friendly, and that it would be very beneficial for current and future users of the website.
The Design Process
01. EMPATHIZE
Conducted research to understand what the current layout and ordering process is like for food companies.
02. DEFINE
Identified where the user pain points are by creating user personas.
03. IDEATE
Brainstormed ideas, User Flows, and Low Fidelity Wireframes.
04. DESIGN
Created High Fidelity wireframes from the Low Fidelity wireframes and user flows.
05. TESTING
Conducted user testing to test the new prototype.
06. WRAP UP
Key findings, implementation, and next steps.
01. Empathize
Research Goals | Competitive Analysis | Interviews | Interview Analysis | Affinity Mapping
Understanding the User
My goal was to understand what key features consumers are looking for when looking at bread and product information in order to design the right tools for them. This was a crucial step in order to define the problem and design the solution.
User Research Goals
We want to learn:
What customers want to see in a seamless shopping experience for a company that sells food items.
What challenges people face when ordering food items online.
User Research Objectives
We want to understand:
Who the target consumers are.
Who the target audience is.
How the current consumer purchase food items online and what information they are looking for.
I compared the features, strengths, and weaknesses of four food product companies: Highland Baking Company, 3D Baking Company, Turano Baking Company, and Publican Quality Bread. The research helped prepare me for user interviews by giving me a better understanding of what information is currently being offered by bread companies. I also began to gain an understanding of what features were being offered and what features could be useful to have on a website. This background gave me a great starting point before creating the interview questions and conducting the user interviews.
Competitive Analysis
Competitive Analysis Insights
TARGET MARKET
Most seemed to have a broad target market that could lend itself to any consumer.
ORDERING CAPABILITIES
Most of these companies seemed to only sell to major companies rather than individuals ordering their products.
DISTRIBUTION
Most started as family owned businesses and have a store front location or sell their products at grocery stores.
User Interviews
In order to better understand what features consumers are looking for in ordering food products online, I interviewed five users who shop online for food items frequently. During the interview process, I focused on five main topics:
When buying food products online, the most important features they look for.
If nutrition and health value factor into their buying decisions.
What information they need to know before ordering and making a purchase.
Features they find beneficial on a site where they would order food products.
Features they would need to see on a website where they would order food products.
User Interview Analysis
-
Price
Description
Ingredients
Shelf Life
Reviews
-
Definitely
I don't have food allergies so I don't pay attention to that as much
-
Price
Delivery information
Nutritional information
Ingredients
-
Explanation of Ingredients
Sourcing
A tab to list out the ingredients
What the item looks like
Reviews
-
Ingredients
Sourcing
Pictures
Reviews
Contact information for the grower
Where the item is coming from
User Interview Quotes
-
![]()
“I am very health conscious and need to know the ingredients before making a food purchase online.”
-
![]()
“I like to know where the product is sourced from before buying.”
-
![]()
“Ingredients are very important to me, and I want an easy way to see and read them.”
-
![]()
“A product has to have accurate pictures so I can see what it actually looks like.”
User Interview Results Through Affinity Mapping
02. Define
User Personas | Point-of-View Statements | How-Might-We Questions
Building User Empathy
My competitive analysis and user interviews provided me with a better understanding of who my users are and what problems that they face. In an effort to turn my research findings into concrete visualizations, I created two key user personas to help me empathize with my users and understand their needs.
Personas
I created user personas in order to best keep my users in mind and to empathize with them.
POV & How-Might-We
Now that I could visualize my users and empathize with their problems, I wanted to create point-of-view statements and how-might-we questions that would help me to clarify the key problems and focus on designing a website to meet my user’s needs.
I would like to explore ways:
To offer users a less tedious and frustrating process for ordering bread online.
For Katich Breads to keep their brand values at the forefront while modernizing and elevating their website for future visitors.
To streamline the ordering process while giving the customer all of the necessary information.
How Might We:
Find an easy and efficient way to order bread from Katich Breads online.
Redesign Katich Breads’ website to be more user friendly and modern while still displaying their values.
Streamline the ordering process for Katich Breads while still giving the customer all of the necessary information.
03. Ideate
Feature Roadmap | User Flows
Turning Needs Into Features
With my POV and HMW Questions highlighting the problem and focusing my attention on my users needs, I began to focus on a strategy moving forward. Keeping my research at the forefront, I created a Product Feature Roadmap which ranked features from high priority to low priority, and would be eventually used to help make design decisions.
User Flows
After gaining a better understanding of my users, my priority features, and the hierarchy of my content, I started sketching out users flows. This allowed me to better understand how a user would navigate the website. It also showed me what actions they would take if confronted with any potential roadblocks.
04. Design
Low Fidelity Wireframes | High Fidelity Wireframes | Prototype
Low Fidelity Wireframes
Here is where I started designing my key screens in Figma. I designed most of my screens in mobile as that seems like the most common use of this website. I also designed a few key screens for desktop as well.
High Fidelity Wireframes
Now it was finally time to start building my prototype.
Getting Started
Users are able to browse the homepage and look at the weekly specials. From there they can see about Katich Breads or look at what Farmers Markets they are going to be at each week.
Viewing Products
The next step is to start browsing the Katich Breads’ products. The User can begin by looking at the product listing page. From there they can browse the product details on each item. In that page they have the option to add the item directly to their cart, or they can look at the product ingredients or product reviews.
The Checkout Process
Once the user has selected all of the items they wish to purchase, they can then proceed to their cart. If they have everything they want, they are then ready to begin the checkout process. They will first pick a Farmer’s Market to pick up their purchase. Next they will choose a date and time. After that is completed they will head over to the payment process.
The Payment Process
Once the user has selected the pickup location, time, and date, it is time to move to paying for their order. They have several payment options, and even get to see again that their order is correct before placing their order. Then all that is left is to pick up their order!
Usability Testing
05. Test and Iterate
Usability Testing | Revisions | The Final Prototype
Once my prototype was ready, it was time to test it. I conducted a usability test with five participants in order to evaluate the ease of use, navigation through the site, the ordering and checkout process, and to identify any usability issues with the site. I wanted to understand the users overall experience with the site, and to gather any final thoughts about it. I wanted to make sure that I received enough feedback for any final revisions that would be needed.
Participants were asked to complete the following tasks:
Click on the hamburger menu to view the location and products
View the different products
View the breads
Click on the sourdough bread and look at the product information, ingredients, and reviews
Place an order and complete the checkout process
Success was measured by the following tasks:
Task success rate
Time to complete each task
Ease of use
User satisfaction
Overall design and aesthetics
Revisions
The following revisions were made:
General Changes:
The locations title was changed to Farmers Markets Locations to make more senes for the user
The pre-order deadlines were highlighted for better visibility
An add button was added to all of the card to make it easy for the user to add the item to their cart
In the cat a remove option was added
The next button was changed to continue
The checkout progress bar was changed
Consistency:
All buttons were checked to make sure sizing and spacing was consistent
All cards were checked for sizing and consistency
Before
After
The Final Prototype
After extensive research, design, user testing, and iterations, Katich Breads’ responsive website is ready! The final prototype has been built and is ready to view!
06. Wrap Up
Final Thoughts
This was my second responsive design project. I found the process to be much different the second time around. I was a lot more focused on the details and making sure that I had enough research to support the design process.
Key Takeaways:
Having a broad research pool made a big difference in the research process and gaining insights from experiences, pain points, and wants from a website like this one
Using existing design patterns was a huge time save, especially when trying to meet deadlines
Organization is key
Creating a timeline at the beginning of a project is key to making sure that everything is completed in a timely manner
Getting feedback from multiple people during different stages of the design process is extremely important