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
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
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:
- Email newsletter for donors
- Site-wide pop-up link for professionals
- 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).
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.
The users that Safe Horizon services directly; includes victims of violence, friends and family of victims, and potential victims of violence.
The users who give as they are inspired by the mission and impact of the organization; includes corporate sponsors, individual donors, and foundations.
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.
Issues Landing Page
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.
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