Product Designer
Frame 3 with shadow.png

Resilience: a web app for mutual aid

Product Design for Nonprofit Project Management

 
 

Resilience Mutual Aid App

Resilience is a web app that helps nonprofits manage mutual aid efforts in their communities.

User Goals:

Effectively manage mutual aid projects

My Role:

UX designer for the organizer dashboard

The Team:

Remote group of designers, developers, product managers, and QA testers, all working pro bono.

Business Goals:

Encourage nonprofits to adopt our product

Project Length:

2 months

Inspiration for Joining:

The desire to tangibly help with the COVID-19 crisis using my skills.


Research identified the frustrations that nonprofit organizers face when managing a large volume of projects.

In order to determine the frustrations that nonprofit organizers were facing during the pandemic, members of our team spoke with multiple organizers in the Los Angeles area.

Maria is the persona our team created to represent the organizer role

Maria is the persona our team created to represent the organizer role

Unfortunately, due to limited time and zero budget for participant recruitment, we were not able to conduct extensive research and struggled to validate our design choices.

In the future, secondary research could be an excellent research method to use when faced with similar time and budget constraints.

 

Prototyping & testing helped us to determine if our solution would help nonprofits stay organized and efficient.

We decided to prototype and test a platform-style web app consisting of organizer, volunteer, and recipient interfaces.

The app centers around “missions” or food delivery requests from the community. “Organizers” send out “volunteers” to complete mission requests for “recipients.”

I was part of the team focused on the desktop organizer interface. Organizers were responsible for mission intake, assigning of volunteers, and monitoring of mission progress.

Sketching & discussing with developers helped me assess feasibility before creating final designs.

From the beginning of my time with Resilience, I learned the importance of communicating with developers early. I “claimed” a user story in our Kanban board and sketched out initial UI ideas to show to developers, who would give feedback about whether the design was feasible.

Initial sketches for a feature that would allow organizers to edit “missions”

Initial sketches for a feature that would allow organizers to edit “missions”

High-fidelity mockups served as a blueprint for developers.

After confirming that an idea was feasible for developers to implement, we made high fidelity mockups for user stories for the dashboard using Google’s Material UI, a widely-applicable design system with pre-made components for designers and developers.

High-fidelity mockup for the edit mission feature

High-fidelity mockup for the edit mission feature

mission-edit-view-panel.jpg

Designing for each component state saved developers time in figuring out how a component worked.

We made sure to mock up every state of a component in our shared Figma file to save our developers time and guesswork.

Here are different states of various components within the “edit mission” panel:

Since the assign volunteer function is on a different screen, the organizer can’t edit volunteer info here as well.

Since the assign volunteer function is on a different screen, the organizer can’t edit volunteer info here as well.

When “Curbside Pickup” is checked, “Pickup Location” is read-only since all orders are picked up at the same location.

When “Curbside Pickup” is checked, “Pickup Location” is read-only since all orders are picked up at the same location.

Recipient information is editable in case the recipient made a typo when putting it in.

Recipient information is editable in case the recipient made a typo when putting it in.

When the user starts to type in an address, Google Maps creates suggestions to help prevent errors.

When the user starts to type in an address, Google Maps creates suggestions to help prevent errors.

If I could do this project over, I would advocate more strongly for usability testing.

Since design and development often happened at the same time, we struggled to complete usability testing before writing code. Design and development often happened at the same time - we were unable to test prototypes before coding them.

A possible solution for the future would be a GV Design Sprint (shown below) a rapid prototyping tool that would have allowed us to test our initial ideas to make sure we were building the right product.

Source: https://www.altexsoft.com/blog/business/design-sprint-by-google-ventures-schedule-team-and-custom-implementations/

Source: https://www.altexsoft.com/blog/business/design-sprint-by-google-ventures-schedule-team-and-custom-implementations/


I learned how to work alongside developers, product managers, and other designers within an agile framework and with limited resources.

Due to a legal obstacle, our client backed out at the last minute. We were not able to ship our product.

While the result was disappointing, this project taught me how to collaborate well with developers, work on an agile team, and grow from failure. This last point was the subject of a talk I gave to a meetup group (see video).