Community support platform focused on clarity, trust, and action

HopeBridge Community Learning Fund

HopeBridge Community Learning Fund is a community-focused organization supporting learners, families, and local partners through educational programs and digital access initiatives. This platform direction focused on improving how the organization communicates support pathways, builds trust with donors and volunteers, and helps users understand what they can do next without friction.

RoleUX Strategy, UI Design, Information Architecture, Content Structure
ToolsFigma, Wireframing, UX Research, HTML, CSS
Scope Experience strategy, structure, trust communication, and interface direction
Community Learning Platform

HopeBridge Community Learning Fund

A clearer, warmer, and more trustworthy digital experience for families, donors, volunteers, and local partners.

HopeBridge homepage mobile design
4,800+ Learners supported
125 Volunteer mentors
92% Program satisfaction
01 · Platform overview

Making community support information easier to understand and act on

Community-centered platforms often serve multiple audiences at once: families seeking support, donors evaluating impact, volunteers looking to contribute, and partners exploring collaboration. When information is not structured around those needs, users face friction in understanding what the organization does, whether it is relevant to them, and what to do next.

This redesign direction focused on restructuring the experience around real user intent. The goal was to make support pathways easier to discover, donation confidence stronger, and community engagement more actionable across the site.

Platform focus

  • Homepage clarity and mission communication
  • Program discovery and support pathways
  • Donation trust and impact visibility
  • Volunteer and community engagement flows
  • Clearer information architecture
  • Low-friction action pathways
  • Content hierarchy and scannability
  • Structured trust communication across the experience

Why it matters

For organizations serving real community needs, digital clarity is not just a visual improvement. It affects access to support, donor confidence, volunteer participation, and overall trust. The redesign aimed to create a more welcoming and practical experience that supports action, not just information.

02 · Problem space

A mission-driven site with friction in critical journeys

The existing experience reflected a common challenge in nonprofit and community-facing platforms: valuable information existed, but it was not organized around how users actually navigate, evaluate trust, and make decisions. That created friction in key journeys such as finding support, understanding eligibility, donating confidently, and getting involved.

Content overload

Important information was present, but buried in long paragraphs and broad sections.

Weak action hierarchy

Apply, donate, and get involved pathways were not visually prioritized early enough.

Navigation misalignment

The structure leaned toward internal organization rather than visitor intent.

Trust gaps

Impact, reassurance, and credibility signals needed stronger placement across the site.

03 · Experience goals

Practical goals for a more supportive and credible digital experience

  • Clarify what the organization does within the first screen
  • Make program information easier to scan and understand
  • Restructure navigation around primary user intent
  • Elevate support, donate, and volunteer calls to action
  • Improve trust through visible impact and reassurance messaging
  • Establish a clearer, more approachable communication tone
  • Reduce friction across support and engagement journeys
04 · Role and ownership

End-to-end experience strategy and interface direction

  • Project framing and problem definition
  • Audience segmentation and persona creation
  • User journey mapping
  • Information architecture restructuring
  • Wireframing and layout planning
  • Visual direction aligned with community-centered communication
  • Content hierarchy and call-to-action planning
  • Experience refinement based on usability considerations
05 · Core audiences

Who the redesigned experience serves

The site was intentionally structured around three audience groups whose goals overlap, but whose needs differ at the point of entry.

Parents and guardians

Need clear access to support programs, eligibility details, and next steps.

Donors and supporters

Need trust, transparency, impact proof, and a direct giving route.

Volunteers and community partners

Need visible opportunities, contact routes, and practical ways to participate.

06 · Research approach

Research framed around real community-facing platform needs

The research approach combined comparative review of nonprofit and support-oriented websites, user expectation patterns, and usability-focused evaluation of community-facing platforms. The goal was to identify recurring friction points in navigation clarity, content structure, action visibility, and trust communication, then translate those insights into a clearer and more supportive experience model.

Audience framing

Research scenarios built around real visitor intent

Research scenarios were structured around likely stakeholders including parents seeking educational support, donors evaluating credibility, and volunteers looking for opportunities to participate.

  • What do families need to know first?
  • What builds donor confidence earliest?
  • What makes volunteering feel accessible?
Usability lens

Pattern analysis focused on action clarity and trust

The research combined platform pattern review with usability-based assumptions around navigation clarity, content scannability, and the placement of trust cues across the journey.

  • Users struggle when action paths are delayed
  • Dense content reduces comprehension speed
  • Trust cues strongly influence giving confidence
07 · Key findings

Three themes shaped the redesign direction

Users wanted clarity before detail

Users needed immediate clarity about the organization’s purpose and available support before engaging with deeper content.

Action had to appear earlier

Families, donors, and volunteers all needed a quicker route to their next step, whether that meant applying, donating, or making contact.

Trust required visible evidence

Impact storytelling, reassurance, and transparency cues were essential to make the experience feel credible and community-centered.

08 · Experience principles

Design principles that guided the platform direction

Lead with purpose

Mission and value proposition should be understood quickly.

Design for action

Primary pathways should feel obvious and repeat consistently.

Reduce reading load

Long content should be broken into digestible, scannable modules.

Build community trust

Impact, support, and credibility should appear throughout the journey.

09 · Persona framework

User roles shaped by support, trust, and participation needs

Three core personas were defined to translate research themes into design priorities. Each persona reflects a major audience segment the organization needs to support well.

AM

Angela Morris

Parent seeking educational support · Age 38

A working parent searching for affordable educational support for her children. She values clarity, reassurance, and a simple path to understanding eligibility.

Primary goals: Find programs quickly, understand qualification, and identify the right next step.

Pain points: Dense content, unclear navigation labels, and too much reading before action.

How the redesign helps: Clearer support pathways, modular program summaries, and visible assistance options.

RC

Robert Chen

Community donor · Age 52

A local donor and small business owner who wants confidence that his contribution will support a real, transparent, and measurable mission.

Primary goals: Understand impact quickly, assess trust, and contribute with confidence.

Pain points: Generic nonprofit language, limited visibility of outcomes, and a weak giving prompt.

How the redesign helps: Earlier trust signals, stronger impact communication, and a more visible donation route.

MT

Maya Thompson

Volunteer and community partner · Age 27

A community-oriented volunteer who wants to help local students through tutoring, outreach, and advocacy, but needs a clearer route into the organization.

Primary goals: Understand how to help, see available opportunities, and make contact easily.

Pain points: Buried engagement information, unclear volunteer steps, and scattered contact pathways.

How the redesign helps: Consolidated get-involved sections and clearer volunteer and partner routes.

10 · Journey model

Mapping the parent support journey

This journey focuses on one of the most important workflows: a parent arriving on the site in search of educational support.

Stage
User action
Thinking
Pain point
UX opportunity
Awareness
Learns about HopeBridge through school, community referrals, or local channels
“Can this organization help my child?”
Purpose and offerings may not be instantly clear
Clarify the homepage message within the first screen
Explore
Scans homepage and navigation to find the right path
“Where do I start?”
Broad navigation slows orientation
Prioritize programs, support, apply, and contact
Understand
Reads support information and eligibility details
“Do we qualify for this help?”
Key details are buried inside long paragraphs
Use scannable sections and plain-language headings
Take action
Looks for application, contact form, or support next step
“What do I do now?”
Primary calls to action appear too late
Introduce clear action panels earlier and more often
Follow through
Submits inquiry or starts an application
“I hope I reached the right place.”
Limited reassurance at the final step
Add supportive microcopy and contact reassurance
11 · Information architecture

Restructuring the site around visitor intent

The information hierarchy was reworked to move from an organization-led structure toward a clearer user-centered structure built around what visitors actually need to do.

Before

Organization-led navigation

Homepage
About
Services
Resources
Events
Contact
Donate

This structure communicates what the organization has, but not what users most need to do.

After

User-centered navigation

Homepage
Programs
Apply for Support
Donate
Get Involved
Stories & Impact
About
Contact

The revised structure surfaces the goals most likely to bring visitors to the platform first.

12 · Wireframes and layout exploration

Low-fidelity planning before final visual direction

These low-fidelity wireframes were used to define hierarchy, content grouping, and action placement before introducing refined interface styling.

Homepage wireframe

Mission clarity, featured programs, impact summary, and visible support and donation pathways.

Programs page wireframe

Scannable program modules, eligibility details, and clearer next-step areas.

Donate page wireframe

Trust-oriented layout with impact context and a clearer giving route.

Get involved / contact wireframe

Consolidated volunteer, partner, and direct contact options into a single page flow.

13 · Before vs after

From broad messaging to clearer user pathways

Before · Homepage messaging

The mission required too much reading before users could understand what the organization offered.

After · Homepage messaging

A clearer value proposition and stronger content hierarchy helped visitors understand the platform sooner.

Before · Navigation

The information architecture reflected internal categories more than visitor intent.

After · Navigation

Support, donate, and get involved pathways became easier to identify and access.

Before · Calls to action

Important actions lacked enough visual prominence to support quick decision-making.

After · Calls to action

Key actions were surfaced earlier and repeated more consistently throughout the experience.

Before · Trust communication

Impact and reassurance were present but not strong enough to guide confidence.

After · Trust communication

Impact storytelling, structure, and support cues increased credibility and emotional clarity.

14 · Interface direction

A visual tone grounded in clarity, warmth, and practicality

The visual direction focused on clarity, structure, and approachability. The interface uses restrained color, clean typography, and modular layouts to support readability and guide users through key actions without unnecessary complexity.

  • Clean editorial hierarchy
  • Small-radius cards and modest shadows
  • Muted green and warm neutral palette
  • Simple diagrams and supportive layout patterns
  • Structured sections rather than experimental compositions
  • Practical, clarity-focused presentation style
15 · Accessibility approach

Supporting readability for a broad community audience

Since community-facing platforms serve diverse audiences with different digital comfort levels, the redesign emphasized readability, visual simplicity, and reduced friction in the main decision paths.

Readable type hierarchy

Headings and body text were organized for comfortable scanning.

Clear section separation

Content blocks were visually grouped to reduce cognitive overload.

Action clarity

Buttons and links were labeled in direct, plain language.

Consistent layout patterns

Repeated structures helped users learn the interface faster.

16 · Impact summary

Usability improvements and projected outcomes

The redesigned experience improves usability by making primary pathways clearer, reducing content friction, and strengthening trust signals across the user journey.

Faster

Primary path recognition

Users can identify where to apply, donate, or get involved more quickly after navigation and homepage restructuring.

Clearer

Content hierarchy

Program and support information become easier to scan after restructuring dense sections.

Stronger

Action visibility

Donation, support, and volunteer actions are surfaced earlier and more consistently.

Higher

Trust perception

Impact messaging and clearer structure improve perceived credibility and confidence.

17 · Outcome

A more complete and credible community support experience

The final direction established a clearer and more credible digital experience centered on user intent, trust-building, and accessible action pathways. The work covered the full UX arc, from audience framing and journey design to information architecture, layout planning, and interface direction.

18 · Key learnings

What this project reinforced

  • Community websites need trust and clarity as much as aesthetics
  • Information architecture is often the most important redesign layer
  • Earlier action visibility can dramatically improve usability
  • Wireframes and journey mapping help align structure before visual refinement
  • Trust cues need to be embedded across the journey, not isolated to donation pages
19 · Growth opportunities

Future expansion paths

  • Mobile-specific layouts for parents and guardians on smaller devices
  • Expanded donor trust and annual impact reporting sections
  • Application flow optimization and form simplification
  • Event or workshop registration experiences
  • Volunteer profile and opportunity matching
  • Personalized support pathways based on visitor intent
20 · Final reflection

Designing for support, trust, and practical action

This redesign reinforced how much usability in mission-driven platforms depends on structure, clarity, and trust. When support pathways, giving flows, and community engagement routes are made easier to understand, the experience becomes more useful for the people who rely on it.