➡️ Project Description
Food waste remains an ongoing issue and universities are no exception. To tackle this, we designed a mobile application specifically for Tampere University students to reduce food waste in campus cafeterias. This project was completed as part of my Master's degree coursework in Computing Sciences, with a major in Human-Technology Interaction and UX.
The app motivates students to finish their meals by offering meaningful rewards, like a free lunch after completing five meals. Beyond just a reward system, it raises awareness about mindful food consumption. By addressing both user needs and sustainability challenges, this project highlights our commitment to creating impactful solutions that make everyday actions more environmentally responsible and rewarding for students.
➡️ Value Proposition
⚪ Reward-based system
⚪ Live queue situation in each cafeteria
⚪ Easy access to the cafeteria's menu and ingredients
⚪ Ingredients Transparency
⚪ Eco-friendly Impact
➡️ Our Process
We applied the Design Thinking methodology to ensure that the app not only solves functional problems but also resonates emotionally with the users through Experience-Driven Design (EDD) elements.
We began with the Design Thinking process, starting with user research through student interviews, which helped us empathize with their challenges regarding food waste and dining habits. These insights shaped the app’s core functionality, including meal tracking, reward-based incentives, and real-time information. In the ideation phase, we brainstormed multiple solutions, refining our ideas based on user feedback.
Incorporating Experience-Driven Design, we focused on emotionally engaging features like a progress bar, helping students measure how close they are to earning a free meal. This visual and motivational element not only tracks progress but also evokes a sense of accomplishment and purpose, making the app experience memorable. Through this integration, the app balances practical problem-solving with user engagement, ensuring the journey is both functional and fulfilling.
➡️ Our Team
⚪ Shoaib Tahir Qureshi - Background in UX Design
⚪ Team Member 2 - Background in Psychology
⚪ Team Member 3 - Background in Software Development
➡️ My Contributions
I contributed to all the phases of the project. I conducted two user interviews, did a thematic analysis, designed initial wireframes together with the team. I led the final UI design.
➡️ User Study
We started with an understanding of the background of this project work and defined our user group to be 'university students'. All of the team members conducted separate user interviews so that everyone gets an opportunity to switch roles of being a moderator and an observer during the interview sessions. Our focus was to get qualitative data from the user study in order to kick-start the ideation process.
➡️ Interviews
⚪ A structured approach
⚪ 30-60 minutes of each interview
⚪ Few of the questions from the interview sessions are:
1. How often do you eat at the university cafeteria?
2. What do you think are the biggest reasons for food wastage at the university cafeteria?
3. In your opinion, what could be the ways to reduce food waste?
4. In your experience, what would inspire you to reduce food waste?
5. Have you used any service or any platform that helps you reduce food waste?
➡️ User Personas
➡️ UX Goals
⚪ Giving users a feeling of accomplishment
⚪ Creating habits along the way
⚪ Helping sustainability and getting a sense of saving the planet
➡️ Usability Goals
⚪ Easy to learn: The users can learn to use the system while using it for the first time
⚪ Efficient: The users don't need to read unnecessary or vague information to achieve the goals
➡️ User Tasks
1. Finding the meal menu and ingredients
2. Finding the live queue information
3. Logging a waste-free meal
4. Redeem a free meal coupon
5. Own history
6. Community score
➡️ Conceptual Design
➡️ User Scenarios
Scenario 1
Camilla is hungry after the morning lectures at university. She has another lab session coming up in 30 minutes. It is already lunch hour and most of the people are heading towards the restaurants or home to eat. She opens the university restaurant application to check the menu and finds out that restaurant A is offering Chinese food today. But from ingredients, she can find only two of the meals, that do not have the items she has an allergy to, or she does not eat.
Scenario 2
Camilla has been collecting points by logging waste-free meals. She opens the mobile application to check the status of her points. She does not like logging in. So, she checks her logged finished meals. Voila! She gathered enough points to unlock a free meal. She proceeds to redeem the free meal coupon. The system generates a free meal coupon with Camilla’s student ID.
➡️ Sitemap
This app structure outlines the primary flow or navigation of the save food application. It details key sections such as the home screen, cafeterias, educational content and lunch history.
➡️ Wireframes
➡️ Design System
For the "Save Food" app, I adopted a robust design system based on Material UI to ensure consistency, scalability, and efficiency throughout the design process.
Why Material Design?
The decision to use a Material UI design system allowed me to deliver a visually coherent and scalable product while optimizing time spent on designing and developing repetitive elements. It aligned with the app’s focus on providing a simple, efficient user interface, tailored to enhance the student experience.
Consistency Across the User Experience: A design system helps in maintaining a uniform visual language throughout the app. By defining key elements like typography, colors, buttons, and icons, I ensured that users encountered a consistent experience across different touchpoints, reinforcing the app’s identity.
Efficiency in Design & Development: By using predefined components from Material UI, I accelerated the design process and enabled seamless handoffs to developers. This also reduced ambiguity in how elements should behave, making it easier to focus on the UX rather than recreating styles for each feature.
Scalability for Future Updates: Since the app might evolve with additional features or updates, the design system allows easy scalability. It becomes straightforward to introduce new elements without compromising visual consistency. This future-proofs the design and ensures minimal disruption as the app grows.
Enhanced Collaboration: The design system served as a shared reference for developers and stakeholders, promoting clearer communication. It reduced feedback loops by providing structured, reusable components that developers could integrate directly into the codebase
➡️ Accessibility Considerations
Ensuring accessibility was a critical part of the "Save Food" app’s design process. To achieve this, we used the Able plugin in Figma to assess the prototype’s accessibility for users with varying visual abilities. The plugin allowed me to test color contrasts and other visual elements, ensuring that the app adheres to Web Content Accessibility Guidelines (WCAG). The tests confirmed that the chosen colors, text sizes, and interactive elements were accessible and user-friendly, passing checks for both color blindness and other visual impairments.
➡️ High Fidelity Designs
➡️ Flow 1
This flow is about signing up for the application and adding a finished meal.
➡️ Flow 2
In the second flow, you can sign in to the application, add your fifth meal and get a coupon of free meal.
➡️ User Feedback
We got valuable feedback from the users both in terms of the good aspects of this service and then what improvements can be made further on.
⚪ Good and simple idea
⚪ The service is solving the problem in order to minimize food waste and offering students free lunch coupons
⚪ Minimalist UI that is easy to use
⚪ The reward system is a great selling point
⚪ A practical and realistic approach
⚪ I was confused about adding meal to an ID in the first design iteration
➡️ Stakeholders Feedback
We got valuable feedback from the course and project instructors:
⚪ Great idea to add a community aspect to your service
⚪ Intuitive UI design
⚪ The design process was easy to understand
⚪ The design decisions were supported by user research
⚪ This achievement aspect is very nice these days in trending applications and platforms like Duolingo
⚪ How about students tricking the system? Have you thought of it?
➡️ Next Proposed Plans
⚪ Conduct further research and evaluations with more students
⚪ Enhance community features, achievements and sense of accomplishment with additional features
⚪ Collaborate with software development professionals from the department
⚪ Evaluate different scenarios where a user can trick the system. One example is adding a same picture all the time, but only allow to user to take a picture in real-time means they can upload a picture from the gallery.
⚪ Implement AI algorithm to check the authenticity, location and picture confirmation
⚪ Design and develop an admin side application or a system for tracking and management
⚪ Accessibility features text alternatives and descriptions, touch friendly targets, voice and gesture navigation needs to considered when building the first version available for testing in real time.
⚪ Enhance community features, achievements and sense of accomplishment with additional features
⚪ Collaborate with software development professionals from the department
⚪ Evaluate different scenarios where a user can trick the system. One example is adding a same picture all the time, but only allow to user to take a picture in real-time means they can upload a picture from the gallery.
⚪ Implement AI algorithm to check the authenticity, location and picture confirmation
⚪ Design and develop an admin side application or a system for tracking and management
⚪ Accessibility features text alternatives and descriptions, touch friendly targets, voice and gesture navigation needs to considered when building the first version available for testing in real time.
➡️ Learnings & Reflections
⚪ Learned the importance of involving end users in the whole design process
⚪ Fun to do conceptual design and initial wireframes as a lot of brainstorming and innovation is required
⚪ Experienced a collaborative way of working which is a core of a successful and professional team