Embedded Files
Client
Client
Between Friends, a nonprofit dedicated to preventing domestic violence and ending the cycle of abuse
Audience
Audience
Users who are seeking information about programs and / or resources on Between Friends’ website
Timeline
Timeline
April 2021 - August 2022
My role
My role
UX Research, UX Design
Collaborated with a team of UXRs, UXDs, and Developers from Code for Chicago
The Problem
The Problem
Between Friends could only make content changes on the website, but not to the layout. If they wanted to make changes beyond content then they needed a Developer to make these changes for them. With no web development staff, this made it difficult to sustain and scale their website in the long term.
Additionally, Between Friends suspected that they were not providing an optimal user experience for their users.
The Solution
The Solution
Our proposed solution was to transition Between Friends’ website to Elementor to allow the staff the ability to update and scale the website without extensive development knowledge. Our UX and UI designers also made enhancements in accessibility and increased the visibility of safety features to provide a better user experience for website visitors.
Planning and approach
Planning and approach
We wanted to gather more insight into the problems, so we conducted user interviews. We also opted to facilitate an accessibility audit. While this research was happening on the UX side, our developers worked to replace their backend with a more user friendly visual editor while rebuilding their website using this tool. They determined Elementor would be the best candidate for this work, and began converting the website.
Discovery and support marketing campaign
Discovery and support marketing campaign
At the onset, Code for Chicago gathered more insight on the problem through discovery-focused meetings with employees of Between Friends. We also focused on supporting their Fall 2021 marketing campaign by updating the codebase to reflect their needs at the time.
User Research and accessibility audit
User Research and accessibility audit
Due to client confidentiality, our team facilitated user interviews with Between Friend’s case managers and therapists to gather more insight about their clients to identify website pain points.
Concurrently, we facilitated an accessibility audit using the A11Y Project checklist, compiling these high-level insights into a research report.
Project requirements
1
1
Our research showed that users may be under duress or in unsafe or public environments while accessing the Between Friends website, which meant the website needed to be scanable and very easy to parse information from.
2
2
We also noted many first time visitors didn’t understand what Between Friends offered, so we chunked out the services on the homepage to make this more immediately obvious.
3
3
As the employees also shared with us, they didn't have someone on staff who was familiar with website management, so we also needed to ensure making updates to the website for programs and services was easy to do.
Visual builder
Visual builder
With the website built on a codebase, this required Between Friends to hire out a developer to make significant UI changes on the website. The development team stripped away the codebase and replaced it with Elementor. Elementor provides the organization a lot of autonomy and freedom to update the website. We wanted to set it up in a way where they can drag and drop premade components and patterns on the page.
Spanish translation
Spanish translation
Additionally, one of the major pain points for users was a lack of Spanish translation. In one of the few custom solutions for the website, we helped Between Friends identify an automatic translation service and designed and developed a language toggle in the navbar.
Initial home page (left), and its redesign (right). The team designed custom illustrations to communicate specific services to help first time users understand what the nonprofit could offer as quickly as possible.
Initial services page (left), and its redesign (right). For specific service detail pages, we focused on optimizing character line length and including a content hierarchy to reduce cognitive load.
Previous navigation design (top) and the updated one (bottom). By repositioning the safety exit, we made it more prominent and easier to find for users who need it. The new button also wipes out the history on Chrome browsers. Increasing the visibility of the safety button made it easier for users to exit the site quickly.
Outcome
Outcome
The website went live in the summer of 2022. In addition to the deliverable, our team provided Between Friends with the design assets (via Figma) and video tutorials on how to manage and update Elementor.
Page updated
Google Sites
Report abuse