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
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
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:
- Email newsletter aimed at targeting donors
- Site-wide pop-up aimed at targeting professionals
- 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.
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.
The users that Safe Horizon services directly, including 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, including corporate sponsors, individual donors, and foundations.
The users that access information from Safe Horizon, including social workers, policy makers, community leaders, and students.
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.
Issues Landing Page
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.
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