Accessibility & UX

Between Friends

Rebuilding a website the client could finally maintain themselves.

The Client

Equipping communities to end the cycle of abuse.

Between Friends is dedicated to preventing domestic violence and ending the cycle of abuse by equipping communities with the tools necessary for everyone to feel safe and equal in their relationships. Prior to us, they tried other volunteer groups like Taproot but it didn't work out.

The Problem

A website the client couldn't maintain, and no way to know if it was working.

Between Friends could only make content changes to their site, not layout changes. Anything beyond that required a developer they didn't have on staff, putting their ability to sustain and scale the site at risk long-term. On top of that, the client suspected their primary users, donors and clients seeking services, weren't finding what they needed on the site, but had no way to confirm it.

Our Approach

Understand the problem first, then rebuild on a foundation the client could own.

I led this engagement over 16 months with a team of 2-8 designers, 1 Dev Lead, and 1-2 developers. I scoped the engagement around two goals: reducing the obstacles Between Friends faced updating their own site, and improving the site's UX by mapping it against what their actual users needed to do. This meant gathering more insight through discovery, supporting their Fall 2021 marketing campaign with codebase updates in the meantime, then leveraging what we learned to improve the experience and replace the backend with something the client could manage themselves.

Due to client confidentiality, research had to go through Between Friends' own case managers and therapists rather than speaking directly with the population they serve. I defined the research plan and accessibility audit for the team to carry out, reviewing what came back and pushing for more specificity where it was needed.

The accessibility audit, run against the a11y project checklist, found real gaps: roughly 70 of 170 images on the site were missing alt text, much of the content sat above an 8th-grade reading level, color contrast failed WCAG AA standards in several places, and the site lacked visible focus indicators for screen reader users.

Interviews surfaced what different users actually needed: donors wanted clearer information on the organization before giving; clients needed the site available in Spanish, since over half of Between Friends' clients are Spanish-speaking, and a fast, safe way to exit the site in an unsafe moment; third-party providers needed up-to-date program information to refer clients confidently.

Design Ideation

Making the site easier to scan, not harder to use.

The objective wasn't a full overhaul, it was optimizing what already existed using what we'd learned. Research showed users didn't immediately understand what Between Friends did, so I directed the team to redesign the home page to chunk out their services and improve scannability. Optimizing character line length and content hierarchy was a recurring theme throughout the redesign to reduce cognitive load.

The team also increased visibility for the safety exit button, making it easier for users to leave the site quickly. The final version, refined across several accessibility-driven revisions to the button's color and contrast, also clears the site from browser history on Chrome.

Development

Trading a codebase for a tool the client could actually use.

Since the site was built on custom code, any real layout change meant hiring a developer, something Between Friends couldn't sustain long-term. The team stripped that out in favor of Elementor, giving the organization real autonomy to update the site going forward. Working in Figma first, the team built reusable patterns and components that could be dragged and dropped directly onto the page.

Spanish translation was one of the clearest gaps surfaced in research. The team identified an automatic translation service and designed a language toggle for the navbar, one of the few fully custom builds on the project.

Workflow

Keeping a volunteer team moving over 16 months.

Managing a team of designers and developers over 16 months meant staying deliberate about scope. I wrote tickets with clear boundaries, sometimes explicitly flagging where scope creep could creep in, and reviewed submitted work before moving it forward, redirecting it back when it didn't hit the mark. Where the team didn't have coverage, particularly toward the end, on the handoff documentation and final site QA, I stepped in directly rather than let momentum stall.

In general, we met once a week to check-in on progress and I met with the client at least once a month to report back or request feedback. My philosophy in approaching how we assign and break down work for a volunteer project was mostly the same. For this one in particular, since we had so many moving parts, across different products, I encouraged the team to discuss asynchronously; using the chat feature in the relevant product within context of where they were blocked or didn't have capacity: Slack, Trello, Figma, Miro, and Google Doc. This helped with velocity and kept the team accountable to our deliverables.

Outcome

The site went live, and the client could finally maintain it themselves.

The rebuilt website launched in Summer 2022. Alongside the deliverable, the team provided Between Friends with their design assets in Figma and video tutorials on how to manage and update Elementor going forward, so they wouldn't need outside help for routine changes again.

Years have passed and while the site has slightly deviated from what we created, the core functions exist to this day.