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.
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."
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.
Detailed site audit link: Mad Over Donuts Site Audit
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:
Tasks:
Questions:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Using the visual design system, I created high-fidelity UI screens as shown below.
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
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.
