Safe Horizon

An in-depth retrospective on the website redesign

 Working closely with the client, my team and I at Ironpaper worked on the website redesign for Safe Horizon, a leading national nonprofit that provides support and justice for victims of crime and abuse.

My role: UX, UI, Branding

 
 
SafeHorizon_banner.png
 

The Brief

We aimed to improve the web and mobile experience for clients, donors, and professionals. Our high level goals included:

 Connect users to the programs and services available through Safe Horizon and its partners

–– Increase online donations, repeat site visitors, and advocacy of Safe Horizon

 Showcase a wealth of resources that lends to the authority of Safe Horizon

The previous Safe Horizon website


Strategy

Surveys

After conducting initial interviews with the Safe Horizon staff, I helped create surveys to disseminate to our target audiences: donors, professionals, and clients. We aimed to measure successful and unsuccessful sections of the current site, and to learn how users were using the site.

Considering how these groups might access Safe Horizon information, we decided to use 3 different survey methods to reach each persona:

  1. Email newsletter for donors
  2. Site-wide pop-up link for professionals
  3. Print surveys for clients

It was crucial to account for language and digital literacy. Our goal was for all target users to participate in the survey, whether it be in digital or print format (available in English and Spanish).

 

During one of our brainstorming sessions, we created content buckets and observed where personas were overlapping in terms of their needs. Exercises like this not only helped us define personas and user stories, but also allowed us to get started on content strategy.

Personas and User Stories

Based on newly gained insights, I aided in creating personas to represent clients, donors, and professionals. Developing rounded personas and user stories helped illustrate who, why, and how users are interacting with the site.

–– Clients

The users that Safe Horizon services directly; includes victims of violence, friends and family of victims, and potential victims of violence.

–– Donors

The users who give as they are inspired by the mission and impact of the organization; includes corporate sponsors, individual donors, and foundations.

–– Professionals

The users that access information from Safe Horizon; includes social workers, policy makers, community leaders, and students.


Wireframes and Content Design

For any project, I aim to create detailed hi-fi wireframes with real content whenever possible. I’ve found that real content often informs UX decisions, helping to prevent surprises later in design and development.

Of course, flexibility and iteration are required throughout the design process since content is bound to change even right up until launch, and likely right after.

This practice proved successful when creating the 7 Issues Landing Pages (ILP), which are distinct resource pages devoted to a single issue. Naturally, the ILP wireframes evolved as content was continuously crafted and refined.

 

Homepage

Homepage

Issues Landing Page

Issues Landing Page

Visual Design

 

After rounds of user testing and wireframe iterations, I began visual design. One of the challenges was designing without access to images of real clients, since anonymity is crucial for Safe Horizon clients.

To avoid using stock photos in the design, I decided early on to rely on color in order to create a modern look and feel.

 
 

Homepage

 
 
 

To visually distinguish the issues from one another, and to function as tags, I incorporated color coordination that is seen throughout the site.

 
 
 
 
 
 

Before implementing this, I prepared a color scheme with multiple color combinations; I aligned the colors with national movement colors and also considered the issues in relation to the demographics they target. Once again, careful planning successfully translated into meaningful design.

 
 

Issues Landing Page

 
 

Thanks for reading!