My Framer Site

Play

Home

Projects

About

Pay It Forward

An app for flexible volunteering that solves the problems of food security and food surplus by connecting volunteers to pick-up and drop-off locations around the city.

Role: UX Designer and Researcher
Duration: 7 months

Figma File and Prototype Link

Impact:

Developing a scalable solution that targets food insecurity hot spots outside of the formal shelter network
Providing a proof of concept that solves multiple problems at once for various groups: existing operational volunteers, people who want to volunteer but don't have a lot of time and food insecure individuals that don't have access to shelter network

Mobile Design

Information Architecture

User Testing

Discovery Research

MVP design

Pay It Forward - 2025 App Redesign

Pay It Forward was one of my first designs (2021).

My visual skills have since grown immensely.

The new 2025 redesign more accurately reflects my current set of skills.

Pay It Forward was one of my first designs (2021).

My visual skills have since grown immensely.

The new 2025 redesign more accurately reflects my current set of skills.

Some decisions that I made in 2025 that I didn't make in 2021:

Not including the brand's logo and name at the top of every screen — to create a more cleaner look and make space for other navigations items
More compact design of the "Report" screen (far left) that is less visually overwhelming. Purple is still present in the rest of the UI and the main colour of the app, and green being used to emphasize CTAs
Including a bottom navigation bar — allows users to easily find their way around in the app
A space for marketing assets on the homepage (far right) that also creates a visual break between apps main functions (report/respond) and information content (useful resources)

Please note: The wireframes above belong to 2025 redesign, whereas everything below this text belongs to an older 2021 case study.

While my visual skills have grown immensely, I have decided to keep this case study because it still showcases the following:

my research skills
conceptual design thinking
familiarity with different research methodologies

Some decisions that I made in 2025 that I didn't make in 2021:

Not including the brand's logo and name at the top of every screen — to create a more cleaner look and make space for other navigations items
More compact design of the "Report" screen (far left) that is less visually overwhelming. Purple is still present in the rest of the UI and the main colour of the app, and green being used to emphasize CTAs
Including a bottom navigation bar — allows users to easily find their way around in the app
A space for marketing assets on the homepage (far right) that also creates a visual break between apps main functions (report/respond) and information content (useful resources)

my research skills
conceptual design thinking
familiarity with different research methodologies

Problem

While there are a number of NGOs tackling the problem of food insecurity, the majority of them are focused on supplying food to the shelters.

However, shelters have limited capacity, leaving a large population of people living on the streets and relying on the kindness of by-passers.

Pay It Forward aims to close that gap and provide a solution to the problem of food insecurity for homeless individuals.

Challenges:

Create an easy to use volunteering app
Provide a low commitment way of doing good
Respond to the growing desire for altruism amongst millennials
Connect the places of surplus with people in need

Research Questions:

What are the main barriers to volunteering amongst millennials?

How can volunteering become an easy and low commitment task that anyone can complete on a go?

What are the main drivers to volunteering amongst millennials?

Research Findings

This section includes findings from both primary and secondary research sources, which helped to identify the existing gap in the market and user pain points.

Project Vision

Think Uber Eats, but the food is being delivered by volunteers to homeless individuals within the downtown area.

Pay It Forward simplifies the logistical process of volunteering, giving users ability to choose their pick ups and drop offs per their convenience.

Volunteers and Donation Partners all have access to the same app with 2 main options: to report a need or to respond to one.

Based on the monthly analytics data, the surge feature highlights areas with the most need.

Integrated map feature enables to calculate a journey from/to pick up and drop off locations.

It also provides live waiting time and updates to pick up locations.

Integrated map feature enables to calculate a journey from/to pick up and drop off locations.

It also provides live waiting time and updates to pick up locations.

Information Architecture

Sketches & Low-fi Wireframes

This section shows the early design conception starting with paper sketches to low-fi wireframes.

Design and Colour Exploration

Design and
Colour Exploration

High Fidelity Wireframes

Version 1 (alternative) >

< Version 2 (Final choice)

Version 1 (alternative) >

< Version 2 (Final choice)

Version 1
(alternative) >

< Version 2
(Final choice)

Final Design Choice

With the goal to make volunteering not just simple and accessible but also fun, I have been experimenting with bright colours.

By analyzing NGO websites and apps, I found that the most used colours are red and blue, however I wanted to differentiate and went for the colours of green and purple. Purple seemed to be a little too bright as the main theme colour of the app as it emphasizes entertainment over the mission of the app.

The chosen shade of green is bright enough to entice enthusiasm, yet is also a peaceful colour that is too associated with giving. Green is also a colour of the compost bins - associated with food recycling. It is also the brand colour of Oxfam. In yoga and eastern cultures, green represents the heart chakra and thereby the spirit of giving.

With the goal to make volunteering not just simple and accessible but also fun, I have been experimenting with bright colours.

Other differences between the two versions include the design of the 'success' page, where the tick is replaced with a heart and a tick.

Although the simple tick is more recognizable, it also might create an impression that volunteering is just something you check off your to do list. In order to highlight the human aspect, I have added a heart, which fits well with the brand's logo. It implies sharing of love but also humanizes the people in need of help.

The exit button at the right bottom corner has also been added, so users can easily navigate away from this screen without having to perform any extra steps.

Other differences between the two versions include the design of the 'success' page, where the tick is replaced with a heart and a tick.

The exit button at the right bottom corner has also been added, so users can easily navigate away from this screen without having to perform any extra steps.

Other differences between the two versions include the design of the 'success' page, where the tick is replaced with a heart and a tick.

The exit button at the right bottom corner has also been added, so users can easily navigate away from this screen without having to perform any extra steps.