Safe Horizon Website Redesign

How might we improve the user experience for clients, donors, and advocates accessing resources for victims of crime and abuse?

Goal: To connect clients to services, increase web donations, and centralize resources for learning and engaging on SafeHorizon.org.

Team: Designer (Me), Project Manager, Developers, Marketers

 
 
SH Header.png
 

Discovery Phase

Research

Interviews, Surveys, and Data Analysis

To understand organization wants and needs, we interviewed program staff on the onset of the project. Working closely with the Safe Horizon team throughout the process also helped inform design decisions and iterations up until–and immediately after–launch.

To learn more about users' goals, we conducted targeted surveys with donors, professionals, and clients. Considering multiple user journeys, language, and digital literacy, we deployed surveys through newsletters, site pop-ups, and print surveys.

We also measured the performance of the current site through analytics to gain a deeper understanding of how people were using it.

 During this brainstorming exercise with program staff, we created a triple venn diagram to compare user needs.

During this brainstorming exercise with program staff, we created a triple venn diagram to compare user needs.

Synthesis

Personas, User Stories, and Use Cases

With themes and insights emerging, we created personas, user stories, and use cases for clients, donors, and professionals. These tools helped illustrate who, why, and how users interact with the site.

–– Clients: Use Safe Horizon services directly, ie: victims of violence, friends and family of victims, and potential victims of violence.

–– Donors: Are inspired by the mission and impact to donate, ie: corporate sponsors, individual donors, and foundations.

–– Professionals: Access information from Safe Horizon, ie: social workers, policy makers, community leaders, and students.

 

Build Phase

Build.png

Ideation and Prototyping

Wireframes, Content Design, and User Testing

Working closely with the marketing team, I created high-fidelity wireframes with real content (see below). I’ve found that real content often informs design decisions, helping to prevent surprises later in design and development.

After presenting and soliciting feedback on the wireframes, I made refinements and created a clickable prototype to test with the internal team and program staff. Not only was it crucial to get client input, but it was also important to get the perspective of different team members while co-designing, testing, and refining the MVP.

 

Homepage

  Homepage

Issues Landing Page

  Issues Landing Page

 

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

 
 
 

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!


 

Previous: Turnstyle / Next: #PutTheNailinIt