Knead Bakery Responsive
Project Overview
Knead Bakery is a regional bakery located across the United States. Knead Bakery strives to deliver freshly hand crafted, quality cakes, muffins, breads and other Bakery goods. They offer a wide variety of competitive pricing. Knead Bakery target are on the go, guests who don’t have the time to prepare baked foods
Busy mom’s, professionals and college students lack the time to prepare and make baked goodies.
Design a Knead Bakery website to be user friendly by providing clear navigation, customizable options and offering a fast checkout process without the hassle of waiting in long lines.
UX designer leading the Knead Bakery website design
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Knead Bakery App
understanding the user
I conducted competitive audits, interviews and created user flows, user personas, and empathy maps to understand who I am designing for and their needs. A primary user group identified through the research was on the go working adults who want instant access to their food and don’t have time to wait in long lines
This research further revealed that wait time wasn’t the only factor limiting users from going to the bakery. Certain users had problems not being able to customize orders on the go, applying reward credits to purchases and easy access to low carb options.
Users are tired of waiting in long lines to be able to order their food
Users want to be rewarded food related items for spending money
Users have to go to the physical location to customize their orders
Users are tired of waiting in long lines to be able to order their food
PROBLEM STATEMENT:
Lauren is a busy college student who needs intuitive website because she wants to be able to customize her cake on the go without waiting in long lines.
I created a user journey map of Lauren’s experience using the site to help identify possible pain points and improvement opportunities.
Difficulty having to order certain items was a primary pain point. Therefore I created a user journey sitemap. The horizontal line discusses this starting with pickup.
My goal here was to identify how the user would go about ordering in this particular case a cake and to understand and layout the navigation elements for each of the pages.
paper wireframes Screen Variatons
Because Knead Bakeries customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
I sketched out paper wireframes for each screen for my website, keeping the user pain points about time, customization and rewards into my mind The home screen paper wireframe variations below focus on optimizing the browsing experience for users.
My goal in cart page is to display the item being ordered with a short description and the quantity to order along with other items with the subtotal and total at the bottom for the user to go to the checkout and pay.
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing image buttons and making the website visually appealing is a key part of our overall strategy.
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like creating more readable using hierarchy, page organization and alphabetical order items. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
view low fidelity prototype
I conducted a usability study with five participants using the low fidelity prototype for Knead Bakery. This study supported in how to progress with the high fidelity mockups and prototyping.
When creating the research plan, I established research goals as well as research questions that the study aimed to answer.
view research plan
user testing study findings
1. Start Order process was straightforward and easy for the user to complete
2. Some of the items were duplicated so the user had a hard time differentiating which one to choose
3. A lot of the text in the ordering pages and customization pages seemed very small for the users to read.
Based on the insights from the usability study, I made changes to improve the site’s menu items. One of the changes I made was making the menu items in alphabetical order with the exception to the View Favorites and View Freebies which remains on the top.
I added images for the buttons and I changed the duplicate item of Celebration cake to the Tres Leches cake.
I also made emphasis on a lot of the text bolding the important items so users can take notice as well as changing their font sizes
view high fidelity prototype Desktop
We used form labels for the different types of text boxes the users have to fill out along with adding an error message if the user gets an item that is incorrect.
Make The heading text bold to stand out in hierarchy and made it large compared with the paragraph text. We made the body copy at 16 pixels making it easier for the user to read.
Change the color orange to a more burnt orange for color web accessibility guidelines. It has a contrast of 4.57:1
accessibility considerations
Our target users shared that the design was easy to navigate through,
the ordering process was simple and straightforward the imagery was clear to what the user was looking for.
I learned that it’s important to see viewpoints of your website design from multiple sources because they can discover areas that the website can be improved upon and help benefit them more in the long run. It’s always important to focus on the client first when doing this.
view high fidelity prototype mobile
view A Foot Above Project
