Website Redesign
Case Study:

The

Donut Patch

My Role: UX/UI Designer, UX Writer, Marketing Design

Timeline: 3 Weeks

Group Project: My role: User testing, visual interpretation of data, logo redesign, hero image for website, UI Style Guide, homepage and About page design, B version of Figma prototype

Presentation Slide Deck

Tools: Figma, Miro, Google Suite

The Donut Patch is a family owned small business that sells donuts, breakfast sandwiches and coffee drinks. Their unique offering is a build your own custom donut.

Problem: They would like to attract more local customers. However, their shop is not easily visible from the street. They currently rely on social media, print advertising and their website to connect with potential new customers.

Goal: We would like to rebrand their image, target customers on a more emotional level and finally, redesign their website so that it is easier to navigate and has a more polished look.

Business Opportunities: These improvements propose to attract new customers, boost repeat business, and to increase average order size.

donut patch website before and after

USER RESEARCH

Stakeholder Interview

We spoke with the owners of The Donut Patch and received data on how they run their business, their menu items and information about their customer base.

What do you want to keep and what do you want to change in your website?

  • Ordering page

  • Carousel on homepage

  • Keep the design-your-own donut and cut by hand every day for tagline

Who is your main customer?
Families in Oviedo.

Which companies are your major competitors? 
Dunkin’, Starbucks, Foxtails, and Crispy Cream.

How many people use the website?
Average 20 sales a day on the website. Weekdays 8-15 and weekends 15-25 depending.

What features or aspects of the website that you enjoy the most?
I really like the customer quotes section but there’s only one quote and it’s static. One of the things that I envision when I revamp the homepage next is to be able to connect that to the Google reviews so that people can see multiple of the customer’s quotes. And I do really like that’s easy to find where to order like the “Order Now button” is really easy to find. And I’m happy with the pictures of the donuts and the pictures of the food items. I think no matter what devices you use whether like a phone, iPad, or computer they’re easy to see.

What is your biggest seller?
Our bacon egg and cheese sandwich, vanilla glazed donuts, and sprinkles donuts.

Of your regular customers, what is the item that they come back for?
They come back for their favorite donuts depending on the person. A lot of people come back for the Apple Fritters, Churros donuts, and breakfast sandwiches.

Which city do the majority of your customers come from?
Oviedo and Orlando, but most are from Oviedo. And it’s because we’re close to the 417 we do have a lot of drive-by traffic of people who travel and look up on Google and find us when they search for the donut nearby, so we do have travelers who come by. And there are not many vegan options in Lake Mary, Longwood, and Sanford areas so vegan people from there will come down for the vegan donuts.

What are your short and long-term business goals?
Definitely keep growing and my husband would be interested in opening a few more stores in the Orlando area or the Central Florida area. So if it grows and notoriety, being common you know the name of commonplace. We definitely wanna be in that location where family members bring their friends and families to. Definitely wanna be in that location where people drive out of their way to go, take their friends to the store or they got family visiting from out of town and they’re like “Hey, you have to come to this local place it’s awesome” That kind of notoriety. Being known for quality, being known for service, and then continuing to grow.

Competitor Analysis

A competitor analysis was conducted consiting of small business local shops as well as well known chains.

Testing and Interview Plan

Testing Tasks:

  1. Where is The Donut Patch located?

  2. How would you describe the online ordering process?

  3. Go through the process of making your own donut.

Interview Questions:

  1. What are your expectations of services that should be provided when ordering donuts from a donut business?

  2. Are there any services or features not offered from The Donut Patch’s website that you would like to see?

  3. What is The Donut Patch’s mission or unique feature?

  4. Which device would you prefer to use if you were placing a donut order online?

  5. How easy or difficult was it to find items on their website?

  6. How do you feel about the amount of selections available of their menu items?

Affinity Diagram

Based on the results of the User Interviews, the responses were categorized into an Affinity Diagram.

Affinity Diagram

DEFINITION & IDEATION

User Statement

From our user interviews, we learned that we need to improve on the functionality of the menu and ordering process, as well as the overall design and layout of our site. While there is an order online option, we need to create a more engaging and simple way to allow users to order from the website menu. Most users prefer ordering food on their phones, so also prioritizing the usability of our mobile site will be crucial. Additionally, creating a more modern and clean layout for the site will enhance their branding and improve functionality.

Problem Statement

While the online process of choosing all the options for their custom donut is easy to understand, it is difficult for the user to find that feature on their website. Since the custom donut is the unique feature that sets The Donut Patch apart from other donut shops, it is important for them to make it more obvious to the user.

Solution

We believe by creating a more organized and easy to understand website navigation for The Donut Patch, their customers will be able to locate menu items more easily and place their order successfully. In addition, we want to improve the “Design-Your-Own-Donut” feature by defining the name and implementing a more enjoyable digital experience when building their custom donut online. Finally, we will rebrand their business by updating their logo, create a new slogan and give the website a more modern font.

Value Proposition

Hand cut donuts made fresh daily, customized by you.

User Persona

The user persona is a young professional who manages 5 employees for a retail store.

User Persona

Storyboard

The storyboard shows how the User Persona, Martin, would go through the process of getting donuts for his employees.

Donut Patch Storyboard

Card Sorting

I conducted a card sorting exercise to determine problem areas with the current navigation of the website. The final card sorting rearranged the food item categories, made the ordering process less confusing, and added an About page.

Card Sorting Before and After

PROTOTYPING

Lo-Fidelity Wireframe

Referencing the User Flow that was created, the team designed a low fidelity prototype.

Low Fidelity Wireframe sketch

Mid-Fidelity Prototype

The mid fidelity prototype mainly focused on layout and functionality.

Mid fidelity prototype

Mid-fidelity User Testing

Eight testers completed 3 tasks. After analyzing the results we made adjustments to the Hi-fidelity prototype.

Task 1: Make a ‘Design Your Donut’

All 8 testers were successful.
Tester Observation: Found the button quickly on the Homepage in the Hero image. Got confused on the Menu page with the food item buttons at the top. The other pages were easy to navigate - add to cart and order.

Task 2: Find the shop location and phone number

All 8 testers were successful.
Tester Observation: Scrolled down to bottom and was able to still find location and phone number instead of Contact Us page.

Task 3: Look for the testimonials

All 8 testers were successful.
Tester Observation: Scrolled around a bit on the home page – felt the testimonials should be seen on the home page somewhere like in a block. Did find it in the About Us page but preferred if it was on the home page in a section.

Style Tile

The style tile was a group collaboration to determine the color scheme, typography, logo redesign and marketing message.

style tile

Hi-fidelity Prototype

The first draft of the hi-fidelity prototype incorporates the changes we made from the information gathered as a result of the mid-fidelity testing such as moving the testimonials to the homepage, and changing the layout of the menu page.

hi-fidelity prototype first draft

A/B Testing for Hi-fidelity Prototype

The first draft of the hi-fidelity prototype incorporated the changes we made from the mid-fidelity testing such as moving the testimonials to the homepage and changing the layout of the menu page.

Timed Task: Locate these 2 specific menu items and add each to cart.

1. Turtle Donut
2. Caramel Cafe Frap


Results:

  • Times were similar for both A & B

  • Both A & B struggle to find Turtle Donut

  • Caramel Frap was much easier to find

  • B tester took advantage of the “Jump to” and “Back to Top” feature

Conclusions:

  • Menu items need to be alphabetized to expedite user search

  • Add description for each menu item

  • Change radio buttons to check boxes on “Design Your Donut” page

  • Due to menu page length: Add “Back to Top” button at the end of each category

Iterated Hi-fidelity Prototype

The final hi-fidelity prototype has a pared down homepage, the addition of detailed descriptions to menu items, enhanced functionality such as jump-to links and back to top buttons, and an improved ‘Design Your Donut’ page.

alphabetized menu page hi-fidelity

CONCLUSION AND FUTURE OPPORTUNITIES

The Research Process

The user research showed us that we needed to better define The Donut Patch’s main feature, which is their custom donut. Along with that we found that users wanted to know more about this small business on a personal level from the owners. We were also fortunate to be able to have an interview with the stakeholder to determine their specific needs and wants.

The Prototyping Process

We focused our lo-fi and mid-fi prototyping on addressing functionality deficiencies. The mid-fi user testing showed us that the ordering process needed improving. The layout of the hi-fi went smoothly, but the color scheme and fine-tuning the user flow proved to be more challenging. The A/B testing for the Hi-Fi uncovered an unexpected painpoint, which was that users struggled to find a specialty donut as they were not listed in alphabetical order.

Final Thoughts

Working as team on this project allowed us to accomplish much more than if it was done individually. The feedback from each team member provided a myriad of solutions when problem solving. Being able to choose the best option resulted in final project that surpassed all of our expectations.

Future Opportunities for The Donut Patch

The Donut Patch would like to expand their business by adding more locations, selling branded merchandise, adding gluten-free options, and creating a mobile app to offer to their customers.