Meal Deals 🥗

Project Outcome

• Created a centralized travel planning experience.
• Reduced friction between booking flights, hotels, and transportation.
• Designed responsive website and mobile concepts.
• Validated design decisions through competitor analysis.

Design Process

1. Empathize: Understand what the users needs and barriers they face. In this case conduct user interviews and affinity diagraming.
2. Define: Define the goal of the app based off analyzing research. Draft problem statement.
3. Ideate: Create a comparative analysis to understand competitors products. Start visual design and low-fidelity wireframes.
4. Prototype: Continue going back and forth between prototyping and usability testing. Finalize high-fidelity wireframes with design system.
5. Test: Conduct rounds of usability testing and prototyping.

User Interview Questions

As a team we created a list of interview questions to help guide our design decisions.

1. What is something you have done in the past week to take care of yourself?
2. What is something you wished you could have done to take care of yourself?
3. What is something related to your health & wellness that has been going well for you? Is there anything that could make that better?
4. How do you think college life impacts your mental health?
5. How do you manage stress in your life?
6. In a perfect world, what would you change about health as a college student?
7. How difficult do you find it to eat healthy as a college student? What is the biggest barrier to eating healthy?

Interview Results

Emily and I interviewed two people and found that the source of most stress is systemic and quite complex.

In the graphic below are our responses. The biggest barriers to living a healthy lifestyle: time, money, and motivation.

Affinity Diagram interview results.

Data Visualization

For you, what is the biggest barrier to eating healthy?

• Lack of time (cooking & meal prep)
• Money
• Lack of cooking skills
• Personal consistency and motivation

Data visualization for interview results.

Problem Statement

Every day, college students struggle to eat healthy during their busy and stressful lives. They lack the time, money, and skills to buy and create healthy meals. Limited access to healthy foods can severly impact mental and physical health.

Storyboard

To show where and how our product might be used we created a storyboard using Canva. This is the series of events surrounding the need for our product.

Storyboard for when Meal Deals is applicable.

Mood Board

When selecting the overall aesthetic for our app, we wanted it to be bright and fun. We hoped to evoke connotations with fresh fruits and vegatables along with a general grocery store atmosphere of vibrant price tags. We also aimed to modernize the classic "retro" grocery store style to bring it up to date with our target audience of college students. In the end, we dialed down the bright colors slightly so that it would be less overwhelming to the users eyes.

Mood Board for Meal Deals design

Lo-Fi Wireframes

I created these sketches with a user friendly UI. You are greeted with your name and guided through setting up the app. Once the user has their profile set up they can start buying discounted groceries and browsing recipes. It is a great way for college students to access affordable food and fulfilling recipes while also reducing food waste at grocery stores!

First Lo-Fi from the Meal Deals app.

Med-fi Figma Wireframes

The medium-fidelity wireframes are based off of the sketches, problem statement, data collected about our audience. We wanted to show the user flow as a student goes through the process of setting up their profile and making their first purchase through the app.

After creating the wireframes, there were some parts that we had to revise when making the high-fidelity wireframes.

We need to clean up the onboarding and make a way for the user to select the options that they are presented with.

We also want to fix the checkout. It is unrealistic for the user to have their card already saved in the app. They went through the onboarding and never added a card so there should not be one saved in the app already.

Med-fi Wireframe #1

Med-fi Wireframe #2

Med-fi Wireframe #3

Med-fi Wireframe #4

Med-fi Wireframe #5

Usability Testing

Our biggest findings in the Usability Tests confirmed some of the changes that we knew we needed to make and gave us some ideas on how to make those changes.

From these findings we edited the onboarding process so there is less confusion and more options for users.

We also completely re-did the checkout so there is not a card already saved. In our final prototype the user will checkout using Apple Pay.

There were also little problems with the UI that we were unaware of before the user testing such as not being able to click on the apple to add it your cart. You could only click "add" this confused users.

Usability Testing

Hi-Fi Wireframes

The high fidelity wireframes show how the finished product of the app will look. One of our design decisions was to use bright colors but we ended up going with a more toned down palette. We wanted the app to be colorful because it is a healthy food app.

Another design decision that we made was including food illisutrations throughout the app. We did this because we thought it would bring the design together more.

We took in all the feedback we recieved from the Usability Testing and applied it to our final wireframes. Overall we are very satisfied with how the app came together. It is a very realistic idea and it would be cool to make it reality one day.

Hi-Fi Wireframe #1

Hi-Fi Wireframe #2

Hi-Fi Wireframe #3

Hi-Fi Wireframe #4

Hi-Fi Wireframe #5

Hi-Fi Wireframe #6

Next Steps

Going forward with Meal Deals, it would be nice to do another round of Usability testing to see if the changes made had any impact on the problems we were facing.

If we had more time we would also like to continue prototyping with Figma. I learned a lot about using components and transitions. I would have liked to have more time to make the app as realistic as possible.

There were many sketches that we didn't design out such as the profile and some of the other recipes. We would have to spend a lot more time researching and curating applicable recipes that are easy, time efficient, and low budget. But it would be interesting to dive deeper into the app!

Overall, I am proud of the work that we did with Meal Deals! Within the timeframe, we created a prototype for a really cool app that could really make a difference in the lives of college students.