← Back to work
Case 04 Nonprofit · Pro Bono

Website Redesign for JABEL

Justice Advocates Battling Exploitation and Lies (JABEL) is a grassroots nonprofit supporting survivors of human trafficking, sexual assault, and domestic abuse. A volunteer UX engagement turned into an ongoing role rebuilding their online presence from the ground up.

JABEL (Justice Advocates Battling Exploitation and Lies) is a grassroots nonprofit helping survivors of human trafficking, sexual assault, and domestic abuse. It's run almost entirely by its founder, Anabel, who I connected with after signing up to volunteer my UX skills through the Taproot platform. She needed help restructuring and redesigning the JABEL website to bring more awareness to survivors and deepen engagement with sponsors, donors, and volunteers.

The redesign unfolded in six phases: a UX audit, defining personas, prioritizing key jobs-to-be-done, defining the information architecture, building wireframes, and building the site itself.

Impact

From a scoped favor to an ongoing role.

The original ask was just to reorganize the IA and build wireframes, but the working relationship with Anabel grew, and I'm now JABEL's acting Tech and Design Lead. My first-principles approach and ability to ask the right questions to figure out what actually mattered brought clarity to JABEL's digital strategy, centered on what the people visiting the site actually need.

Phase 1 — UX Audit & Evaluation

Before touching the redesign, I audited the existing site for friction. Beyond the usability issues, the biggest gap I flagged to Anabel was this: JABEL's impact wasn't clearly demonstrated anywhere on the site, making it harder for both survivors and potential donors to fully trust the organization.

Heuristic evaluation notes annotated over screenshots of the existing JABEL website, flagging issues like an unnecessary welcome pop-up, unclear call-to-action wording, a chatbot of uncertain value, and a media page that functions more like an About page.
FIG. 01Heuristic evaluation notes on the existing site — from an unnecessary entry pop-up to a donation flow that buried its own call to action.

Phase 2 — Defining the Personas

To start, I wanted us aligned on who actually visits this site and what they're trying to do. I ran a persona-definition workshop with Anabel covering four groups: Survivor, Donor, Volunteer, and Partner. Anabel is a survivor herself, and has also worked with each of the other three roles — so rather than running a full round of discovery interviews, a focused workshop was the right-sized method given the timeline and how much she already knew firsthand.

Persona card for The Survivor: currently or has been a victim of human trafficking, sexual assault, and/or domestic violence; seeking immediate resources, support, and a safe path forward, but cautious and easily overwhelmed.
FIG. 02The Survivor — determined to change their situation, but cautious, and easily overwhelmed by anything that feels bureaucratic or unsafe.
Persona card for The Donor: an individual or company representative who wants an easy, secure way to give, and needs to see clear evidence of impact before trusting the organization with payment information.
FIG. 03The Donor — empathetic and conscientious, but won't give without clear evidence the money goes somewhere real.
Persona card for The Volunteer: eager to contribute time and skills to a mission-driven organization, but uncertain how best to get involved or how much time it will take.
FIG. 04The Volunteer — motivated, but needs a clear, low-friction path into actually helping.
Persona card for The Partner: a representative from another organization working in the same cause area, looking to confirm JABEL's credibility and start a conversation about collaboration.
FIG. 05The Partner — exploratory, looking to confirm credibility before proposing a collaboration.

Phase 3 — Prioritizing Key Jobs-to-Be-Done

With the personas settled, I led a brainstorm with Anabel to define and categorize each one's goals and key tasks, then used affinity mapping to group them. The groups started taking the shape as potential website sections. I deliberately avoided splitting everything strictly by persona since some needs (e.g. establishing credibility through visible impact) realted to all four.

Affinity map clustering goals and tasks into groups: About JABEL, Survivor Resources, Ways to Contribute, and Establishing Credibility, with starred items marking top priorities.
FIG. 06Affinity-mapped goals and tasks, already taking the shape of future site sections.

From there, everything went into a spreadsheet to prioritize, which served as the basis for the information architecture that followed.

Spreadsheet prioritizing goals and tasks by P0, P1, P2, mapped against primary personas (Survivor, Donor, Volunteer, Partner) and category, such as About, Seek Support, Impact, Donate, and Events.
FIG. 07Goals and tasks prioritized by urgency (P0–P2) and mapped to the personas they serve.

Phase 4 — Defining the Information Architecture

With everything listed and prioritized, the IA came together quickly. The real decisions were about what deserved to be a top-level page, and how the parent-child relationships should work.

Key decisions & recommendations

  • Lead the front page with JABEL's focus on thriving, not just surviving — helping people not only get out of harm but build a life they actually control. This is what sets JABEL apart from other organizations in this space.
  • Be specific — survivor resources on the front page, measurable impact, real survivor stories and quotes. Specificity builds trust, for survivors and donors alike.
  • Emphasize the crisis hotline and exactly how to use it — call or text, and a real person on the other end, not an automated system.
  • Give Donate its own top-level page, reachable from anywhere, especially once there's content explaining what a donation actually funds.
Sitemap with Home at the top, branching into About JABEL (Our Story, Our Impact, Media & News), Survivor Support (Crisis Hotline, Resources, Submit a Report), Donate, Get Involved (Events, Volunteer, Partner), and Contact Us.
FIG. 08The resulting information architecture included five top-level sections, each scoped to a clear job.

Phase 5 — Creating Wireframes

Before wireframing, I did a quick competitive scan of other nonprofit sites, using Gemini to surface examples that included a crisis hotline, to see how they guided someone from the homepage to actually picking up the phone.

Homepage wireframe with a hero section reading 'Ending Lies & Empowering Lives,' a crisis hotline banner, Our Mission and Resources We Provide sections, a survivor quote, and a sponsors strip.
FIG. 09Home
About JABEL wireframe with a mission statement, a 'Beyond surviving, we focus on thriving' section, the founder's story with an embedded video, an impact metric, and a Media & News section.
FIG. 10About JABEL
Survivor Support wireframe with a prominent crisis hotline section reading 'If you need help, we're here for you,' call and text buttons, and additional resource cards for housing, legal support, reporting a crime, and sharing a story.
FIG. 11Survivor Support
Donate wireframe with a 'Join Us in Making a Difference' headline and a donation form offering one-time or monthly giving at preset amounts of $25, $50, or $100.
FIG. 12Donate

Phase 6 — Building the Website (in progress)

JABEL is moving off its current hosting service, and I'm currently evaluating alternative services. Main considerations are how lightweight it is to maintain technically, how much flexibility it gives on visual design, and how well it handles heavy text content for a future blog. Here's an early snippet of the site I'm prototyping in Canva. More to come.

High-fidelity homepage prototype in Canva, with the headline 'Ending Lies to Empowering Lives' over a photo, mission copy, a crisis hotline banner, an Our Mission section with a survivor quote, and a sponsors strip.
FIG. 13An early high-fidelity prototype of the new homepage, built in Canva.