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
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]](https://static.wixstatic.com/media/ccd845_372ebbfeb3354ab4bc33f8dac4a77543~mv2.png/v1/fill/w_980,h_680,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/ccd845_372ebbfeb3354ab4bc33f8dac4a77543~mv2.png)
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
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](https://static.wixstatic.com/media/ccd845_a1a3b2b92df34d0f8c30bebb37793869~mv2.png/v1/fill/w_166,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Homepage_%5BFoodie%5D.png)
Homepage
![More.Filters.[Foodie].png](https://static.wixstatic.com/media/ccd845_1da9dcf34a7a469aa5a99307129df02b~mv2.png/v1/fill/w_155,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/More_Filters_%5BFoodie%5D.png)
More Filters
![Selection.Filters.[Foodie].png](https://static.wixstatic.com/media/ccd845_451c8b149cba453babf5b661b516fed0~mv2.png/v1/fill/w_156,h_262,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5BFoodie%5D.png)
Selection from Filters
![View.Filtered.Results.[Foodie].png](https://static.wixstatic.com/media/ccd845_f38f366c77214893bdb9102b001ea014~mv2.png/v1/fill/w_149,h_243,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/View_Filtered_Results_%5BFoodie%5D.png)
View
Filtered Results
![View.Recipe.[Foodie].png](https://static.wixstatic.com/media/ccd845_2f80e2bda54a4fdea99458a3661db669~mv2.png/v1/fill/w_156,h_269,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/View_Recipe_%5BFoodie%5D.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](https://static.wixstatic.com/media/ccd845_92351fd369734425b87340c23955325c~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Homepage_%5BMid_Fidelity%5D.png)
Homepage
![Filters.[b].[Mid.Fidelity].png](https://static.wixstatic.com/media/ccd845_5e48db631c9f42ddb5847da31dca7aba~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Bc%5D_%5BMid_Fidelity%5D.png)
Filter.[b]
![More.Screen.[Mid.Fidelity].png](https://static.wixstatic.com/media/ccd845_4df605233aec4021b79969d90e159bc4~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/More_Screen_%5BMid_Fidelity%5D.png)
More Filter
![Viewed.Filter.Results.[a].[Mid.Fidelity].png](https://static.wixstatic.com/media/ccd845_96b7c0ba770e4a3abb233e5966324f24~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Ba%5D_%5BMid_Fidelity%5D.png)
View Filtered Results.[a]
![Selection.Filters.[a].[Mid.Fidelity]-1.png](https://static.wixstatic.com/media/ccd845_b028126182a04b599f29910ab66aee9a~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Ba%5D_%5BMid_Fidelity%5D-1.png)
Selection from Filters
![Viewed.Filter.Results.[b].[Mid.Fidelity].png](https://static.wixstatic.com/media/ccd845_bd746265f8c948bfb157a89c353ad7d6~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Bb%5D_%5BMid_Fidelity%5D.png)
View Filtered Results.[b]
![Filter.[b].[Mid.Fidelity]-1.png](https://static.wixstatic.com/media/ccd845_d4dc180d73e74ec4b1c13b157d68cab5~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Bb%5D_%5BMid_Fidelity%5D-1.png)
Filter.[a]
![View.Recipe.[Mid.Fidelity].png](https://static.wixstatic.com/media/ccd845_3f77a84587c9423eb2e8f5b4456bd263~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Listing_Description_%5BMid_Fidelity%5D.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
Feel free to preview the style guide
Final Prototype
![Filters.[b].[High.Fidelity].png](https://static.wixstatic.com/media/ccd845_9de3bccb270b4573858d79e859e30ccd~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Bc%5D_%5BMid_Fidelity%5D.png)
Filter.[b]
![View Filtered Results.[a].[High.Fidelity].png](https://static.wixstatic.com/media/ccd845_af8b57a804444ffe913ef8fdf329210e~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Ba%5D_%5BMid_Fidelity%5D.png)
View Filtered Results.[a]
![View Filtered Results.[b].[High.Fidelity].png](https://static.wixstatic.com/media/ccd845_f3b1f1c067bb461d82f38ede8dee0c73~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Bb%5D_%5BMid_Fidelity%5D.png)
View Filtered Results.[b]
![View.Recipe.[High.Fidelity].png](https://static.wixstatic.com/media/ccd845_55e1a89000474132a5d5dcef698c524e~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Listing_Description_%5BMid_Fidelity%5D.png)
View
Recipe
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](https://static.wixstatic.com/media/ccd845_5731819aa6004025b763b43b381c16c2~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Homepage_%5BMid_Fidelity%5D.png)
Homepage
![More.Filter.[High.Fidelity].png](https://static.wixstatic.com/media/ccd845_3edaee4afa2e4e0ca3095fa542a4cc7e~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/More_Screen_%5BMid_Fidelity%5D.png)
More Filter
![Selection.from.Filters.[High.Fidelity].png](https://static.wixstatic.com/media/ccd845_7da6bff4449742d2b979afd1b89eea6c~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Ba%5D_%5BMid_Fidelity%5D-1.png)
Selection from Filters
![Filters.[a].[High.Fidelity].png](https://static.wixstatic.com/media/ccd845_52c3ec0d9be54593a41f64d6a573932c~mv2.png/v1/crop/x_0,y_9,w_415,h_833/fill/w_123,h_247,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Selection_Filters_%5Bb%5D_%5BMid_Fidelity%5D-1.png)
Filter.[a]
bottom of page