NICOMARTINEZ

Project Open Hand

Simplifying signups to get more volunteers in the community

ROLE

UX ResearcherUI Designer

TIMEFRAME

Two-week sprint

TOOLS

Figma, Google Forms

PHASES

Research & Synthesis
Business and customer interviews, identifying the user, defining the problem

Ideation & Delivery
Building out a solution, rapid prototyping, usability testing





Illustration

PROBLEM

Project Open Hand is a nonprofit organization that provides meals to seniors and other critically ill members of the community, but their website does not have an easy way for volunteers to sign up so they struggle to schedule and attract volunteers.

CHALLENGE

Our challenge was to restructure the pre-existing information on the site to create a more streamlined volunteer sign-up process.

Phase 1

Research

1

Contextual inquiries

We first started with contextual inquiries to create a baseline understanding of how users navigate the site in its current state.

2

Card sorting

Later, I held open and closed card sorting exercises to better understand the site's information architecture.

3

Surveys

Next, a series of two surveys were sent out to get insights of both users and potential users of a volunteer portal.

4

Interviews

After interviewing respondents of the surveys and the volunteer recruiter for Project Open Hand, we were able to understand our target users' needs.

Survey Results

(150+ respondents)

Under what circumstances are you most inspired to help others?

Illustration

Which of these best describes your preferred approach when it comes to offering help on a community scale?

Illustration

My time is the most valuable thing I can give to my cause...

Illustration

Synthesis + Trends

Illustration

We found that people value their time, and while they are motivated to use it to help others, they want to know that it is being managed wisely and effectively.

Illustration

With a few notable exceptions, volunteering is largely a social event.

Illustration

This prospective volunteer varies in terms of experience. They are motivated to help and give back to their community with the condition that their time is managed well and their security is respected.

"I'm most inspired to volunteer when the need is greatest."

Survey respondent

Our audience

The prospective volunteer...

    Varies in terms of experience
    Is motivated to help and give back to their community
    Wants their time and security to be respected
Illustration

Additional Interviews

We also interviewed two volunteer coordinators - one at Project Open Hand and one at another local nonprofit. By speaking to the experts in the field, we were able to better understand their challenges when trying to recruit volunteers.

Illustration

Greater Chicago Food Depository

Volunteer Coordinator

Illustration

Project Open Hand

Volunteer Recruiter

Illustration
Illustration
Illustration

Phase 2

Ideation and Contextual Inquiries

Highlight community

During initial mockups for the landing page, we wanted to be sure to keep the sense of community that we learned is a major aspect of Project Open Hand. To highlight this component, I included a Volunteer Spotlight to showcase the volunteers that help the organization run smoothly.

Illustration
UX Wireframe Designs

Copy is important

Before we were able to get useful feedback for the initial wireframes, we didn't originally consider the importance of copy.
During the contextual inquiries, users were unclear on how to properly navigate the site past the primary navigation.

Phase 3

User Testing

We tested the designs with five of the survey respondents who had also volunteered in the past.

Takeaways

  • Poor accessibility

    Low contrast between text and the background colors hindered accessibility.

  • Difficult navigation

    Accessibility was also affected by too many dropdown menus, which hid some of the important navigation items.

Phase 4

Delivery

We redesigned the homepage to make the header more descriptive of the organization's mission. We also added a section that calls attention to the most pressing volunteer needs with a quick sign up form to get notified of new opportunities. Project Open Hand consistently has a problem filling volunteer spots, so we hoped to solve that problem by calling attention to the opportunities on the homepage and adding a "Volunteer Spotlight" to showcase volunteers and their positive experiences.

Illustration


Volunteer Overview Page

On the Volunteer page, we wanted to provide as much context and information as possible for the various volunteer opportunities. We wanted to show that there are volunteer opportunities for everyone - regardless of their schedules.

Illustration

Single Shift Listings

On the single shift opportunities page, we wanted to make it extremely easy for potential volunteers to browse every opportunity, as well as showcase the most-needed shifts. By showing how full each shift was, we wanted to display the urgency that Project Open Hand had in filling these spots. We also wanted to make it extremely easy to filter and start the booking process on this screen.

Illustration


Sign Up Step

We also wanted to streamline the process of booking opportunities for multiple people at a time. Instead of a group of friends individually registering, one person could go to the site, specify how many people are in the group, and then enter their details all at once. Because we heard in interviews that people mostly enjoyed the social aspect of volunteering, we felt it was important to make it easy for groups to register.

Illustration
Illustration

Full prototype

Key Considerations

  • Filters and transparency

    Transparent volunteer opportunity listings allow users to find and reserve relevant opportunities based on interests, location, and date preferences.

  • Familiar patterns

    The new site uses familiar structures seen in common restaurant reservation mobile apps, such as the ability to reserve based on criteria and group size.

Conclusion + Reflection

Although it was only a two-week sprint, I'm proud of everything my team was able to accomplish. During the sprint, I learned a lot about accessibility and its role in creating inclusionary experiences, especially for a nonprofit audience.
Looking back, we focused heavily on initial research which made the entire design process simpler. We were able to interview competitors, the volunteer recruiter from Project Open Hand, and around 10 previous volunteers which gave a deep insight to who we were helping. We kept going back to the research along the way to be sure we were staying true to the target user which really helped the project stay on course. We also felt it was important to ask questions outside of a digital product to understand the users behaviorally and find their true motivations.
If we had more time, we would have incorporated a more thorough design system in order to make development faster and easier. If we had been tasked with redesigning the entire site, a design system and style guide would have been the natural place to start before designing the individual pages.

Case Studies

Other projects

Rewards App UX Designer

Mittance Rewards

MOBILE APP

Designed a new rewards program to increase usage and engagement for an international peer-to-peer payment app.

Illustration

One4All

WEBSITE / MOBILE APP

Designed a new app and website for a startup that allows users to invest in their favorite influencers and content creators.