Stan’s Donuts UI Redesign – Madelyne Rosales

Stan's Donuts UI Redesign

Website & Mobile App Menu Redesign

My first bite into a Stan's Donut

I never expected to become so obsessed with Stan’s Donuts until I took my first bite of the “Le Stan Croissant Donut.”

If you’re not familiar with Stan’s Donuts, I recommend it as a must-try donut shop if you’re ever in the Chicago area! I remember seeing Stan’s Donuts for the first time as I was hurriedly walking towards my first networking event in Chicago. Unfortunately, I had gotten out of my networking event later in the evening, but kept a mental note to try their donuts whenever I came back into the city. To my surprise, I soon found another Stan’s Donuts located 30 miles west from Chicago at Woodfield Mall.

As I walked up to the Stan’s Donuts front counter with a smile on my face, I noticed that there was a deal for a free drink if you download the app. Excited about this deal, I eagerly pulled out my phone to start downloading the Stan’s Donuts app. After creating my account, I felt lost and confused as I was trying to look for a menu in the app. I didn’t know what each donut was made of since there were no descriptions to be found on app nor at the front counter menu. I couldn’t figure out what some of the donuts were about solely based on their name. I was surprised about a donut shop not having descriptions of their donuts on their app and in person, but made the best out of the situation by asking the people at the front counter which donuts were most popular to try as a first time customer. They were nice enough to recommend their classic “Le Stan Croissant Donut”, which instantly became my favorite donut of all time.

Navigating the Stan's Donuts App & Website

My App Experience

A couple days later, I became focused on navigating the Stan’s Donuts app more thoroughly. Since I wasn’t in the rush to be ordering as I was looking through the app, I was able to discover that the only way you can see the menu on the app is by starting a mobile pickup order.

Even after starting the mobile order, the descriptions are hard to read against their pink background, along with no nutritional facts to be found at all about anything on the menu. I also noticed the main navigation on the bottom of the screen has three options relating to mobile ordering, when there could just be one option to make it less confusing to initiate the order.

My Website Experience

After looking through the app and it’s potential pain points, I was also curious to see if the Stan’s Donuts website also reflected similar issues like in the mobile app. The first thing I noticed to be jarring was how the main navigation bar kept switching locations when scrolling up and down.

I was happy to see a menu option, but the menus had the same issue in not providing any donut descriptions nor nutritional facts. I also saw another issue with navigation options being scrunched together with little spacing, making it confusing to read which options are connected with the up/down arrows.

My Role

UX/UI Designer

Timeline

8 Weeks

Tools

Figma

The Stan’s Donuts website and mobile menu redesign is a personal project that I initiated to develop my skills as a UX/UI designer.

While my personal experience with Stan’s Donuts app and website has highlighted some pain points for me, it may not reflect the experiences of other regular or first-time users.

My love for donuts and passion for creating effortless and enjoyable digital experiences led to a lightbulb moment: I can turn this into a UX/UI case study! I want to explore how my interactions with the menus and navigation compare to those of current users of Stan’s app and website, and discover ways to enhance their experience. I also wanted to see in more detail if there were other issues to be discovered along with what were of utmost importance to adjust to have a better app and website experience.

Project Goal

To enhance and create a more enjoyable experience with the website and mobile app menus by adding an “Initiate Order” option, along with providing detailed descriptions and nutritional information for each donut upon selection.

THE DESIGN PROCESS

Empathize

Define

Ideate

Prototype

Test

EMPATHIZE

Exploring the user’s needs & pain points

Overview

Research Approach

Secondary Market Research

Interview Findings

Research Approach

To better understand and identify some challenges that people may face with the Stan’s donuts website/app menu and navigation, I decided to conduct at least 5 in-person interviews. While I was figured out ways to recruit people for interviews and form my interview questions, I also conducted secondary market research on competitor donut shop websites and apps to figure out which key features Stan’s Donuts should implement to enhance their online presence.

Secondary Market Research

The top competitors of Stan’s Donuts within the city of Chicago seem to all have a website. Yet only 30% offer a mobile ordering app, making Stan’s Donuts stand out as a local donut shop.

Having a website is fundamental and essential for providing information about their locations, products, and company branding. Learning that almost all the top competitors of Stan’s Donuts have a website, I noticed how the competitors differ in certain features they offer, contributing to their competitive advantages and disadvantages.

To discover areas of improvement in the Stan’s Donuts website and app, I made a market research spreadsheet. Based on the results of my research, I then gathered a list of some key features the websites had in order to determine which key features could be implemented into the Stan’s Donuts website and app.

Top 10 Donut Competitors in Chicago:

Key Competitor Features

90%
Have a Website

Almost all of the competitors have a website. It's imperative to have a user-friendly, informative, and visually appealing website.

20%
Offer Mobile App

With only 20% of competitors offering a mobile app, this makes Stan's Donuts stand out. Having an app can improve customer loyalty through push notifications and personalized offers.

80%
Have Online Ordering

Since almost all of the competitors provide online ordering, it’s crucial to have a seamless online ordering design integrated with reliable services. This will cater to the convenience that customers increasingly expect.

40%
Have a Rewards Program

Given that half of the shops have a loyalty program, introducing one can help in building a loyal customer base. Offer rewards for frequent purchases and incentives for referrals to encourage repeat business.

50%
Cater to Special Diets

Half of the competitors provide special diet options, making it important to offer gluten-free, vegan, or other dietary-specific donuts. This inclusivity can attract a wider customer base and cater to those with specific dietary needs.

40%
Provide Nutrition Facts

Less than half offer nutrition facts, which is a feature that Stan's Donuts can implement to differentiate as a brand. Providing clear nutritional information can appeal to health-conscious customers and those with dietary restrictions, building trust and transparency.

Mobile App Features

Among the top ten donut shops in Chicago, only two offer a mobile app alongside their websites – Krispy Kreme and Dunkin Donuts. Comparing the Stan’s Donuts app with these popular competitors revealed both strengths and gaps in its features. This comparison highlights what Stan’s Donuts offers and areas where it could improve.

App Strengths

Mobile Ordering

The app facilitates easy mobile ordering and delivery options, streamlining the purchasing process and enhancing convenience for customers who prefer ordering from their devices.
Rewards Program

Stan's Donuts offers a rewards program through the app, allowing customers to earn rewards and benefits with their purchases. This helps in building customer retention and encouraging repeat business.
Special Deals & Offers

The Stan's Donuts app provides enticing deals, such as a free drink for new users who download the app. This feature encourages customer engagement and attracts new users with valuable incentives.

App Weaknesses

Lack of Nutritional Information

The app does not provide nutritional facts or detailed information about the ingredients of the donuts. This absence may deter health-conscious customers who are interested in making informed choices.
Low Visual Contrast

Compared to how Krispy Kreme and Dunkin Donuts has a high contrast of colors along with consistent UI, Stan's Donuts lacks in these qualities. This makes it harder to guide the user's attention throughout the interface.
Absence of Order History

Stan's Donuts app does not feature an order history function. This means customers cannot easily review past orders, which can be inconvenient for repeat purchases or tracking favorite items.

Interview Findings

In an effort to enhance the user experience on the Stan’s Donuts website, I conducted 5 interviews with people from the ages of 16-50 who were familiar with Stan’s Donuts or were regular users of ordering food online. I structured the interview into two parts: their website experience, and then their mobile app experience.

In the first part of the interview, I had the users interact with the website for about 5 minutes, allowing them to be familiar with the website and to try out the check-out process. Then after those 10 minutes were up, I asked them a series of open-ended questions to uncover their perspectives and identify any challenges they faced while navigating the website, the menu, and with placing orders online. The first part of the interview, including their interview responses, took about 15-20 minutes total.

Then in the second part of the interview, I had timed the users to interact with the mobile app for 5 minutes, and instructed them to explore the app and also try out the mobile ordering checkout process. Once their time was up for exploring the app, I asked them open-ended questions to learn about their experience and challenges with the mobile app. This second part of the interview in total also averaged to about 15-20 minutes per user interview.

Although each interview took about 30-45 minutes each, the feedback provided valuable insights into common pain points and areas for improvement, ranging from navigation difficulties and missing features to design preferences and content expectations. This report summarizes the key findings from these user interviews, offering a comprehensive overview of their experiences and suggesting actionable improvements to optimize the website and app’s usability and appeal.

Website Pain Points

Navigation Challenges

Placing Orders

Users find it challenging to place orders as it requires navigating to a different page.
Finding Prices

Users have to go through multiple steps to find the prices of donuts, which leads to frustration.
Redirection Issues

Users experience too many redirects, which complicates finding specific information and returning to the main menu.

Menu Layout & Content

Missing Search Bar

Several users noted the absence of a search bar on the menu page, making it difficult to find specific items.
Lack of Detailed Information

The users noticed the lack of detailed descriptions, nutritional information, and allergy warnings for the donuts.
No Prices on Menu

Prices are not displayed on the menu, requiring users to start an order to see the cost.
Inadequate Category Organization

The menu lacks clear organization, with critical links like "Careers" & Events" placed prominently, causing confusion.

Visual & Design Issues

Cluttered Interface

The website feels cluttered with too many links and banners, making the app difficult to navigate through.
Overuse of Pink

The extensive use of pink makes the website feel too "girly" and distracts from the focus on donuts.
Donut Images

Users suggested that the donut images could be taken differently to be more appealing.

Mobile App Pain Points

Navigation & Interface

Confusing Layout & Navigation

Users find the layout and navigation confusing, with too many screens to navigate through before finding specific items.
Inconsistent Pattern

The app has too many tabs, buttons, and repetitive options with no consistent pattern for scrolling and navigating, making it difficult for users to find what they need.
Information Overload

Users feel overwhelmed with too much information and too many options, which distracts from the primary goal of ordering donuts.
Lack of Search Bar

Users struggle to find a search bar or menu options, leading to frustration in locating specific donuts or items.

Ordering Process

Complex Ordering

The ordering process is considered too time-consuming and complex, with users having to click through multiple options before making a purchase.
Buried Menu Items

The donuts, which should be the primary focus, are buried under other menu items or seasonal options, making it difficult for users to find them quickly.
No Clear Menu Access

Users want the ability to see all donut options directly from the navigation bar without having to go through the ordering process.
Lack of Order History

Users would like a quick order feature to easily reorder past purchases.

Rewards & Special Deals

Lack of Clarity in Rewards Program

Users find the rewards program confusing, with unclear information on how to earn and redeem points. There is no clear explanation of how many points are needed for specific rewards.
Hidden Rewards Information

Rewards and special deals are not easily accessible or clearly communicated, making it hard for users to know what they can redeem.
Desire for Simpler Design

Users suggest a simpler design with fewer steps to access the rewards feature.

DEFINE

Establishing the user’s problems

Overview

User Personas

User Journey Maps

Problem Statements

User Personas

Understanding the diverse needs and behaviors of the users is crucial for redesigning an effective and seamless website and app experience. I created two sets of user personas, one set to reflect the users website experience, and the next set to reflect the user’s mobile app experience. In both sets of the user personas I created, I made sure for them to represent two key segments of the target audience: users familiar with Stan’s Donuts and users familiar with ordering food online.

The personas highlight the common struggles of being able to quickly locate the donuts they want and the need for ordering process to be easy to navigate through. With these personas, I will be able to gain valuable insights found in the specific goals, frustrations, and requirements of the users. The user personas will help to serve as a guide in redesigning the Stan’s Donuts website and mobile app to meet their needs in ordering donuts.

Website User Personas

Mobile App User Personas

User Journey Maps

I created a user journey map for the Stan’s Donuts website and mobile app to provide a comprehensive view of the user’s interactions and experiences with the digital platforms. This map outlines the key stages users go through, from initial awareness and exploration to ordering and post-purchase engagement. It highlights critical touchpoints, user actions, emotions, and pain points encountered during their journey. By visualizing these elements, the user behaviors can be better understood along with identifying areas for improvement to enhance overall user satisfaction and the ordering process. The ultimate goal is to ensure an intuitive and enjoyable experience for all users, whether they’re discovering the menu, placing an order, or engaging with the rewards program.

Problem Statements

After conducting interviews, creating the personas and composing the user journey maps, I focused on what would be the most pressing “problem statements”. After reflecting on my interview results and findings, I chose to focus on the 3 main problems that need to be resolved for redesigning the Stan’s donuts app and website.

Website Problem Statements

How can the website’s navigation be simplified, making it more intuitive and reduce user frustration in finding and ordering specific items?
What changes can be made to improve the ordering process, allowing users to browse the menu before selecting delivery or pickup options?
How can I improve the clarity and accessibility of the website menu details to help users better understand what they are ordering?

Mobile App Problem Statements

How can the app’s navigation be less complicated, making it easier to start an order to reduce user frustration with the ordering process?
What changes can be made to improve the ordering process, allowing users to easily browse the menu and rewards?
How can I improve the clarity and accessibility of the rewards program to help users better understand how to earn and redeem points?

IDEATE

Generating a Design Solution

Overview

Establishing Features

Sketching Wireframes

Lo-Fi Wireframe

UI Design Kit

Establishing Features

After thinking about how I can build solutions to my problem statements through evaluating my interview findings and user personas, I created a Product Feature Roadmap. Creating this feature roadmap serves as a sort of blueprint that helps to visualize and construct ideas about which features to implement that could provide solutions to the users’ needs.

Although my findings from my research into the Stan’s Donuts website and mobile app had very similar pain points, I decided to organize two feature roadmaps. One feature roadmap will provide feature solutions for the website, and the second feature roadmap will show feature solutions for the mobile app. Although it may have been more convenient for me to combine it all into one, I didn’t want to get confused reading through one big map and risk the chance of making any mistakes.

Website Features

Features	Priority	Description	Breakdown	Goal
Menu Descriptions	1 – Must Have	Food description and pricing details added into the menu page.	After clicking the food image on the menu, the user can see descriptions and pricing easily.	Make the menu descriptions easy to view.
Reorganized Menu Page	1 – Must Have	Create the menu page to have a consistent design.	Recreate the menu to have a consistent design like in the current checkout menu.	Have the menu in one page and in a consistent design.
Reorder Navigation Menu	1 – Must Have	Reorder navigation menu into a visual hierarchy from most to least important.	Establish navigation menu titles, sub-header titles, and give visual importance to “order online”.	For the navigation menu to have visual hierarchy to aid and guide the user’s website needs.
Menu Content Organization	1 – Must Have	Reduce menu titles so that the users can easily navigate through the menu options.	To reduce user confusion, reduce the amount of menu options to be more simple.	To simplify and declutter the menu content options.
Search Bar	2 – Nice to Have	Have a search bar on the menu page.	Filter out certain menu items with the search bar.	For the user to easily find their food menu items.
Donut Image Quality	3 – Can Add Later	Enhance the picture quality of the donuts with a consistent donut pose.	Use better quality pictures that are shot in the same position and angle.	Enhance image quality to appeal to the users expectations.

Mobile App Features

Features	Priority	Description	Breakdown	Goal
Nav Menu Buttons	1 – Must Have	Re-establish navigation menus into a Home, Rewards, Order, Scan, and More button.	Users can navigate through the app with each button having a useful meaning.	Enhance user navigation with organized menu buttons.
Order Button	1 – Must Have	This button will allow users to easily order a pickup or delivery.	Users can easily find this one button (instead of 3) to easily order in one main order button spot.	For users to easily find the order button.
Rewards Button	1 – Must Have	Having a reward button allows for user to view more about their reward details in one spot.	Instead of having to click multiple buttons, the rewards button will have all relevant rewards information.	For users to easily find and use rewards button.
Donuts Menu	1 – Must Have	Under Home, add donuts menu for users to instantly choose to see.	The donuts and full menu can be easily accessible on the Home button page for the user to click on to view menu description and prices.	For users to easily access the donut menu.
High Contrast Background	2 – Nice to Have	Have a high-contrast background to allow the descriptions to be more easily readable.	Instead of small black text on a pink background, having a high-contrast white background along with larger text would make the text easier to read.	Improve the text description readability with a high-contrast background.
Customer Reviews	3 – Can Add Later	Adding a customer reviews survey at the end of an order would.	Users can fill out a customer review to express their thoughts on the ordering process or their experience with the app.	To gather more data from customer reviews on ways to improve the Stan’s Donuts app.

Sketching Wireframes

After putting a lot of time into establishing the key features that I wanted to incorporate into my web and app redesign of Stan’s Donuts, it was then time to start sketching out the wireframes. First, I started out with visualizing the things that needed to be added or changed in the website, then started sketching away. Likewise for the app, I thought about the most important features I needed to change or modify in the app, and sketched out the mobile app wireframes too.

Have Questions
About This Project?

I’d love to talk about it more with you!

Resume