Peace of mind with every cookie
When ordering online there should be no guesswork when it comes to food allergies or food sensitivity
Project
A conceptual mobile app
portfolio project
Role
Researcher, designer and architect
Time
2 months
Objective
Design a food ordering mobile app.
Restraints
Users with food allergies and sensitivity
Can we make the online ordering experience for individuals with food allergies and sensitivities as sweet as the cookies they crave?
What needed to be resolved
In this conceptual project the core task was to design a food ordering app. However, during the research phase I found that there is a need to transcend the conventional boundaries of food ordering applications to address a real-world user need - creating an inclusive food ordering app for individuals with food allergies and sensitivity. Often traditional food ordering platforms overlook the nunced dietary requirements of this demographic. Therefore, the task was to devise a solution that not only caters to the specific needs of users with dietary restrictions but also ensures that the ease of use and user interface design remains on par with those of the most popular apps in the market.
How it was solved
The approach was taken to design an app that emphasized the user customization at its core. The solution was three fold:
-
Inform users of all ingredients in each cookie so each individual can with confidence make choices that are safe for their health.
-
Provide a way for users to customize ingredients with ease. This feature ensures that users can tailor their food choices to meet their specific dietary requirements.
-
To appropriately notify users of ingredients that they need to avoid. Giving the user confidence in the online ordering process.
"A quarter of Americans now avoid allergens in the food they buy—and tell us they are hungry for innovation."
My research showed that a significant portion of research participants faced daily challenges in navigating dietary needs. So instead of designing another repetitive and identical app to all the others taking the same UX/UI course, the discovery led me to focus on individuals with food allergies and sensitivities. Recognizing this underserved niche within the dietary management space, I designed the app to provide them with the tools and support they need to confidently manage their food restrictions.
Research methods
User research
Qualitative
The goal of this qualitative research was to identify user pain points that discourage them from ordering cookies online.
Ultimately, the research revealed that:
-
Users are looking for an app that clearly displays ingredients.
-
Users would prefer an app that offers ingredient customization options.
-
Prominently highlighting any allergy warnings would give users peace of mind.
Additionally, the app needs to have a quick and clear ordering process. Users with allergies or sensitivities noted that ordering specialty items online often requires more steps and actions, which can unnecessarily prolong the checkout process.
Competitive audit
Online
A competitive analysis highlighted a critical gap in the market: the lack of personalized options that cater to users with specific dietary needs. The data gathered underscored the necessity for an inclusive app design that prioritizes user safety and customization. This foundational research informed the development of the app's key features of customizable ingredients and keeping users well informed of ingredients.
"It makes me uneasy to order food online that my daughter could potentially be allergic to."
During the initial research phase, I discovered that many users are frustrated with the constant vigilance required during the online food ordering process, only to be let down by the lack of options for those with food allergies and sensitivities. This insight emerged from a simple question: "Do you think this app is useful to you?" The feedback received at that time was significant enough to steer the project towards addressing dietary concerns rather than focusing on other features, such as delivery methods and customizable decorations.
Three pain points where focused on during this project:
Allergy warnings
Important ingredient information and allergy warnings are often hard to find, difficult to read, or even altogether absent.
Customizable ingredients
Users are faced with limited to food choices because they arw unable to substitute ingredients.
Visible ingredients
Confusion and loss of empowerment for consumers when they do not see ingredients clearly and right up front.
The goal of the mobile app should allow those with special dietary needs to clearly see ingredients, have the option to modify those ingredients, and see allergy notifications clearly
Shaping the solutions
The flow for this app needs to ensure familiarity, simplicity, and user customization in order to stay in tune with the original goal of the app. That is where I started ideating.
Initially, users would land on the homepage guiding them to choose from the full cookie menu. In each pop up cookie card the user is greeted with a clear list of ingredients, addressing the need for transparency regarding potential allergens. This upfront information empowers users to make informed decisions about their orders.
Next, the flow allows the user to customize ingredients, enabling users to tailor their orders to fit their dietary needs and preferences seamlessly. This step ensures that each user can enjoy their favorite treats without worry.
Finally, the app should offer the option to set up dietary preferences and allergy alerts. This feature simplifies future orders, as the app remembers the user's selections and preferences, alerting them to any items that might conflict with their dietary restrictions. Through these steps, the user flow should focus on a personalized, and a safe ordering experience.
Refining the Design:
As we transitioned to high-fidelity prototypes, the focus shifted towards incorporating more detailed visuals and a user interface that closely mirrored the final product. This involved the selection and implementation of colors, typefaces, and icons.
Color Choice:
The minty green color #21C4AF was a deliberate choice, selected to evoke a sense of freshness, and to align with the app's focus on health awareness.
Typeface Choice:
"Road Rage" was chosen for its bold and slightly unconventional characteristics, which added a touch of whimsy and lightheartedness. This playful style complemented the app's focus on the indulgent nature of cookies, making the user experience engaging and fun.
High fidelity prototypes were used in a usability study to provide more insight into the real life functionality with users. I wanted the app to evolve with the user and for the user.
The study showed that users where running into trouble with tasks such as:
-
Navigating back to their profile
-
Reading texts
-
Unsure if orders had processed
-
And most importantly, users where fumbling around with the customized ingredient list, and sometimes even missing the option all together.
I had missed a crucial part of the app's goal - making customizing ingredients intuitive.
Calling for agility and refocus!
Usability Study
Polishing the imperfections
"I'm not sure where to go from here?! Oh, this must be where to customize ingredients"
- Consumer from user study
Now at the final stages of development, my focus shifted towards polishing the app to meet the needs of the users. I dedicated attention to enhancing visual contrast, ensuring that text and elements stand out clearly against their backgrounds, thereby improving readability and user engagement. The hierarchy within the app received a thorough refinement, with a careful arrangement of elements to guide the user naturally through their journey, emphasizing the most critical actions such as being able to customize ingredients.
Clear warnings and customize button in the forefront
-
Clear notification of dietary preference warnings.
-
Showing what ingredient/s are marked to avoid.
-
"Customize Ingredients" button more apparent.
More intuitive cart
-
Removed the "Continue to shop" button since the app already had a back icon.
-
Item card with price and quantity button
-
Better contrast throughout app and larger buttons with more intuitive icons.
Floating cards with better hierarchy
-
Floating customization and item card to close out of.
-
Clearly showing what item is being customized.
-
Changed hierarchy of layout to lead the user from curiosity, to more details, and finally to a call to action.
Check out status made more clear
-
Order processing bar
-
"Back to menu" button removed and user is taken directly to landing page again after order is completed.
End results
Through the process of designing this app tailored for individuals with food allergies and sensitivities, I learned the critical importance of steadfastly adhering to the user's needs I established at the beginning of the design process. And it was during the final usability study that I experienced a breakthrough. At that moment, I gained a comprehensive understanding of the assignment, enabling me to make the necessary adjustments to address the users' needs and refocus the project on the user experience.
It became evident that the only way to create a product that would meet the users' needs was to refocus and deeply understand the unique challenges these individuals face daily, especially when shopping for food. I delved into the study results, analyzing them with a goal-oriented approach, and allowed myself time to apply fundamental design principles to the drawing board. I primarily implemented principles such as contrast, balance, and proportion to enhance the UI.
In the end, we have an app that I believe is much closer to achieving the objective I set out to accomplish—to enable those with special dietary needs to clearly see ingredients, have the option to modify those ingredients, and receive clear allergy notifications.
The future of Sarah's Custom Cookies
01
Dietary preferences
02
Save your favorite cookies
03
Animation on landing page
04
Rewards feature
Where to go from here?
Looking ahead, the future of the app has the potential for exciting enhancements. Key updates like:
-
The integration of dietary preferences that were not a part of the initial project goal.
-
Additionally, I would like to implement a feature that allows users to save their favorite cookies, making it easier for them to reorder with just a few taps.
-
The introduction of animation on the landing page is also in tune with today's trends and a dynamic first impression.
-
Lastly, the development of a rewards section will offer loyal users the opportunity to earn rewards, adding an extra layer of incentive and appreciation.
These future enhancements are aimed at making the app not just a tool for ordering food safely but also a delightful platform that users look forward to interacting with.
