No audience-specific entry points
All visitors landed on the same homepage with no clear direction for their role.
Case Study
Boston Cares
Redesigning New England's largest volunteer platform to serve individual volunteers, nonprofit partners, and corporate teams without losing any of them.
- Desktop & mobile screens
- Made with auto layout
- Styles & components based
- Simplifying volunteer coordination for three audiences
Project Context
Boston Cares is New England's largest volunteer agency, connecting individuals, companies, and nonprofits through meaningful service opportunities.
- 10,000+
- Annual volunteers
- 150+
- Partner organizations
- 1.3M
- Hours served
01 / Overview
A good mission, buried under a website that worked against its own users.
Boston Cares connects 10,000+ annual volunteers with 150+ partner organizations, representing 1.3M hours of service. The mission was clear. The website was not.
The original site used one structure for three very different audiences: individual volunteers, corporate partners, and nonprofit organizations. Navigation was crowded, donation was buried, and volunteer listings were hard to search or scan.
Donation CTA hidden
The donate action appeared inside a dropdown, invisible to top-level scanning.
Overloaded dropdowns
Some navigation menus held 9+ sub-items with overlapping labels.
02 / Research
Comparable platforms had already solved parts of the problem.
I compared Boston Cares with New York Cares, Chicago Cares, and VolunteerMatch across user segmentation, donation CTA visibility, mobile optimization, and visual hierarchy.
The gap was not Boston Cares' mission or content. It was the structural decisions that made action harder than intention.
Three audiences had three different reasons to leave without acting.
Research methods included heuristic evaluation, competitive analysis of 3 platforms, and user interviews with active Boston-area volunteers.
03 / Define
The original navigation served the organization. The redesign serves the user.
The new IA reduces 5 competing top-level menu areas into 4 clearer categories: About Us, Take Action, Support Us, and Resources.
"Take Action" becomes the unified hub for all participation types, reducing decision paralysis while still supporting individual, nonprofit, and corporate pathways.
Hybrid organization
Task-based top level, audience-based second level.
Progressive disclosure
Information appears when relevant, not all at once.
Consistent labeling
"For Individuals", "For Nonprofits", and "For Companies" appear throughout.
Focused entry point
One participation hub keeps the site easier to understand.
04 / Wireframe
Three wireframe versions in five days, testing structure before pixels.
I used rapid prototyping to validate layout decisions early. The goal was to test information hierarchy with users before investing in high-fidelity visual design.
Paper sketches
Explored where audience segmentation should appear.
Figma wireframes
Tested with 9 volunteers and added opportunity cards to the homepage.
Hi-fi direction
Validated navigation, card layout, and donation flow with stakeholders.
05 / Design
One homepage. Three clear paths forward.
The homepage had one job: help each audience find the right starting point within seconds. Audience cards, persistent Donate CTA, and visible impact numbers create clear direction without making users read the whole page first.
67%found Donate immediately
85%agreed with "Take Action"
73%identified all three user types
89%preferred card layout
06 / Design System
A visual language built for accessibility and trust.
Blue supports credibility and accessibility for a platform asking people to give time and money. Magenta is reserved for donation CTAs so the highest-value action remains consistent and easy to locate.
Components were built in Figma with reusable states and auto layout: cards, buttons, form fields, filter chips, and tags.
07 / Impact & Reflection
What the numbers say, and what the numbers cannot.
This was an academic redesign project. Testing was conducted through prototype walkthroughs and informal sessions, not live site analytics. The numbers reflect usability study findings, not production data.
The biggest shift was realizing this was not primarily a visual problem. When a volunteer gives up and searches Google instead, and an HR manager cannot tell whether the site is relevant to her company, the core issue is structure.
Structure before style
The redesign became stronger once the focus moved from visual polish to navigation and decision paths.
One brand, three journeys
Individual, nonprofit, and corporate users needed separate flows without fragmenting the experience.
Trust belongs near commitment
Donation and partnership pages needed proof, process, and reassurance at the moment users decide.