Mad Over Donuts

Product Designer, 2022 for an academic project at Northeastern University. Focused on enhancing the overall user experience, interactions, visual designs, and prototyping of Mad Over Donut's website for a more seamless interaction.


Product Design


Figma, Adobe Creative Suite, Miro




Northeastern University (Academic Project)


Unveiling critical design gaps

This project aims to tackle critical design challenges revealed through a Heuristic Evaluation. Focused on decluttering irrelevant information, unifying dual platforms, and improving mobile product categorization, it seeks to bridge the emotional gap between the brand's website and its engaging social media presence. The goal is to establish consistency and adhere to UX standards, elevating user experience to new heights."



Crafting an immersive online experience for Mad Over Donuts

Our solution involves a comprehensive product design overhaul that transforms the Mad Over Donuts website into a captivating and efficient platform for users. By prioritizing usability enhancements and leveraging engagement strategies, we aim to create a compelling online journey that seamlessly guides users from exploration to purchase.

My design process to solve the problem

Understanding the problem and its customers

Target Audience
Site Audit

Detailed site audit link: Mad Over Donuts Site Audit

Guerilla Usability Testing

To test the web app’s user experience, I interviewed people who purchase or have purchased donuts from MOD and asked them to perform a few predefined tasks on their website using their mobile as I was observing their actions and took notes. Some of the tasks/questions were:


  • Getting familiarized with the homepage
  • I asked them to view the products.
  • I asked them to order a product.
  • Search for a product and add it to the cart.


  • How was your experience on their website?
  • Do you use a mobile or desktop for ordering food?
  • What is difficult? What is easy?
  • Did you find anything missing?
  • Would you recommend anyone use their website to place an order?

I used affinity mapping to plot similar observations together. Affinity mapping helped me to gather insightful data that led me to design solutions for problems common amongst the users.

Identified six critical issues with the web application


The web application's log in process is riddled with inconsistency, subjecting users to a confusing and disjointed experience with two separate links for authentication: one demanding a mobile number, and the other necessitating Google or email credentials.

Problems in Usability

The web application's log in process is riddled with inconsistency, subjecting users to a confusing and disjointed experience with two separate links for authentication: one demanding a mobile number, and the other necessitating Google or email credentials.

Accessibility Issues

The website suffers from several critical accessibility issues, as evidenced by the poorly chosen color of the topmost log in button, which is not readily visible, as demonstrated in the accompanying image.

Poor Information Architecture (IA)

The landing page of the ordering website features a severely flawed information architecture, failing to present a clear categorization of products such as donuts, eclairs, and waffles. Instead, the website showcases different varieties of donuts as categories, leading to a significant disorientation among users.

Absence of Call-to-Actions

The website suffers from multiple locations lacking clear CTA buttons, and the displayed images frequently perplex users, who are uncertain if they are clickable links or just static images with no action associated with them.

Confusing Existing CTAs

Most users found CTAs on cart page perplexing. The 'View Detailed Bill' button, appearing as static text, confuses users. It's clickable, leading to bill breakdown below, causing disorientation. Also, 'Signup/Login' button misleads, allowing only mobile number login, lacking other sign-up choices.


Having conducted research and analyzed competitors, I reviewed my findings in order to develop a user persona. While doing so, I identified significant pain points and behavioral patterns that I aimed to capture in my persona. I created the persona with a focus on the target audience, which constitutes 90% of the web application. Additionally, I developed user journey maps to connect my persona with design concepts, and relied on the persona to guide my design choices throughout the project.

Customer Journey Map

After developing the persona, I constructed a customer journey map to depict the various stages and touchpoints that the persona would encounter while engaging with the MOD web application.

Turn pain points into design opportunities

User flow diagram

Along with the personas, we created a user flow diagram to outline the main functions of the website. The goal was to comprehend the steps users would take to complete a task and what they would need to get it done.

Current VS Revised Information Architecture

Low-Fidelity Wireframes

Next, I started developing low-fidelity wireframes using pen and paper. Later, I advanced to using Figma for my Mid-Fi and Hi-Fi wireframes. Throughout the design process, I made ongoing improvements to improve the website's functionality and user experience.

Mobile First

I went ahead with the “mobile-first” approach that involves designing a desktop site starting with the mobile version, which is then adapted to larger screens (contrary to the traditional approach of starting with a desktop site and then adapting it to smaller screen sizes). This meant building MOD website with their mobile users in mind which helped me to focus on the core functions of their product.

High-Fidelity Wireframes

Branding and Mood board

To create design guidelines for my high-fidelity wireframes, I initially examined Mad Over Donut's branding on its Instagram account. I found that the current MOD branding and logo were suitable for its target audience, conveying a playful and enjoyable vibe. As a result, I decided to incorporate the existing branding while enhancing the user experience by emphasizing functionality.

Creating a design language

Style Guides

Prior to crafting high-fidelity prototypes, my focus was on cultivating a harmonized visual language that would ensure uniformity throughout the product's various elements. I harnessed the existing color palette and adhered to the style guide to craft design components tailored specifically for the Mad Over Donut's web application.

Creating Hi-Fidelity Screens

Using the visual design system, I created high-fidelity UI screens as shown below.

Creating a testable prototype

UX Improvements and Redesign

I used all the information and feedback that was gathered from multiple design concepts, usability testing, and site audits, integrated that with the design system and started developing high-fidelity wireframes

Experience 1: Home Page

Experience 2: About us

Experience 3: Product page

Experience 4: Store locator page

Experience 5: Custom order page

Experience 6: Navigation menu

Experience 7: Cart page

What I learned

Creating a visual design is necessary to make users understand what the brand identity represents and statement that Mad Over Donuts (MOD) stands for. Many rounds of the design iteration are helpful in order to get the right visual that meets the brand.​I found that breaking down specific tasks helped me move towards the goals quicker and more effective.

Other work

If you want to learn more about my work, or just want to grab some coffee, i'd love to chat