MataMeal

Case Study ·

UX/UI ·

Branding ·

Prototyping ·

Mobile

Role

Product Designer (UX/UI)

Timeline

Aug 2025 - Sep 2025

Tools

Figma, Google Forms

Overview

Many college students struggle to balance busy schedules, limited budgets, and access to nutritious meals. How might we make it easier for students to discover and choose dining options around campus?

MataMeal is a mobile app designed to make food access easier and more convenient for CSUN students. Users can quickly discover dining options both on and near campus, view important details like price range, walkability, parking, and access student-exclusive deals and discounts. The app also highlights CSUN food resources such as the food pantry, weekly farmers market, and meal programs to support students who may need additional assistance.

Problem Statement

Ethan, a student athlete, needs a way to locate nutritious food options quickly because his practice schedule leaves little time to search for meals.

Hypothesis

We believe that by creating an app that allows students to pre-order meals, discover nearby eateries, and connect with food resources, it will lessen the stress maintaining a healthy eating routine while balancing busy schedules. We will know this to be true when we see students regularly use the app to plan meals and locate food options that meet their needs.

Research

To better understand student experiences with food access on and around campus, I distributed a 10-question survey, receiving 26 total responses, and held one-on-one interviews with three CSUN students. This research helped uncover common habits, attittudes, and painpoints related to student eating routines, spending patterns, and awareness of food resources.

Interview Participants

To ensure a diverse range of perspectives, partcipants were selected to reflect varying levels of awareness of food options around CSUN.

Agra Arachchi

spends 8+ hours on campus with long breaks to get food

Ryan Daeenejad

balances student‑teaching and classes, only short windows to eat

Keyla Ramirez

first‑time transfer student with limited knowledge of campus options

Interview Highlights

Every participant said maintaining a healthy diet was difficult
When balancing different responsibilities, it's hard to stay mindful of what you're eating
Participants had mixed opinions on food variety, some noting on-campus options being more diverse, others stating the opposite
Perception seems to change depending how frequent or familiar a student is being on campus
All participants stated that price and convenience were the leading factors that dictate their dining decisions

Survey Highlights

54% said maintaining a healthy diet is difficult
80% reported a typical meal budget of $15 or less
62% were dissatisfied with the pricing of food ON campus
47% were dissatisfied with the pricing of food OFF campus
58% often choose convenience over eating healthy.
All respondents indicated Price as the leading factor that dictates their dining decisions, followed by Distance from campus.

Data Synthesis

User Personas

Based on these insights gathered from my research, I created user personas that reflect the varying lifestyles, priorities, and struggles students face when trying to eat well at CSUN. These personas allowed me to empathize with my user base and better visualize their day-to-day decision-making around food.

Empathy Map

Continuing to build from these user personas, I developed an empathy map that visualizes what a student may think, feel, say, and do when it comes to food at CSUN. By visualizing their mindset and behaviors, I was able to reveal deeper frustrations, motivations, and needs that informed the direction of the app's design.

Competitive Analysis

To further my research and see if this app was necessary or would help in any way, I did a competitive analysis. By doing this, we are able to see which apps and resources have similar goals.

Ideate

User Flow

After gathering research, analyzing competitors, and defining the target audience, I moved forward with identifying the app's core features that would provide the most value to students. To visualize how users would interact with these features within the app, I designed a user flow.

LoFi to MidFi Wireframes

With the user flow established, the next step was to translate the journey into tangible screens. I created low-fidelity wireframes to experiement with layout, navigation, and feature organization. In mid-fidelity, I experimented with color, iconography, and copywriting. Here is a preview.

Interface

UI Style Guide

After completing the midfi wireframes, I began to finalize color and UI assets by designing a UI Style Guide. Because many users expressed difficulty maintaining healthy eating habits, I chose a predominantly green color palette to evoke feelings of health, wellness, and balance. Green is also associated with calmness and reassurance—qualities that can help reduce the stress of busy students. Since MataMeal also aims to provide reliable guidance on food choices and financial resources, this color choice reinforces a sense of trust, approachability, and support throughout the user experience.

HiFi Wireframes

With the app's visual identity finalized, I moved on to refine my wireframes to high fidelity. Here is a preview.

Testing

With the hifi wireframes complete, I transformed the designs into an interactive prototype. This prototype was designed to simulate a first-time user experience—from signing in with CSUN credentials, to onboarding screens that introduce the app's features and value. I also prototyped three key functions—pre-ordering meals, locating nearby dining options, and purchasing meal plans directly through the app. With the prototype in place, I was ready to begin user testing to validate the design and gather feedback.

Task Execution

During the testing phase, users were asked to complete three tasks without any guidance: 1) Order a rice bowl for pickup at the Halal Shack. 2) Get directions to Peak Cafe. and 3) Purchase a "Dining Membership 500" meal plan. After five rounds of testing, the results were the following:

5/5

Users were able to order a rice bowl for pickup at the Halal Shack

5/5

Users were able to find directions to Peak Cafe

5/5

Users were able to purchase a meal plan

Feedback

After successful rounds of user testing, I received both positive and constructive feedback.

Positive Quotes

"It has the look and feel of a reel app."
"It was easy to navigate between different tasks."
"I really like how clean and cohesive the color scheme is."
"I appreciate the up-to-date images."

Suggestions & Observations

The Resources page was the weakest visually, with one user suggesting it could be better consolidated as a hamburger icon in the homepage.
Although all users were able to purchase a meal plan, it wasn't immediately obvious where it was located.
The Order button slightly shifts on the nav in different screens.

Takeaways

Reflection

Heading into this project, I was fairly new to using Figma. There was a lot of exploration and mistakes made along the way, but to see a project blossom from initial concepts to a fully-functional prototype was an enjoyable process. I learned how to create research plans that generate both qualitative and quantitative data. I also discovered the importance of competitive analysis and humanizing research insights through data synthesis. For my first time prototyping, I had a fun experience and enjoyed creating a product that addresses an area of need in my CSUN community.

Next Steps

If I were to continue building MataMeal, I would:

Fix any inconsistencies with the nav
Find a better way to organize the Resources page
Prototype all features
Integrate functional dropdowns
Implement a working map