top of page

Foodie

UX Case Study

Overview

The scope of the project was to identify and distinguish a way to help people access healthy recipes and enjoy different cuisines from around the world while utilizing little energy

Food inflation increased by 0.9% in Miami. In addition, the energy prices surged in 12 months to 4.2% hence increasing the services for gas at 8.4% and electricity prices at 3.8%. These costs are placing pressure on the people's finances and causing individuals to make deplorable eating habits within the average household
​
The best solution to resolve this problem will be to develop an app that allows people to access cost-efficient, yet healthy recipes, while utilizing small amounts of energy

My Role:  UX/UI Designer                                            
Tools:  
Pencil, paper, Figma        

My Design Process

Design.Process

User Persona

I generated a user persona based on the research that was conducted when determining the cost of living problem that existed in Miami, FL. The user persona identifies and distinguishes the needs, wants, motivations, and pain points of potential users hence allowing me to empathize with their frustrations

Alicia.[Persona]

User Flows

Based on the information found in Alicia's user persona, I was able to map out a user flow to comprehend and visualize the process she and potential users will need to comply with in order to accomplish their goals

User.Flow

Wireframing Designs

Low-Fidelity

During this stage, I was able to create some low-fidelity wireframes to structure how the app functions and address the needs and wants of the users

Sketches

Task #1: As a user, I want to filter recipes based on energy usage

Homepage.[Foodie].png

Homepage

More.Filters.[Foodie].png

More Filters

Selection.Filters.[Foodie].png

Selection from Filters

View.Filtered.Results.[Foodie].png

View
Filtered Results

View.Recipe.[Foodie].png

View
Recipe

Feel free to preview the entire low-fidelity prototype

Mid-Fidelity

Next., I generated greyscale mid-fidelity wireframes while implementing Figma. I included some UI elements to convey the functionality of the app

Task #1: As a user, I want to filter recipes based on energy usage

Homepage.[Mid.Fidelity].png

Homepage

Filters.[b].[Mid.Fidelity].png

Filter.[b]

More.Screen.[Mid.Fidelity].png

More Filter

Viewed.Filter.Results.[a].[Mid.Fidelity].png

View Filtered Results.[a]

Selection.Filters.[a].[Mid.Fidelity]-1.png

Selection from Filters

Viewed.Filter.Results.[b].[Mid.Fidelity].png

View Filtered Results.[b]

Filter.[b].[Mid.Fidelity]-1.png

Filter.[a]

View.Recipe.[Mid.Fidelity].png

View 
Recipe

Feel free to preview the entire mid-fidelity prototype

Style Guide

After completing the mid-fidelity wireframes, a mood board was created in order to set the tone and identify the visual direction of the Foodie app. After the completion of the mood board, I proceeded to the next stage which was to generate a style guide that contained a color palette, button, cards, and additional UI components that was implemented in the final high-fidelity wireframes

02_ Typography.png
03_ Iconography.png
04_ Navigation.png
05_ UI Elements.png

Feel free to preview the style guide

Final Prototype

Filters.[b].[High.Fidelity].png

Filter.[b]

View Filtered Results.[a].[High.Fidelity].png

View Filtered Results.[a]

View Filtered Results.[b].[High.Fidelity].png

View Filtered Results.[b]

View.Recipe.[High.Fidelity].png

View 
Recipe

Feel free to preview the prototype

Finally, I was able to incorporate high-fidelity screens that complied with the tone set from the mood board and style guide

Demo.Video

Task #1: As a user, I want to filter recipes based on energy usage

References

Casal, T., Garcia, N., & NBC6. (2024, March 12). Miami keeps leading the nation as the area with highest inflation rate. NBC 6 South Florida. https://www.nbcmiami.com/news/local/miami-inflation-leads-nation/3256986/ 

U.S. Bureau of Labor Statistics. (2024, November 13). Consumer price index, Miami-fort lauderdale-west Palm Beach- October 2024. U.S. Bureau of Labor Statistics.
https://www.bls.gov/regions/southeast/news-release/ConsumerPriceIndex_Miami.htm

Homepage.[High.Fidelity].png

Homepage

More.Filter.[High.Fidelity].png

More Filter

Selection.from.Filters.[High.Fidelity].png

Selection from Filters

Filters.[a].[High.Fidelity].png

Filter.[a]

bottom of page