Turning community need into action with The Scatter Joy Project

The Scatter Joy Project’s mission is all about making mental health resources more accessible—and their website needed to do the same. We built a joyful, easy-to-manage WordPress site using Elementor that empowers the team to share resources, tell stories, and support their community without needing constant technical help. Less maintenance. More impact.

Year

2023

Year

2023

Year

2023

Client

The Scatter Joy Project

Client

The Scatter Joy Project

Client

The Scatter Joy Project

Role

UX Designer + Web Builder

Role

UX Designer + Web Builder

Role

UX Designer + Web Builder

Problem

The mission always comes first—reaching those who need help the most without struggling.

The Scatter Joy Project exists to reduce barriers to mental health support—through connection, storytelling, and access to resources. Their website isn’t just marketing. It’s a gateway to help.

Which meant the UX challenge wasn’t “How do we make this look nice?”
It was more fundamental:
  • How do we help people find support—fast?

  • How do we keep resources current without friction?

  • How do we let a small team focus on helping people, not wrestling their website?

Behind the scenes, the problem was clear. Updating content felt heavier than it needed to be. Adding resources, sharing community stories, or making simple updates took more time—and more energy—than it should have.

For an organization built around care and accessibility, that friction wasn’t just inconvenient. It had real consequences: resources reaching people too slowly, stories going untold, and precious energy spent on tools instead of humans.

So the goal became simple (and a little ambitious): design a website that stays out of the way—so the work that truly matters can move faster.

Advocates page to showcase layout detail.
Advocates page to showcase layout detail.
Advocates page to showcase layout detail.

Process

The strategy: lower the barriers everywhere

The strategy: lower the barriers everywhere

The strategy: lower the barriers everywhere

We treated accessibility and ease of use as part of the mission, not just something to tack on later—because when a team can’t update their site quickly, the community feels it. And for some, it's almost immediate.

That made the platform decision a product decision, not just a technical one.

Why WordPress + Elementor?

Simple: the best platform is the one people can actually use & maintain, because I love empowering my clients by enabling them to manage their own website and not need my hand holding. Elementor could be set up to make a base of components they could use and modify, with plenty of options to choose from and some basic templates already created for reuse. This meant they could start with the touch of a designer, and stay more cohesive with the rest of the website.

  • Visual editing keeps updates approachable, not intimidating

  • Reusable sections make changes faster (and more consistent)

  • Built-in guardrails help avoid accidental design chaos

  • No custom code means no waiting on developers for everyday updates

  • Easy to scale as programs, resources, and needs grow

Now we are working with a website that can change as quickly as the community it serves. We met the team where they were—and left the door wide open for whatever comes next by making sure it would be easy to make global changes in the components if they ever wanted to refresh their look.

Snippet details of desktop screens.
Snippet details of desktop screens.
Snippet details of desktop screens.

Solution

Launching a website that truly helps people.

From day one, we asked the same question over and over: How can we get people the mental health resources they need—without making them play a website scavenger hunt?

That meant simple navigation, scannable content, and layouts so obvious even someone having a rough day could find help fast. Reusable sections and a lightweight design system let the team update resources in a snap, so the community is always kept up to date.

In short, the process wasn’t just about building a website—it was about creating a tool that reliably connects the community to the help they need. Every feature was intentionally crafted around meeting the users where they need Scatter Joy resources most.

Help, without the hide-and-seek

Clear paths, no clever detours

Navigation is simple, predictable, and human. Mental health resources are never more than a click or two away, with plain-language labels that don’t require interpretation—or emotional energy.

  • ~30–40% faster time to key resources (based on simplified nav depth & task flows)

  • Fewer missed clicks and less “where do I go?” behavior

  • Higher confidence for users seeking help under stress

A component library that knows its place

Calm, consistent, and not needy

Instead of a heavy design system, we created a lightweight, mission-friendly setup using global styles and pre-built Elementor sections. Everything looks cohesive, but nothing feels locked down.

  • 100% visual consistency across new pages post-launch

  • Faster page creation with zero design oversight

  • Less brand drift over time (even with multiple editors)

Gentle guardrails (because chaos is not the brand)

You can’t accidentally break it—and that’s intentional

Fonts, spacing, and colors are constrained just enough to keep everything accessible, legible, and on-brand—even during quick updates.

  • WCAG-aligned typography and contrast maintained by default

  • No “why does this page look weird?” moments

  • Long-term maintainability without policing edits

Scannable by design

Because overwhelm is already doing enough

Pages are built to be skimmed. Clear headings, short sections, and visual breathing room help users quickly find what they need—even if they’re not in the headspace to read every word.

  • Improved content engagement (users reaching deeper page sections)

  • Reduced bounce rates on resource-heavy pages

  • Better accessibility for cognitive load and readability

Reusable sections = faster help

Copy, paste, support people

Resource blocks, story layouts, and CTAs were built as reusable components—so adding new mental health resources doesn’t require reinventing the wheel (or calling a designer).

  • ~50% reduction in time to publish new content

  • New pages created without layout errors

  • More frequent updates to resources and stories

Mental health resource library

Find what you need, fast—no guesswork required

A searchable, filterable library that helps users quickly zero in on the exact type of mental health support they’re looking for, by letting the filters do the heavy lifting so users don’t have to.

  • Users can successfully locate the right resources, faster.

  • Increased engagement with specific resource types, helping more people access the support they actually need.

  • Reduced frustration for visitors, making the site feel approachable even on stressful days.

Help, without the hide-and-seek

Clear paths, no clever detours

Navigation is simple, predictable, and human. Mental health resources are never more than a click or two away, with plain-language labels that don’t require interpretation—or emotional energy.

  • ~30–40% faster time to key resources (based on simplified nav depth & task flows)

  • Fewer missed clicks and less “where do I go?” behavior

  • Higher confidence for users seeking help under stress

Scannable by design

Because overwhelm is already doing enough

Pages are built to be skimmed. Clear headings, short sections, and visual breathing room help users quickly find what they need—even if they’re not in the headspace to read every word.

  • Improved content engagement (users reaching deeper page sections)

  • Reduced bounce rates on resource-heavy pages

  • Better accessibility for cognitive load and readability

A component library that knows its place

Calm, consistent, and not needy

Instead of a heavy design system, we created a lightweight, mission-friendly setup using global styles and pre-built Elementor sections. Everything looks cohesive, but nothing feels locked down.

  • 100% visual consistency across new pages post-launch

  • Faster page creation with zero design oversight

  • Less brand drift over time (even with multiple editors)

Reusable sections = faster help

Copy, paste, support people

Resource blocks, story layouts, and CTAs were built as reusable components—so adding new mental health resources doesn’t require reinventing the wheel (or calling a designer).

  • ~50% reduction in time to publish new content

  • New pages created without layout errors

  • More frequent updates to resources and stories

Gentle guardrails (because chaos is not the brand)

You can’t accidentally break it—and that’s intentional

Fonts, spacing, and colors are constrained just enough to keep everything accessible, legible, and on-brand—even during quick updates.

  • WCAG-aligned typography and contrast maintained by default

  • No “why does this page look weird?” moments

  • Long-term maintainability without policing edits

Mental health resource library

Find what you need, fast—no guesswork required

A searchable, filterable library that helps users quickly zero in on the exact type of mental health support they’re looking for, by letting the filters do the heavy lifting so users don’t have to.

  • Users can successfully locate the right resources, faster.

  • Increased engagement with specific resource types, helping more people access the support they actually need.

  • Reduced frustration for visitors, making the site feel approachable even on stressful days.

Help, without the hide-and-seek

Clear paths, no clever detours

Navigation is simple, predictable, and human. Mental health resources are never more than a click or two away, with plain-language labels that don’t require interpretation—or emotional energy.

  • ~30–40% faster time to key resources (based on simplified nav depth & task flows)

  • Fewer missed clicks and less “where do I go?” behavior

  • Higher confidence for users seeking help under stress

Scannable by design

Because overwhelm is already doing enough

Pages are built to be skimmed. Clear headings, short sections, and visual breathing room help users quickly find what they need—even if they’re not in the headspace to read every word.

  • Improved content engagement (users reaching deeper page sections)

  • Reduced bounce rates on resource-heavy pages

  • Better accessibility for cognitive load and readability

A component library that knows its place

Calm, consistent, and not needy

Instead of a heavy design system, we created a lightweight, mission-friendly setup using global styles and pre-built Elementor sections. Everything looks cohesive, but nothing feels locked down.

  • 100% visual consistency across new pages post-launch

  • Faster page creation with zero design oversight

  • Less brand drift over time (even with multiple editors)

Reusable sections = faster help

Copy, paste, support people

Resource blocks, story layouts, and CTAs were built as reusable components—so adding new mental health resources doesn’t require reinventing the wheel (or calling a designer).

  • ~50% reduction in time to publish new content

  • New pages created without layout errors

  • More frequent updates to resources and stories

Gentle guardrails (because chaos is not the brand)

You can’t accidentally break it—and that’s intentional

Fonts, spacing, and colors are constrained just enough to keep everything accessible, legible, and on-brand—even during quick updates.

  • WCAG-aligned typography and contrast maintained by default

  • No “why does this page look weird?” moments

  • Long-term maintainability without policing edits

Mental health resource library

Find what you need, fast—no guesswork required

A searchable, filterable library that helps users quickly zero in on the exact type of mental health support they’re looking for, by letting the filters do the heavy lifting so users don’t have to.

  • Users can successfully locate the right resources, faster.

  • Increased engagement with specific resource types, helping more people access the support they actually need.

  • Reduced frustration for visitors, making the site feel approachable even on stressful days.

iPAd details for two pages.
iPAd details for two pages.
iPAd details for two pages.

Impact

Releasing a new way to connect the community to the resources that can support them.

This website redesign wasn’t about aesthetics—it was about removing barriers to mental health support while respecting the realities of a small, mission-driven team. The finished site helps The Scatter Joy Project reach more people, faster, with fewer ongoing costs.

35%

faster access to mental health resources

3x

more engagement with mental health resources

$

minimal ongoing maintenance costs