According to the Food and Agriculture Organization of the United Nations, the total financial, environmental, and social cost of food waste and loss stands at 2.6 trillion dollars annually. This is associated with 3.3 billion tonnes of CO2 annually and enough food to feed the 690 million undernourished people in the world at least twice. In the UK, as in most developed countries, waste concentrates at the retail and consumer levels. Moreover, 70% of this waste is generated by households. Given these two insights and our proximity to UK end-consumers (i.e. students), our primary objective with this project is to design and build a single-page application to raise awareness about food waste and motivate UK students to waste less food. We achieve this by framing the issue within a longer-term and more personally-relevant perspective. Namely, after inputting how much food they have wasted in a week, users are presented with how much money they could save in a year if they wasted less. To achieve our objective, our design process was informed by a series of user research initiatives such as surveys, interviews, and web analytics. Finally, we built the application using the MEAN stack. This consists of a noSQL type database which facilitates design and integration, the Angular framework, which allows developers to build the site in components that get rendered dynamically by the browser, and Express and Node which are used used to host the web server and API, allowing communication between the users’ browser and the backend database.
Having identified a worthwhile problem to focus on (i.e. the reduction of food waste among UK students) we defined the high-level objectives we followed throughout our project:
- Design and build a single-page application to raise awareness about food waste and motivate UK students to waste less food
- Design and build a differentiated solution that is convenient to use and accurate when providing a forecast of yearly wasted money due to food waste
- Design and build a solution that incorporates playful elements
- Design and build a user-centered solution
We created a set of sub-goals that indicate the extent to which we have progressed towards our high-level objectives.They are ordered from short-term to long-term and from less ambitious to more ambitious ones. Some of the latter goals within each objective are meant to surpass the duration of the current project and serve to outline the general direction the project would take across these different objectives. Some of these points are elaborated in the “Future Work” section.
The points in green are the ones tackled by our current project and the ones in red are longer-term goals.
- Raising awareness about food waste and motivating a change in behaviour
+ Our user persona expresses interest in the application via user interviews. + Users engage with our application. - 20% of new users complete the application’s user flow from start (i.e. landing page) to finish (i.e. statistics page) - After completing the user flow, 20% of users engage by sharing the application with their friends. - Conduct user interviews with the same set of people before and after using our application to gauge if it has had any impact on their food consumption habits. Is the difference in waste statistically significant?
- Designing and building a differentiated solution (convenience and accuracy)
+ Testing our designs with potential users frequently to optimize for usability. + Asking people to fill in how much they think they have wasted only during the current week (not the current month like other alternatves) + Not asking users to fill in hard to get information like specific food weights. + Considering the quantity of food items and their cost when calculating the forecasted yearly value - Utilize an API to extract current costs of food items from a supermarket - Implement greater diversity of items and various quantity measurements per food item - An image recognition algorithm that can recognize what kind of food and how much you’re wasting from a picture you take before throwing it away
- Designing and building a playful application
+ Incorporate elements of play and/or interactivity with the purpose of making the application more engaging. - Designing and building a user-centered application
+ Defining who our target persona will be and designing the application with them in mind. + Testing our designs with potential users frequently to optimize for usability. - Conduct qualitative and quantitative user research with users outside of the team’s network to reduce bias - Conduct thorough quantitative user research via web analytics to spot usability issues and achieve virality
Note: .env file was left as default (from workshops)
Requried programs: docker
- Clone or fork this repository
- Navigate to SE7 project folder
- Add a .env file
- Run
docker compose up --build - Go to http://localhost:3000 to view the site
Alternatively view online at: http://13.59.46.105/
| The Team | Role | |
|---|---|---|
 |
Alex Digpal-Race : [email protected] | Scrum Master, Full stack |
 |
Zain Kassam : [email protected] | Front-end developer, Responsiveness |
 |
Anita Nguyen : [email protected] | Front-end developer, UX Designer |
 |
Jessica Sung : [email protected] | Front-end developer, UX Designer |
 |
Gabriel Chu Valdez : [email protected] | Project manager, product owner |
- Industry Review - market analysis
- Academic Review - problem definition
2. UX Design
- UX Approach
- Timeline
- Process - user personas, wireframe evolution, prototypes
- Working Methods
- Individual Contributions
- Overview of Sprints - timeline, highlights
- Stack Architecture
- Back End - MongoDB
- Middle Tier - Express, Node, RESTful API
- Front End - Angular
- Deployment - Docker
- Reflective Discussion on the Success of the Project
- Reflection on Working Practices of the Team
- Reflection on The Impact of COVID-19
- Discussion of Future Works
- Social and Ethical Implications