Overview
Mr. Donuts is a local donut shop in the Denver area with an award winning product that needed a digital redesign to really let their brand shine.
My Role
UX Researcher
UX Designer
UI Designer
Before
After
Research Approach
Because there was an existing site to redesign, my initial research consisted of recruiting users to walk through a user testing interview. In recorded Zoom sessions I assessed users’ initial reactions to the site and asked them to perform basic operations. The insights gained from these interviews gave me the foundation needed to start my redesign.
Understanding what users commonly expect from a well designed donut site and e-commerce in general was key to driving strong design decisions. I studied established national brands such as Krispy Kreme, Duck Donuts, Voodoo Doughnut, and Chipotle to understand common standards in the industry.
I synthesized my findings into a list that prioritized which features should be considered. Using this, I laid out the order of my design.
After determining the features that provided the most impact in the most feasible amount of time I’d set for myself, I set to build out a site architecture that would be most intuitive to a user. In structuring out a product menu for one location, I realized there would need to be multiple ways to access this menu based on the way a homepage should be structured as seen in my industry research. Because of this, a certain redundancy of data would be needed in the navigation structure.
A clear plan of my site navigation allowed me to build a common task flow that a typical user would follow when ordering a donut. Understanding the user’s actions when interacting with my site help me visualize and brainstorm ideas on the screens that would be necessary to interact with that would command these actions.
Design Approach
After a sufficient amount of research and initial data gathering, I sketched some ideas for the homepage and ordering screens in the desktop format. Many initial drafts focused on full size banners for both hero page and special promotions below the fold.
Several competitors took advantage of promotional banners for limited release products, sales, and awards. In fact a major accolade that was missing from the original site was recent award from Yelp.
In order to envision different device sizes, I also sketched mobile screens to see how a responsive site like this would reorganize content. I pictured much of the content stacking on top of one another.
The initial logo was cluttered with too many visual elements layered on top of another, many admonishments too small to discern without zooming in. Much of my sketching centered around the idea of preserving a recognizable donut graphic but wanted to created something that would scale well. Due to the colorful nature of the graphics and website itself, I opted for a simple black and white logo that could be recognized in many different sizes.
The stock imagery needed to have a consistent visual theme that emphasized the product as much as possible. I opted for images without any background to enlarge the products without being intrusive on the rest of the interface.
The rest of the UI was built with a black and white minimalist design to let the graphics and banners stand out. A playful blue color was selected as the main brand color to attract user attention to all CTAs and clickable buttons.
Usability Testing
My first prototype built out a task flow to allow ordering of two “Strawberry Delight” donuts and continuing on through payment information collection and order submission. In order to test the effectiveness of the UX design, I hosted 5 Zoom sessions that walked users through the prototype over Figma.
Having them share their screen, I was able to observe and record every nuance and comment each step of the way. This flow, while simple, was met with a 100% success rate with little to no resistance through every interface interaction.
average completion time for each user.
completing the prompted task flow.
asked from all the users regarding the next test interaction.
Iteration
Pooling together feedback from my usability testing interviews and group critique observations, I was able to iterate my design with one major feature addition and several interface adjustments. A key part that users felt was missing from the donut order experience was the ability to order a dozen. I decided to tackle this feature with a minimalist approach by implementing a notification to the user of a discount when ordering a dozen donuts.
I wanted to accomplish this by introducing noticeable but unintrusive notifications and reminders of this discount. I added a dismissible pop-up in the donut menu page and an additional reminder in the cart if they didn’t reach the dozen criteria.
Next Steps
One feature that would add value to the user experience would be a page that empowers the user to create their own custom donut. This is currently featured on the existing website but doesn't have anything in it. The client also showcases customized donuts on their social feeds, showcasing special messaging for events and holidays. A series of dropdowns and forms could easily capture inputs needed to complete these types of custom orders, but additional details could be capture through other completed methods as well.
Researching competitors that take custom orders online such as tattoos and custom T-shirts, an interface could allow a user to submit and image or draw rudimentary symbols and lines with a basic illustration module. Features such as this would also further warrant a need for a login system to allow users to save custom orders and review purchase history.
