Mano a Mano is a nonprofit whose mission is to empower immigrant families to become full participants in their community. Serving various parts of Illinois, they have various programs that provide support to immigrant families.

High-Level Design Objective: Redesign the current flow to solve frustrations and improve user experience.

Duration: 7 weeks

The problem area

Every month Mano a Mano has to send a report to confirm that they are meeting the requirements for their grants, which can include number of applications sent and number of initial consultations conducted.

The problem is that employees have trouble navigating the current database platform to find the numbers they need to confirm requirements. This had led to employees having to spend a large amount of time creating separate spreadsheets instead to keep track of the numbers.

Understanding the team’s frustrations

After speaking with the team, I realized that their current process while navigating the platform was fragmented. They were having to click multiple buttons in different places to complete the process. One participant summed it well:

“At a certain point, I feel like I’m just clicking around trying to make something happen.”

There were other frustrations as well: too many options when choosing filters and columns. And some participants weren’t too sure about what columns and filters to use, which led to multiple guesses trying to find the right combination.

Based on the interviews with the team, I was able to put together a current service blueprint that pinpointed where in the process the frustrations lied.

I also put together a persona for the legal coordinator, who was in charge of counting the numbers to confirm they are meeting grant requirements.

Redesigning to eliminate user frustrations

Based on user frustrations, our goals for the new flow were to:

• Take out much of the guessing to make the process easier

• Eliminate the clicking around to make the process more efficient

• Minimize the amount of options available to prevent cognitive overload

I then designed the new flow:

After that, I started sketching wireframes for the screens needed for the process.

To eliminate the clicking around, I chose overlays that would provide a step-by-step guided experience for the user. Adding a dark background behind the overlays would also help reduce the amount of information on the screen, helping the user focus on the most important task.

Then, I moved into minimizing the guessing work and the amount of options available for filters and columns.

By analyzing the different types of grant requirements and the columns and filters needed for each, we realized that there were about 3 main columns and 4 filters that are most commonly used. This helped us create a ‘Previously used filters’ and ‘Previously used columns’ section at the top of the list. This section would include these commonly used columns and filters, along with any other recently used ones. 

I then started developing the rest of the wireframes for the process, keeping in line with the visual design of their platform.

Prototyping

Next came the development of the prototype, which would help us test the new design with users to gain feedback.

User testing

Once the prototype and usability test plan were finalized, I began testing the prototype with the team.

My hypotheses were:

1. If we guide the user through the process with overlays, the user will more easily and quickly be able to confirm requirements for the grants. 

2. If we provide a ‘Previously used filters’ and ‘Previously used columns’ as systems of recollection, the user will more easily be able to identify what columns and filters they need.

Making changes based on feedback

By asking the team about their first impressions, I was able to gain great insight into how we could make it better for them.

For example, it took them a couple seconds to identify the ‘Add a new section’ button, which helped me see that although what we had was contrasting and visually pleasing, we needed to increase the contrast so they could see the first step faster.

Users also mentioned that they would like to see the filters and columns all in one place, rather than splitting them up in two separate screens.

“I’m more of a visual person, so I like seeing everything all in one place.”

Reflection

This project was a true testament to how important human-centered design is. Working with a platform that had a high degree of complexity helped me see the frustration that products like these can have on a group of people, and how they can hinder their work. 

I also enjoyed the challenge of designing without changing things too much because I did not want to add a steep learning curve for employees. I wanted to create something that helped them achieve their goal (a quick and accurate grant confirmation) but was not a far departure from what they were used to seeing and working with.