Green's Health

This endeavor was undertaken as part of my Google UX Design Professional certification coursework, where the primary goal was to conceptualize and execute a socially impactful mobile app or website while implementing the comprehensive knowledge and research methodologies that I had assimilated during the course. I began this project in January 2022 and is one of my favorite design projects since I was able to really be creative and build new skills.

Role: UX researcher and UX designer

Duration of Project: January 2022 - March 2022

Tools Used: pen and paper, Adobe Illustrator, and Adobe XD

High Fidelity Prototype

Project Overview

The Problem

Finding healthy and delicious meals is often a challenging task, plus, not even knowing why a recipe is healthy makes healthy eating unnecessarily confusing. People often have to visit multiple websites and sources just to find recipes that fit their needs and to research why ingredients are healthy because a platform that aims to help with both is not as accessible

The Goal

Design an app that has a wide range of different healthy recipes for users to easily find and follow, all while educating them on why certain ingredients are healthy. Accessibility and education is a key goal for the app, in order to help users of a wide range of backgrounds improve their dietary health.

Research

The cohort of research participants was intentionally diverse, comprising individuals of varying ages, genders, races, and economic backgrounds, to ensure that a comprehensive range of perspectives was obtained despite the modest sample size of five participants. The participants engaged in preliminary user research and usability studies. To facilitate the preliminary round of research, I undertook secondary research, conducted interviews, created empathy maps, personas, and user journey maps, and conducted a competitive audit to gain a thorough understanding of the users and their needs.

In essence, the research yielded insights suggesting that most users crave a platform that offers a deeper understanding of the health benefits of various ingredients or recipes, while also providing access to appetizing and wholesome meal ideas. Additionally, users indicated a preference for an efficient search functionality, a streamlined and intelligible interface, and a diverse array of recipes.

User Pain Points

Options - A significant portion of the research participants, comprising 60% of the group, opined that most healthy recipe websites or applications offer limited options, particularly in terms of culturally diverse foods from various regions worldwide. Furthermore, these individuals conveyed their dissatisfaction with platforms that purported to feature global recipes, but ultimately failed to do so in an authentic and healthy manner.
Customizations - A notable 60% of the research participants faced multiple dietary restrictions or health concerns that necessitated careful consideration of their food choices. However, these individuals expressed frustration with the limited availability of recommendations or specific recipe options tailored to their unique needs on most websites they visited. Consequently, they were compelled to scour through several recipe websites to find suitable options, a time-consuming endeavor that they perceived as burdensome.
Information - The entire participant group expressed a shared desire for a deeper understanding of the health benefits associated with particular ingredients. They noted that the lack of comprehensive information on the nutritional value of certain foods necessitated them to consult multiple sources to grasp their true healthfulness. This disjointed approach led to confusion and skepticism regarding the veracity of claims that certain recipes or ingredients were indeed healthy.
Recipes - The majority of research participants, accounting for 80% of the group, expressed aversion towards lengthy narratives or intricate explanations that many recipe websites and food blogs often feature. They found such content to be a hindrance that required them to scroll or swipe through to the bottom of the page to access the recipe's essential information. These users prioritized efficiency and preferred to get straight to the recipe because they perceived themselves as busy individuals who wished to start cooking immediately.

Paper Wireframes

Home Page paper wireframe

A key design objective of mine was to create a visually stimulating home page that enticed users to explore and experiment with the recipe collection. In particular, I sought to create an inclusive user experience by featuring recipes tailored to individual health needs and dietary restrictions, thereby making the platform feel personalized and attuned to users' unique requirements. To achieve this, I employed a visual design strategy that showcased the featured ingredients and recommended recipes prominently, with the aim of piquing users' curiosity and inspiring them to try out the suggested options.

recipe page paper wireframe

In designing the recipe page, I sought to address a common user frustration associated with having to scroll down lengthy pages to access essential recipe information. To this end, I incorporated several design elements that streamlined the user experience. Firstly, I created designated spaces for videos and pictures, which added a visual dimension to the recipe page and provided users with additional context and inspiration. Secondly, I introduced a clear and concise recipe description section that highlighted the recipe's main features, such as flavor profile or cultural context. Finally, I implemented a tabbed interface that segmented the recipe information into three distinct categories: ingredients, cookware, and cooking instructions. By doing so, I ensured that users could efficiently access the information they needed to prepare the recipe and get cooking in no time.

Ingredient Index paper wireframe

In line with the user need for greater understanding of healthy ingredients, I prioritized the development of an ingredients index that provided users with a comprehensive list of healthy ingredients to explore and learn from. To optimize the user experience, I incorporated filter and sort options that enabled users to quickly and easily find specific types of ingredients, streamlining the process of ingredient discovery and facilitating greater user engagement. By empowering users to expand their knowledge of healthy ingredients, I sought to foster a sense of empowerment and confidence in their healthy eating habits.

Ingredient page paper wireframe

To enhance the user experience, I integrated a feature on the Ingredient Information page that showcased recipes featuring the ingredient being highlighted, enabling users to explore their options and discover new recipes to try. Initially, I had intended to provide only a brief description of the health benefits of each ingredient. However, as I progressed through the design process and gained a deeper understanding of user needs, I realized the importance of providing more comprehensive information. Consequently, I expanded the descriptions to provide users with a more in-depth understanding of why each ingredient is considered healthy, thereby facilitating their journey towards healthier eating habits.

Digital Wireframes

Ingredient Information Page

Upon reflecting on the user's desire to learn more about healthy ingredients, I realized the importance of providing comprehensive information to educate them effectively. As a result, I revised my initial plan and decided to include more detailed information about each ingredient. In order to maintain a clean and organized layout, I separated the ingredient information and recipe sections into distinct tabs.

Recipes Page

The primary objective of Green's Health was to curate a diverse collection of healthy recipes, and simply presenting all of them at once could potentially overwhelm the user. Therefore, on the recipes page, I aimed to provide multiple categories that would assist the users in refining their search according to their daily requirements and specific health needs.

Favorites Page

After considering the user experience, I realized that simply listing all the favorite recipes with just filter and sort options might be overwhelming for the user. Instead, I opted to include shortcuts to recipes and ingredients, which would allow users to quickly and easily navigate to their preferred options. This would help users to narrow down their search and find the recipes and ingredients that best fit their needs in a more efficient manner.

Low Fidelity Prototype

Click Here

Usability Testing: Findings

For this study, I recruited 5 people to test the low fidelity prototype. Participants were a range of incomes, races, occupations, and ages. Below are the top 3 key takeaway from this study.

Three of the five users expressed that they found the ingredients page to be overwhelming and cluttered. They suggested that the ingredients be organized into categories instead of being presented in one long list.
The majority of users, comprising 80%, expressed a strong desire to share recipes and ingredients with others. In response to this, I will be implementing a user-friendly share button feature that will allow users to easily disseminate recipes and ingredients across various platforms.

Refining Digital Wireframes

Ingredient Information Page wireframe

Following the initial usability study, I incorporated the feedback from users and made revisions to both the recipe and ingredient pages to include both the like and share functionalities. To ensure ease of use, I made sure that both of these buttons were easily accessible and visually prominent. However, during the mockup phase, I also took into account aesthetic considerations, and adjusted the placement of these buttons while still maintaining their prominence.

Ingredients Index

Considering the findings from the first usability study for the ingredients page, I incorporated a carousel showcasing various ingredient categories to assist users in narrowing down their search. Below the carousel, I retained a few featured ingredients that would align with the user's preferences and potentially introduce them to a new ingredient that would be advantageous for them.

Mockups

As a designer, I aimed to infuse creativity into the project by incorporating original icons and illustrations that I crafted in Adobe Illustrator. In particular, I sought to develop a charming mascot, Greens the Robot, that could serve as a source of inspiration for users. Greens was envisioned to appear prominently on every page, situated at the bottom to offer uplifting messages and express enthusiasm for the scrumptious cuisine. The primary objective was to inject an element of amusement and playfulness into the user experience.

Greens intro to app Greeting page 2 mockups