Increasing success rates of users in need.
Role: UX Designer
Duration: 3 weeks+
Challenge: Collaborative project to rework the user flow and interface of the Helping Hands Against Violence website.
Responsibilities: Design research, Visual Design, Prototyping (desktop & mobile)
How can we increase the success rate of users finding assistance, improve volunteer rates, and encourage more donations to the non-profit?
HHAV is a non-profit in Hood River, Oregon that serves survivors of domestic violence. Their website is a hub of resources that survivors can use to seek safety and find resources. Their website is the main source of information for volunteer events and for providing donations to the organization.
The main objectives for this project were to showcase HHAV's mission through its website design and make it easy for users to access time-sensitive information. Since HHAV is a small organization that depends on volunteers and donations, we aimed to encourage visitors to explore the informational sections of the website.
The Problem:
The current web design for HHAV is very outdated. The inconsistencies across the website make it difficult to understand where you are and where you are going. The sensitive nature of the website requires users to be able to quickly and intuitively navigate the website - as users are frequently survivors of domestic violence and may only have a few moments to find the resources that they need.
Our Approach:
As a small design team, we utilized an agile framework to accomplish the redesign within the given timeframe. We designed our website to work responsively, but we prioritized the mobile design as most users visiting the website are doing so from their mobile browsers.
We conducted initial user testing to benchmark the current success rates of users on the website. We continually iterated our design as we worked to create an inconspicuous website that would effectively aid survivors in getting the help that they needed.
research + user interviews
✹
research + user interviews ✹
Understanding our user was especially important when designing for HHAV. Since this organization serves a demographic that may be in immediate danger, we wanted to truly understand why users visit HHAV before moving into designing.
We uncovered three reasons that users might visit the website
→ They are domestic violence survivors and need immediate resources.
→ They are concerned about a friend or family member and need information on domestic violence situations and resources.
→ They are looking to volunteer or donate to the organization.
Doing an analysis of the website revealed some significant contrast issues across all pages. Considering this is a non-profit organization, they have even more reason to be ADA-compliant. Some text was completely illegible due to contrast and size. We know the organization wants every user who visits their website to be able to use it quickly and efficiently, without risking their safety, so we prioritized correcting these issues first.
There were also some usability concerns with the navigation of the website. It was separated into three categories - the more category has its own sub-categories but the hierarchy is not clear so it is easily missed.
Our initial user-testing confirmed our predictions as far as usability concerns go. 30% of users were not sure how to find resources on domestic violence and only 70% were able to find immediate help resources.
lo-fi + user testing
✹
lo-fi + user testing ✹
When building the lo-fi wireframes we wanted to ensure the homepage remained non-descript to protect our users. We chose a structure that felt similar to a blog or generic healthcare page.
For the mobile layout, we wanted to keep it simple and prioritize the most time-sensitive content to be readily accessible. This project was unique in that our users are potentially in an unsafe situation with limited time or access to their phones or computers.
We moved forward with user testing on our lo-fi prototype and we were very pleased with the improvements to user success rates.
hi-fi prototyping
✹
hi-fi prototyping ✹
For our hi-fidelity prototype, we wanted to bring more life to the homepage. The original layout of the website felt empty.
Considering users need to access information quickly, we made sure to include the most time-sensitive information easily accessible on the homepage.
Due to time constraints, we focused on building out the pages that were relevant to our user testing.
We maintained a color palette similar to their current branding, adding contrasting colors for readability. The teal and purple colors are important to HHAV as they represent domestic violence survivors.
Future Plans
We met with the director to present our proposed changes and she was very pleased with the changes we made. We hope to move forward with volunteering our time to help HHAV implement these changes.
This project was particularly rewarding, considering the significant impact it could have on domestic violence survivors in Hood River. It presented unique challenges as we navigated how to arrange the information on the website and how to ensure users could easily “quick exit” the website as a safety measure.
Moving forward, we would love to continue to improve the structure of the website by conducting more in-depth user testing on our proposed changes. We would like to structure a usability test that would allow us to test exactly how long it takes a user to find time-sensitive information to ensure our users get the help they need.