EXPLO

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 EXPLO, a leading national nonprofit that... over the past 35 years.

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 EXPLO 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).

 
 

“If it hadn’t been for EXPLO, I might have lost my voice in the crowd of public school. I’m happy that such a program like EXPLO exists for kids who were like me. Thanks EXPLO for giving me my voice.”
– Student, EXPLO at Yale

“The notion of ownership is a really big piece of the EXPLO experience, both for staff and students.”

– Staff

“I think of EXPLO as an educational think tank.”

– Trustee

 

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

 
 
 

A closer look at the hero

CTA invites users to start the program exploration process. Users identify as either a student or parent and grade if a student.

 
 
 
EXPLO_hero.gif
 
 
 

Text

 
 

Program Page

 
 

Courses Page

 
 

Thanks for reading!