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
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.
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:
Where is The Donut Patch located?
How would you describe the online ordering process?
Go through the process of making your own donut.
Interview Questions:
What are your expectations of services that should be provided when ordering donuts from a donut business?
Are there any services or features not offered from The Donut Patch’s website that you would like to see?
What is The Donut Patch’s mission or unique feature?
Which device would you prefer to use if you were placing a donut order online?
How easy or difficult was it to find items on their website?
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.
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.
Storyboard
The storyboard shows how the User Persona, Martin, would go through the process of getting donuts for his employees.
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.
PROTOTYPING
Lo-Fidelity Wireframe
Referencing the User Flow that was created, the team designed a low fidelity prototype.
Mid-Fidelity Prototype
The mid fidelity prototype mainly focused on layout and functionality.
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.
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.
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.
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.