a food-shopping platform to serve all diets as well as simplifying all users' experience while shopping for groceries in person and online.
Timeline: Dec 2020 - Jan 2021
Applications: Adobe Illustrator, Adobe Indesign, Figma
Team: Individual
RATIONALE
INSPIRATION
After my mother was diagnosed with a rare autoimmune disease, she began to implement drastic lifestyle changes - a main one included changing her diet to one that excluded grain/gluten, refined sugar, meat, and dairy.
With this change, she found herself having to do an immense amount of research on replacement diet foods, viable and reliant food brands/stores, as well as the extra hours spent at grocery stores reading ingredient lists for foods she can't have.
CONTEXT
Today, more and more individuals are changing their diets as preventable measures to health problems such as diabetes and cardiovascular disease. Making diet changes have been shown to improve health outcomes, but lack of accessibility (in-store & online) have always come in the way of easing that transition to a new diet.
PROBLEM
Our popular food sources have not adapted; while stores that do have the options are often more expensive and often requirement a membership, another additional expense.
How can we streamline the food shopping experience and facilitate the diet transition through a web application?
USER RESEARCH
After exploring current food-shopping platforms and their usability with a range of diets, I conducted in-depth virtual interviews one-on-one with various users about their food shopping experience with their unique diets.
SELECT QUESTIONS
What is your diet or food preference and how do you ensure that the food you buy abide by those restrictions?
Where do you go to understand key ingredients, diets, food types, and how long does it take you to find a reliable source?
Describe your process while shopping for diet foods in store versus online.
RESPONSES
4/5 users report having problems with existing filtering search interfaces and mention how online food platforms list ingredients that don't match actual food products.
4/5 users report utilizing almost 3x amount of time and resources researching new diets and reliable food products and note how current sources are inaccessible and extremely detailed.
5/5 users report spending at least 2x more time browsing food online and in person as they have to double check all ingredients and produce.
RESPONSES
4/5 users report having problems with existing filtering search interfaces and mention how the online food platforms list ingredients that don't match actual food products.
4/5 users report utilizing almost 3x amount of time and resources researching new diets and reliable food products and note how current sources are inaccessible and extremely detailed.
5/5 users with specific diets report spending at least 2x more time browsing food online and in person as they have to double check all ingredients and produce.
KEY SOLUTIONS
SEARCH
allows users to search by diet, ingredient, store, location, budget, and many more. You can either exclude items or include items. Uses an accurate search engine for diets/ingredients according to the FDA.
allows user to scan the product barcode which will pull up the ingredients and make sure the product is agreeable with the user's diet that is saved in a very own food4YOU account.
allows users to learn about various diets and ingredients and understand origins and health benefits. Uses FDA approved as well as medically reliable sources and summarizes the information to be easily digested.
SCAN
LEARN
IDEATION
Based on research, I identified my user journey and interface opportunities for my 3 solutions of SEARCH, SCAN, and LEARN.
I focused on creating a simple, intuitive platform that takes away the stresses of shopping indicated by subjects interviewed.
SEARCH + LOGO IDEAS
While sketching, I realized a web application was the most direct solution to support many users. I began with the search feature screen, keeping it simple, clean, intuitive.
Initial ideation was included with main purpose as well as logo ideas inspired by the shape of a stomach.
HOME + SEARCH + SCAN
I designed an updated home page with all features to be selected from rather than having the search page be the first one.
I fleshed out SEARCH page with example inclusions and exclusions.
The SCAN page allows users to input their phone number which will send a link to download the app and scan their food.
BROWSE > LEARN PAGE
I mapped out the current LEARN page which I initially called BROWSE. I imaged circle icons to lead to more pages with concise information on the topic.
I also conceptualized a possible page to browse recipes to align with users' diets.
BUILD + DESIGN
Using my research and ideation results, I utilized Figma to wireframe my intended user journey. I kept in mind the simple intention for its use and how it would benefit the users' everyday lifestyle.
From there I honed in on my intended visual design: color, font, logo, etc.
WIREFRAMES (clickable)
Starting from my drawn out ideas, I mapped out user flow and focused on creating minimal buttons to allow for intuitive journey and usage.
VISUAL DESIGN ITERATIONS
I began by taking inspiration from soft muted tone pictorials and pulled some colors that I was drawn to. I also iterated stomach shapes for logo icons and derived a small logo version. I worked with various font types (mostly rounded serifs) to perfectly brand food4YOU.
VISUAL DESIGN FINALIZATION
I settled on 5 main colors and the fonts of Avenir for body type. I also designed the SEARCH, SCAN, and LEARN feature icons.
PROTOTYPE
Implemented visual design into layout while adjusting and adding certain aspects needed like the side menu in order to help users to easily navigate from page to page.
Users reported the side menu allowed for easier navigation and exploration of the site overall. The graphics used for each interface allowed increased recognition and efficiency over multiple uses.
LEARN
The Learn page allows users to understand specific topics easily. Pages of various diets, ingredients, food types, and many more will summarize main points including nutrition facts as well as other alternatives to the ingredient, diet, etc. As the learn aspect is meant to be brief and concise, it will lead to other reliable sources such as the FDA for more information.
Users reported how the Learn feature allowed quick understanding of topics that they usually would spend hours searching and browsing. Now that everything is in one place they did not have to go anywhere else but food4YOU.
USER TESTING
The sign in feature allows an account creation which would allow the simplicity and personalization that food4YOU accomplishes. Sign in page allows users to select their unique diets to allow for searching and shopping throughout the site without having to constantly check off or make sure of the ingredients - it’s saved in their accounts!
Users reported relief in their shopping experience as all their diet and preferences were saved through their accounts. Shopping times as a result decreased by at least 30%.
FINAL PROTOTYPE