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
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).
“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.”
“I think of EXPLO as an educational think tank.”
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.
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.