SAFE of Columbia County: A Community Grant Initiative
SAFE of Columbia County (SAFE) is a nonprofit agency that helps people escape abusive situations and educates the community about domestic and sexual violence prevention. SAFE’s previous site was informative but the design was outdated and the site wasn't supported by a content management system (CMS). Our job was to redesign the site and update the information architecture to support SAFE's important work in the community.
SAFE asked for a neat, clean, simple and easy to navigate website. We strive to make all our sites meet those goals by understanding user needs, creating a clear information hierarchy on the page, and following best practices for usability. Since the previous site's content was mostly informational pages with some basic forms, we decided Wordpress made the most sense as a CMS platform.
Information Architecture Changes
The original navigation had generic terms that didn't really communicate what SAFE offers the community:
About Us | Services | Give | Resources | Contact Us
Most of the site content was living in the Services section of the site, so we broke that section out into the main menu. This really helped to bring meaningful terminology to the navigation for stronger information scent:
Advocacy | The Starting Place Shelter | Prevention | About Abuse | Contact
We also created a second navigation for the site's three main CTA's: "Get Help", "Donate" and "Volunteer". With the new architecture the site's main users -- people looking for services and people who want to support the organization -- can quickly hone in on their area. The About information is still on the site, linked from the footer area.
Graphic Design & UX Strategy
We knew two things on the site needed high prominence because users might only have seconds to find them: the help line phone number and the escape button. Users can find the help number in upper left, the middle of the home page, and under the "Get Help" link in the navigation. The bright yellow "Leave this Site" button is in a sticky nav, so it is always at the top right of the screen, even when the user has scrolled down.
Our challenge with imagery was to design for emotion but remain authentic. We couldn't show images of people in the middle of an abusive situations without creating a tone of alarm or despair, but we couldn't show people looking shiny and perfect either. For photography we looked for "survivor" images we could pair with thank-you notes from SAFE's clients to show how SAFE's work has made a difference in people's lives. We also used subtle Pacific Northwest imagery and icons on the site.
Home Page Before & After
The original home page had a lot of paragraph text with small headings. "Give" and "Volunteer" stood out, but rest of the text was hard to scan. With the new architecture, users could see the "Donate" and "Volunteer" CTA's in the navigation, so we could move that content off the home page and concentrate on SAFE's mission. The larger headings and sans-serif font make the redesigned site much easier read. We also added a list of donors to the home page for social proof.
We're thrilled that SAFE has a useful, modern website they are proud of.