Safe Horizon

An in-depth retrospective on the website redesign

 Working closely with program staff, 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 Challenge

We aimed to improve the web and mobile experience for clients, donors, and professionals. Our objectives were to:

 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


Inspiration

Interviews, Surveys, and Data Analysis

Kicking off the discovery phase, my team and I explored the challenge further using a mix of qualitative and quantitative research.

Through individual and group interviews with program staff, we learned more about org goals and requirements. Our ongoing engagement with the staff helped inform the design challenge and strategy for creative problem solving throughout the entire process.

To learn more about users' goals, motivations, and frustrations, we disseminated surveys to 3 user types: donors, professionals, and clients. Considering multiple user journeys, language, and digital literacy, we deployed surveys via:

  1. Email newsletter aimed at targeting donors
  2. Site-wide pop-up aimed at targeting professionals
  3. Print surveys (in English and Spanish) aimed at targeting clients

Additionally, through analytics, we measured successful and unsuccessful sections of the current site, and gained deeper understanding of how people were using it.

 

During a brainstorming session with program staff, we created a triple venn diagram and analyzed where user needs were overlapping. Such activities engaged the stakeholder early on, and helped all of us understand the service users better.

During a brainstorming session with program staff, we created a triple venn diagram and analyzed where user needs were overlapping. Such activities engaged the stakeholder early on, and helped all of us understand the service users better.

Personas, User Stories, and Use Cases

With themes and insights emerging, I helped create personas for clients, donors, and professionals. Developing user stories and use cases helped illustrate who, why, and how users were interacting with the site.

–– Clients

The users that Safe Horizon services directly, including 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, including corporate sponsors, individual donors, and foundations.

–– Professionals

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


Ideation

Wireframes, Content Design, and User Testing

For any project, I aim to create detailed high-fidelity 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.

During this highly iterative process, this practice also ensures my entire team, as well as the org's program staff, stays engaged in testing, refining, and shaping the MVP.

In the example of the Issues Landing Page, which is a template dedicated to each issue area (eg: domestic violence), real content and rapid prototyping helped solidify the wireframes throughout the ideation phase. 

 
 

Homepage

Homepage

Issues Landing Page

Issues Landing Page

 

 Visual Design

After rounds of user testing and wireframe iterations with program staff and clients, I began visual design. One of the challenges was designing without access to images of real users, so as to respect client privacy.

Rather than using stock photos in the design, I decided early on to rely on color in order to create a modern look and feel. Color is also used as a visual cue in content and navigation throughout the site.

 
 

Homepage

 
 
 

More specifically, color is used to represent each issue area. In creating a meaningful color palette, I aligned the proposed colors with those of national movements, and also considered color associations to specific demographic (eg: blue and pink as they relate to youth).

 
 
 
 
 
 

Below, the Domestic Violence landing page exemplifies how purple is used in navigation and content.

 
 

Issues Landing Page

 
 

Thanks for reading!