UX Case Study: Lagos Food Bank

Introduction

This semester I worked on the Lagos Food Bank subteam, where the designers had to design a volunteer management system for the organization. This was quite a hefty project, with 3 types of users to design for (volunteer, supervisor, and admin), and it took many partner calls for us to understand the users’ needs. I worked on the “browse events” for all users, and the “edit metadata page” this semester for the admins.

User Research

During our user research, we found that the main issues with the existing platform were the following:

1. The information on how to RSVP for events was scattered across many platforms. Some programs required users to RSVP through sending an Instagram DM, some required reacting to a message on WhatsApp, and some just had a Google form.
2. They use Google Form responses for event tracking which can be tedious to search through.
3. The paper-based methods for volunteer work tracking is tedious and slow for both the supervisors and the volunteers. It makes the events go less smoothly, and it is an error prone way of checking in people.
4. Volunteers do not have a central way of tracking their hours, which causes them to be unsure of when they could request a certificate. Volunteer hours instead need to be manually confirmed by Lagos Food Bank staff for community service certificates.

To assist Lagos Food Bank, we proposed to create a volunteer management platform that simplifies the volunteer signup process, event tracking, and volunteer work hours tracking. Our designs allow volunteers to sign up on the platform and RSVP for specific events, view upcoming events, and supervisors to create new events and send signup forms to prospective volunteers. The platform automatically updates volunteer hours when attendance is confirmed by supervisors during events.

Iterations

We spent the first few weeks working on the information architecture and information flow, as it was very difficult to centralize all the different sign ups without messing up the current user flow. After many partner calls we ended up with the following changes:

After we finalized the user flow we also made a journey map for the volunteers. This helped us reiterate what problems arose at each step of volunteering for LFBI. This really helped us with visualizing the problems, and helped us brainstorm on how we might solve these issues.

Now, we could finally start working on the information architecture. We had to split up the flow into 3 profiles, one for the volunteers, one for the supervisors, and the last one for the admins. They each had slightly different flows, so we had to make sure we had all of them.

Now onto the designing. The first thing I worked on was to create a “browse all events page” for each type of user flow, and decide on how the users might be able to search and sort through these events, and how the events should show up. These were my designs:

Mobile view:

Desktop view:

Here I had to choose between different types of cards, and different ways to search and sort through these cards. I ended up choosing the medium sized cards without the pictures, since the pictures don’t really give value to the users since it’s usually just a logo.

My next task was to design the view/about page for the website’s metadata. It was important here to consider to make it easily editable to the admins, but not for the volunteers and supervisors. I made many iterations, but decided that the sidebar was not necessary, since the user would not have to scroll more than once to get to the bottom of the page, since the page did not contain too much data. Therefore to make the page easier to develop, I decided to not include that into our designs. The final flow will look like this:

Conclusion and Reflection

The biggest challenge this semester was understanding the users’ needs, and putting them all together. There were many times where we had to adjust our design based on the input of our partners, for example, when we suggested automated sign in for the volunteers at events, they expressed their concerns with volunteers trying to cheat the system and illegally signing themselves in. That would have created issues on the reliability of the volunteers, and could have resulted in the number of volunteers drastically decreasing, and going through this definitely made me realize even more how much good design relies on the usability and reliability of the platforms rather than visual design and convenience.

The other big challenge, which was more on the technical and design side rather than the architecture of our platform, was to learn how to use Figma’s auto layout feature to make more consistent and efficient designs.