Community foodsure

In order to give back to the community, I designed a user experience to help communities ensure all residents have reliable access to food and water. It is based in the northern suburbs of Cape Town.

Goal

I wanted to create a platform where people can easily donate money, food or groceries to those in need in Kuilsriver and surrounding areas. This platform had to be easy and convenient to use, with enough information to raise awareness.

Problem

Kuilsriver is surrounded by poorer communities who have people who struggle to support their families and who go hungry. My vision was to create a platform where people who are able to make donations in the form of money, can easily see where they can make a difference.

Role & Responsibilities

Lead UX designer, UX researcher, Visual designer

User research, wireframing, prototyping, iteration, creating mockups, creating a design system, user testing, competitive auditing, conducting usability studies

Duration

August 2023 – September 2023

Design System

Empathize

User Research - Summary

I conducted some user interviews to find out what exactly users would need from an app or website in order for them to make use of it. I assumed that users would benefit from something simple and easy to use with a map feature to indicate where their contributions will be making a difference. Half of the participants mentioned that they would use such a platform in addition to their current donation method.

Define

Persona 1: Lucy

Problem statement:

Lucy is a secretary, wife, and mother of three who needs a convenient way to know where to take and how to distribute the meals she cooks at home for the less fortunate, because she wants to make time in her busy schedule to teach her daughters how fulfilling it is to help others.

Persona 2: Mark

Problem statement:

Mark is a dentist who needs a way to make recurring donations to an organisation who ensures food in the community, because he has little time to make a donation and he is passionate about helping others

Competitive audit

This is a competitive audit that compares 4 organizations that serve a purpose as close as possible to the one of my project. I compared them based on strengths, weaknesses, opportunities, challenges, etc, to see where I can learn from them and perhaps improve on their mistakes.

Ideate

Crazy 8's

I had a few ideas, as far as the website design went, such as an automatic scroll through all the website’s features, an organisation mascot to guide users through the flow, and a cool animation when the user clicks on the navigation bar, but I ended up deciding that the design needed to be easy to follow instead of being something flashy.

Digital wireframes

I tried to keep this design as simple as possible while incorporating all the important elements from the app and taking into consideration that the desktop screen would need more content to fill.

My design changed a lot from my paper, then digital wireframes and finally to my mockups.

Prototype

Low Fidelity Prototype

View desktop prototype: https://www.figma.com/file/FEdh03Q8wmlh123pkvs7uV/Social-good-project?type=design&node-id=9%3A191&mode=design&t=5oCUaG7RJrlBgcEK-1

View mobile prototype: https://www.figma.com/file/FEdh03Q8wmlh123pkvs7uV/Social-good-project?type=design&node-id=187%3A1915&mode=design&t=5oCUaG7RJrlBgcEK-1

The basic user flow is scroll through the map/ choose a community to donate to/ follow the donation flow/ back to the home page.

Mockups

I decided to use purple as the main colour and create contrasting colours in the logo. I also decided that a scrolling map would be the perfect way to make the app interesting and intuitive, as users can scroll across it to see which community they would like to support.

Site map & responsive design

Test

Usability Study

Study Type:

Unmoderated + moderated usability study

Participants:

5 participants

Location:

South Africa, remote + Kuilsriver

Duration:

5-15 minutes/ participant

Usability studies findings

Problematic scroll function

Most users were frustrated at the problematic scroll in the profile, hence the scroll animation needs to be fixed.

Missing beneficiary

Most participants were curious about where a new beneficiary would be added. This means that more information needs to be added and that it needs to be made clearer where to add a beneficiary.

Missing bank field

One participant noticed that there isn't a space to indicate which bank users are making use of. This means that a field more this information should be added.

High Fidelity Prototype

View mobile app prototype: https://www.figma.com/file/FEdh03Q8wmlh123pkvs7uV/Social-good-project?type=design&node-id=138%3A1274&mode=design&t=5oCUaG7RJrlBgcEK-1

View website prototype: https://www.figma.com/file/FEdh03Q8wmlh123pkvs7uV/Social-good-project?type=design&node-id=346%3A9431&mode=design&t=5oCUaG7RJrlBgcEK-1

I added 3 different ways to choose where to donate to: via the map, search function, and scrollable list of communities. I also created two different sections for donating food and money, and after the user journey is complete, there is a thank you screen that redirects the user to the home page.

Accessibility Considerations

1. Contrast and Color Choices

To help users with visual impairments, such as low vision or color blindness, to read content easily.

2. Consistent Navigation

I kept the navigation menus and controls consistent throughout the website or application to aid users with cognitive disabilities.

3. Responsive design

The design is responsive and works well on different screen sizes, which benefits users who rely on mobile devices.

Going Forward

What I learned:

How important user research and testing is for providing users with a product that would actually be useful to them.
The importance of white space in designs.
The role typography plays in a user friendly design.

Impact:

“While this app won’t replace it, I would definitely use it in addition to my current means of donating, since it is easier to use than other ways of giving back to the community.” - Participant

Next steps:

I'd like to make iterative improvements to the design to address any issues or concerns that users nay have to enhance the user experience.
Monitor how users interact with the product. This data can inform further improvements and updates to the design.
I'd like to keep monitoring its performance and user satisfaction and gather insights and data inform future design iterations.

Page updated

Google Sites

Report abuse