Hungry Vegan Co. Tells you what to eat based on how you are feeling

UX CASE STUDY

INTRODUCTION

Nutritional psychiatry explores how our diet impacts our emotional well-being, with food and mood being closely connected. The foods we consume have a significant influence on various aspects of our lives, including work, productivity, mental state, and physical health.

HUNGRY VEGAN Co. simplifies the search for plant-based food options, catering specifically to hungry vegans looking for takeout, delivery, or dining in. By eliminating the time-consuming task of finding vegan-friendly restaurants, the app provides a convenient solution. Additionally, it takes into account the user’s current mood and offers dietitian-backed food recommendations to enhance overall health.

For example, if a user is experiencing stress, the app suggests dishes containing calming ingredients rich in magnesium, such as dark chocolate pudding or nut-based salads. On the other hand, for those feeling particularly enthusiastic, the app recommends foods that help regulate blood sugar levels, like whole grain pasta and legume salads, to maintain balance.

PROBLEM STATEMENT

The current food delivery apps lacks an efficient and user-friendly interface for discovering vegan options, leading to frustrating searches. Additionally, the absence of accessible nutritional guidance impacts users ability to make informed and healthy choices.

THE GOAL

Create an application aimed at enhancing user experience by seamlessly presenting vegan options and providing accessible nutritional guidance, encouraging users to make informed and healthier meal choices. Incorporate a feature prompting users to share their mood for personalized vegan menu suggestions, thereby boosting satisfaction and engagement.

MY ROLE & DESIGN PROCESS

The Project involved an UX & UI process in order to build an innovative solution for vegan market.As the main UX/UI designer, I envionised and developed All the phases from the conception to delivery. My main responsibilities were.

RESEARCH

In-depth qualitative and quantitative research, along with the use of empathy maps, has resulted in a thorough understanding of the needs of time-constrained working adults. This specific demographic predominantly follows a vegan diet, prioritizes healthy eating, and encounters challenges in meal preparation.

UX DESIGN

User personas meticulously crafted informed the development process, directing the formation of user flows that illustrate the entire user journey and task progression. This method ensures a design and functionality centered around the user for the application.

UI & INTERACTION

The visual design of the app aligns with UX findings, employing subdued neutral colors to create an attractive interface. Usability enhancements include the reduction of text-heavy pages, integration of visually appealing imagery, and consistent attention to accessibility throughout the design process.

PROTOTYPE TESTING

Two extensive rounds of usability testing were carefully conducted on selected user flows to enhance user-friendliness, accessibility, and visual appeal.

TARGET MARKET

DESIGN STRATEGY

Executive Intent

Create a Vegan Food ordering application that lets users select their current state of mind and then makes healthy vegan menu suggestions based on whether they’re feeling angry, stressed, or happy.

Target Market

Age Group -18 -65+ , Gender -Any , Vegans & Vegetarians

Gereral Tasks

The Application gives you dietician recommended healthy vegan food suggestions before ordering -If you’re feeling stressed, it might suggest dishes with foods high in calming magnesium like dark chocolate or nuts, while those getting a little too excited about the prospect of having a mood-mapped curry delivered to their door would be recommended blood sugar-regulating foods like whole grains and legumes.

Technology Constraints

Internet, Smartphones are required, Small towns might have network related issues and delivery issues.

Cross Channels

Mobile first approach and include other platforms -Laptops, Tablets and Web Platforms.

Marketing /Branding Goals

Besides the traditional marketing approach, Hungry Vegan co’s overall strategy should combine content strategy, social media, Influencer marketing, and branding campaigns. The Unique idea of Mood based food suggestions has a significant advantage when developing a social media content strategy.

Major Competetors

Direct Competitors -Just-Eat, Uber Eats , Deliveroo, Food Hub

Indirect Competitors -Ready made take away carry out meals from major high street retailers.

THE RESEARCH

DESK RESEARCH: I initially conducted desk research to get more insightful understanding of the growing vegan industry and shifting food habits of UK population, focusing more on the Food delivery business and how it changed since the pandemic.

QUANTITATIVE RESEARCH : An online survey using Google Forms was conducted to identify user preferences. 23 respondents provided valuable insights, guiding the project moving forward.

QUALITATIVE RESEARCH : After quantitative research, I recruited & interviewed 8 participants. While complete unbiased observation is challenging due to factors like confirmation bias and leading questions, I actively considered and minimized errors to prioritize authentic user perspectives. As a UX designer, my focus is always on putting the user at the forefront to create designs that genuinely meet their needs.

PERSONAS & USER STORIES

Pain points to features

Exploring and effectively mitigating user pain points serves as a pivotal starting point in uncovering the myriad frustrations users encounter within existing applications available in the market. This proactive approach not only enables developers to grasp the precise challenges users confront but also sheds light on the pressing issues that demand resolution or enhancements desired by the user base.

By meticulously gathering insights through user interviews, I meticulously gathered insights through user interviews, diligently pinpointing their pain points and translating them into actionable features within the application. This meticulous process ensures that the app is not only responsive to user needs but also equipped to deliver a seamless and satisfying user experience, thus fostering greater engagement and loyalty among its users.

BEHAVIOURAL ARCHETYPES

Through extensive research, I identified three distinct user archetypes with specific jobs to be done. Analyzing their behaviors, goals, needs, and frustrations will serve as a guide for defining the product roadmap, content strategy, and language style to be employed in the final app, ensuring it caters effectively to all user types.

The Vegan Rebel :The target users are environmentally conscious individuals who prioritize sustainable living and veganism. They are open to trying new dishes, enjoy exploring culinary adventures, and actively seek out trendy vegan restaurants to expand their dining experiences.

The Conscientious Eater:The target users prioritize maintaining a balanced diet and make healthy choices when ordering takeaway or delivery meals. They have a keen interest in knowing the ingredients included in their dishes.

The Habitual convenience eater: The target users prefer ordering the same type of food repeatedly and are not inclined to try new dishes. They greatly appreciate the convenience of a “Reorder” button. Time is a valuable factor for them, and they frequently place multiple orders throughout the week.

USER JOURNEY MAP

From the data I collected, I created an ideal user flow as how I imagined my app to pan out and what my desired user experience would entail. It later developed into an experience map, which captured the user’s journey and emotional results with each touchpoint they perform within the app.

TASK FLOW + MIND MAP + USER FLOW + SITEMAP

TASK FLOW : Peter wants to find out food suggestions based on her current mood and wants to order a dish that the app recommends, remove any nuts from the ingredients as she is allergic to nuts and wants to add a special instruction to make the dish extra hot.

WIREFRAMES

I proceeded to create a wireframe prototype in order to conduct a usability test, aiming to identify and address any issues early on before advancing to the development of high-fidelity screens.

USABILITY RESEARCH

DISCOVERING PAIN POINTS FROM USABILITY STUDY

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. This prototype was then tested with five participants, including one with limited technical skills.

I recruited five participants for the study. This time, I included one participant with low vision to learn how the colors in the app might affect accessibility.

To begin identifying usability issues, I went through the actions of ordering a dish from a restaurant with the research group. In about 30 minutes, i came up with a rough list of 20 issues that we discovered. Then, i narrowed down the issues into a list and table to help prioritize and organize our list.

USABILITY STUDY FINDINGS

User centered designs

SIMPLE CUSTOMISATION + ORDERING WITH REDUCED COGNITIVE LOAD

I simplified the process of customizing food ingredients to enhance user experience. Users can now easily add or remove ingredients from food items without the need to navigate through multiple checkboxes or rely on adding instructions in the 'notes' section.


More than 33% of the interviewees expressed their frustration over restaurant neglecting their requests that were specified in the 'notes section'.

POSITIVE SCARCITY

To address a prominent concern raised by 42% of research participants regarding high delivery costs, I leveraged a scarce resource, namely the timing of deliveries. By encouraging new users to select the same restaurants as past users, they were able to enjoy free delivery as an incentive.

SOCIAL PROOF + UPSELL

“People also ordered section'‘ instills trust in users -( simple but effective )

SERIAL POSITION EFFECT

We have much better recall of the first and last items within a list *.

People normally scroll top to bottom and pause a little longer on the first item and the last. Better placement of popular items would overall value.

PERSONALISATION - REDUCED CHURN


Using previous experiences and data to craft a better experience is key to user retention.Users are evolving. They're growing with the platform every time they use it.

So,i made sure the product leverages past behaviors to remove repetitive and unnecessary steps.

MOOD BASED FOOD SUGGESTIONS


Hungry Vegan Co. utilizes user feedback on emotional states to provide personalized menu suggestions. By asking users how they are feeling, the system tailors its recommendations accordingly.

For instance, if a user expresses stress, the system may suggest dishes containing magnesium-rich foods like dark chocolate or nuts, known for their calming properties. On the other hand, users who are enthusiastic about ordering a carb-packed pizza may be advised to consider blood sugar-regulating options such as whole grains and legumes.

EXCLUSIVE HANDPICKED VEGAN RESTAURANTS


Explore exclusive healthy, vegetarian, and vegan food options nearby with the Hungry Vegan Co app.

USABILITY TEST FURTHER ITERATIONS

STREAMLINE REORDERS

During usability testing, one of the tasks focused on measuring the time it took for users to locate their past orders for reordering. Several users faced difficulties finding their recent orders, and even those who succeeded took approximately 2 minutes.

To address this issue, i revamped the design by streamlining and relocating recent orders and reorders from their previous placement. They are now prominently featured on the home page, ensuring easy discoverability and accessibility for users.

PEOPLE BUY STORIES , ADD PUSH UP RESTAURANT DETAIL PAGE

Based on user feedback, I added a push-up screen feature to provide more information about the restaurants, instilling trust and a sense of security.

This addition was driven by users' curiosity about the restaurant's background and limited information available on the app.

RATINGS BURRIED

During usability testing, users expressed frustration about having to open each restaurant listing to view reviews. To address this, I relocated the ratings to the restaurant listing page, allowing users to quickly scan through various restaurants without the need to open each individual bio page to see the ratings.

OPTIMAL USE OF SCREEN REAL ESTATE

Many apps in the market inundate users with excessive information, occupying more than two-thirds of the screen before they can even begin browsing food choices.

SENSORY APPEAL BY USING IMAGES

We are engaged by things that appeal to multiple senses.

The senses amplify one another when they are mixed. It's really powerful because users don’t perceive them as marketing messages.1

Source : https://hbr.org/2015/03/the-science-of-sensory-marketing

ACCESSIBILITY CONSIDERATINS

WCAG 2.2, Section 508, ADA)

The whole Ui is designed top-down by keeping WCAG guidelines in mind, contrast colours are used throughout the UI stage itself. I conducted grey scale tests to make sure it’s accessible for color blinded due users and used relative Luminance to make important elements stand out.

I included people with disabilities in the group of test participants I recruited for our usability tests. By including people who have disabilities in our usability tests, I was able to uncover accessibility issues that our manual checks and our automated checks would not have been able to find!

Divide and rule (Information Bearing Elements v/s Decorative and Disabled Elements)

Before I even started the design, I categorized the ui into 2 groups ie information bearing elements and decorative and disabled elements and I ensured there is adequate contrast between the color of every single information-bearing element and its background

I was checking the contrast of colors as I am designing, I made sure there is a contrast ratio of at least 4.5:1 (an exception is made for some elements where the ratio was 3.1 as set by the WCAG for all information-bearing elements Taking into consideration the three major color blindness categories. I avoided using problematic color combinations

Colour Dependent to Colour Independent design to make it accessable for all

I ensured that color is not used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

I also had regular color independence check pitstops in my design process by conducting grayscale tests where required. I combined multiple color independent tactics for a more fail-proof design

TAKEAWAYS

I learned that conducting a second round of moderated usability testing can be powerful. It answered questions I had about my prototype and confirmed what was and wasn't working.

I discovered the gratifying experience of crafting something that resonates with users. A study participant enthusiastically expressed that the swipe option in customising ingredients food would significantly enhance their food ordering experience.

NEXT STEPS

MORE TESTING : I would recommend a third round of usability testing on the updates completed after the second round of moderated usability testing.

LOG IN RESEARCH : more research into the best log-in process flow to confirm the process being used now is the right one due to the conflicting opinions received during testing.

Next
Next

NOWNESS