Volunteer Opportunities Marketplace
Helping volunteers discover opportunities when they do not know where to start.
My role: Senior product designer
Team: Developer, Director, Marketing, Stakeholders
Time to MVP release: 30 days
Scale & Impact
~12K
Monthly visitors
15.5%
Avg. page bounce rate
1.5K+
Active opportunities
~14K
Google search clicks
~776K
Impressions Jan-May 2026
Problem
A volunteer wants to help, but does not know what opportunities exist or where to begin.
Volunteers without a specific opportunity or organization in mind are still trying to understand:
What types of volunteer work are available
The location of or distance to the volunteer opportunity
Which organization needs help
Which causes interests them
What could fit their schedule
Whether they want an ongoing role or something for a specific day or dates
Goal
Create a volunteer opportunity browsing experience that feels easy to scan, understand, and act on.
The page needs to help users:
Browse opportunities without knowing what to search for
Understand an opportunity at a glance
Return to browsing without losing their place
Narrow results without configuring dozens of filters
Move into full details when something catches their attention
Express interest without unnecessary interruption
User Behaviors
Explorer
Typical behavior:
Browses without a clear goal
Relies more on visual cues than text
Navigates between listings and details
Changes direction easily
Can lose their place in the list
May stop with choice overload or boredom
Browses without a fixed goal and prefers to move at their own pace.
Goal-Driven
Typical behavior:
Needs obvious affordances
Relies heavily on visible images, bolded text, clickable elements, and buttons
Can become overwhelmed easily
Prone to interaction errors when controls or outcomes are ambiguous
Loses context easily
Struggles when labels, controls, or outcomes do not clearly relate to their objective
Has a clear objective and needs an obvious path to complete it.
Simple browsing, broad functionality
Opportunities need to feel simple while supporting a broad range of users, opportunity types, and information requirements.
Key considerations included:
User groups privacy and safety
Anonymous
Volunteer
Organization
Display Who, What, Where, When, Why at a glance
Actions
Primary CTA “I’m Interested”
Saves place in long list of opportunities, especially when going back
Links to details page
Links to profile page
Must have an account for full features
Sign up to opportunity
Favorite
Save search
Display distance to opportunity on card
Opportunity matching
Organization privacy
Some organizations require a hidden profile and disabling direct contact
Be accessible
Color contrast
Alt img descriptions
Screen readers
Userway widget
Infinite-scroll contributed to poor page performance
Move to pagination
Views
Grid
List
Calendar
Details
Search bar with suggestions
Filters
Distance
Events
Virtual
In person
Student
Adult 55+
Groups
Causes
Constraints & Considerations
Visual Discovery
Designing for Discovery, Accuracy, and Action
Make the opportunity easy to browse, accurate, and actionable.
The initial primary goal was to get volunteer users to complete the “I’m Interested” flow. We used the Volunteer Success branding for the copy, colors, and icons to create a unified look and feel across the platform.
User needs to know about the volunteer opportunity:
What it is
What they’ll be doing
When they’ll need to commit to a time
Amount of time commitment
Who this helps/supports
User actions include:
Clicking navigates to opportunity detail page
Opportunity title
See Details button
Clicking navigates to profile page
Card
Organization name
Clicking navigates to interest flow
I’m Interested (primary blue CTA)
Views of opportunities
Grid (up to 3 cards and 60 rows)
Listing (single column)
Calendar (title in calendar)
The opportunity card
Designed to make opportunities easy to scan and understand at a glance.
The challenge for the opportunity card was how to group the dense information in a way that is more scannable to the users. From a team meeting, we decided the mandatory information that must be on every card should at least answer what, where, when, why, and who for the volunteer.
The card must display:
Organization logo or opportunity img
Opportunity title
Organization name
Cause
Short description
Location of opportunity
Primary action
I’m Interested (sign-up or sign-in)
Event or Ongoing role
Relevant suitability badges
Utilizing icons and white space, we successfully achieved a visually appealing and scannable opportunity card. The location was challenging because there are 3 main types of on-site, in-person, and virtual. At first, I had 3 colors at the top of the card, but that became too confusing to the user during usability testing, so the purple header background was removed. And since on-site and in-person are essentially the same thing, the header was reduced to 2 colors. Green for in-person and blue for virtual opportunities. This also made it easy to visually verify whether the quick filter was working correctly.
Some volunteers like to see the list differently
Different browsing behaviors called for flexible ways to scan and discover opportunities.
Views are seen as different ways to display the opportunity list and help the volunteer feel in control of their list and experience. We had a map view at one point, but found the cost to expensive too maintain and disabled it.
The list view kept the familiarity of the text heavy postings, most volunteer sites at the time had. Usability testing also showed some users liked to process one opportunity at a time and scroll through a list from top to bottom. They may jump around a bit, but they found a single column list easier to handle than the grid version.
Our stakeholders wanted a calendar view for the events and some user support tickets supported the idea. It created a way to see opportunities by date specifically but in a discoverable and scannable way. The main difference between the views are:
Grid
Responsive rows up to 3 cards each and defaults to 12 rows per page.
List
A different card view in a single column.
Calendar
A calendar with opportunity titles displayed only on the days the volunteer is needed and has spots in their sign up or wait lists.
Search & Quick Filters
Keep It Super Simple.
To reduce cognitive and choice overload on the user, we simplified the filters to the most commonly used and enabled a secure shareable URL to share the filtered list. We also added a reset button to help the user clear all the filters and reset their results list easily.
Search
Exact match first
Best match next
Suggest closest opportunity after
Suggest closest organization last
Quick Filters
Distance (open by default)
Events
Virtual
In person
Student
Adult 55+
Groups
Causes
Refining the End-to-End Experience
Keeping exploration fun and easy
Two fixes ensured the volunteer user experience felt natural and discovery lead to sign up.
Preserving list position
Volunteers often clicked “See Details” to open an opportunity, then returned to the list to keep browsing. That triggered a full page reload and reset their scroll position, forcing them to re-find where they left off. Fixing this preserved list position on return, keeps discovery fast and frictionless.
Pagination over infinite scroll
Infinite scroll was replaced with pagination due to performance limitations at scale. Pagination gave the large opportunity set clearer boundaries and more filtering/display customization, while significantly improving Google page-performance scores.
Accessible and Mobile Responsive
The page was designed for users of varying ages and accessibility requirements.
Important actions remained visible and clearly labeled. Anything that would be questioned or needed more explanation have a tool tip on hover. Keyboard and screen-reader interactions were considered across cards, controls, filters, view changes, and navigation. This helps the Userway accessibility widget to function properly. And although most of the user interactions are on the desktop platform, the Opportunities page is mobile responsive.
The interface also adapted to different account states:
Signed-out visitors could still browse volunteer opportunities
Signed-in volunteers have additional features
Organization users should not see volunteer-specific actions
User actions had to make sense to the proper account state and eliminate any improper affordances. This ensures the user does not end up in the wrong flow (i.e. The organization user cannot sign up to their own opportunity.) and the proper set up for the accessibility widget to work properly.
Completing the user journey
Discovery was the core journey, but the underlying goal was converting browsing into sign ups and volunteer registrations.
Connected features that support the opportunities page and help drive conversions.
Opportunity detail page
Opportunity wizard
External opportunity form
“I’m Interested” flow
Proper linking to sign-in/ sign-up page
Routing data to the correct page based on account state
Results
The page became the second high-traffic volunteer discovery surface. A volunteer can now discover through browsing or searching the opportunities page, sign-up, and sign-in or register for a volunteer account to track it all.
Approximately 12,000 monthly visitors and growing
15.5% average page bounce rate
Continued platform growth to over 2K active volunteers and 1.8K charitable organizations.
The “I’m Interested” flow had a 25.3% completion conversion rate
Customer support helped volunteers find relevant opportunities through the sharable URL
What I Took Away
Good design only ships as well as the system underneath it can support.
That lesson came directly from working on the Opportunities page for a few years. Early on, a misaligned backend and frontend meant we couldn’t implement the best front-end components for the discovery experience. It’s a nuanced balance of components and data for performance and accuracy. Once we converted and updated the technology stack, adopting new components got easier, and just as importantly, a full and implementable component set kept branding and styling aligned across the whole platform, not just this page.
On a small team, the right call was designing within a system we all were familiar with rather than pushing for something more custom. That tradeoff shipped the MVP faster and made future pre-release changes much less and easier.
The page also created value outside its original scope: customer support started utilizing it to find and link volunteers directly to a list of possible opportunities, helping people find something to do. Sharing those search results meant building a secure, shareable URL, proof solid information architecture pays off in ways you don’t always plan for.