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
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.
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.
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.
Issues Landing Page
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.
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