The Domestic Violence Project

solution

Accessible, empowering, and thoughtful user-centered design

The site highlights the amazing work that DVP continues to achieve, in addition to creating a sense of empowerment and support in the domestic violence community.

Client confidentiality and safety

Working with the Domestic Violence Project (DVP), we realized that a major design constraint we would encounter dealt with client safety and confidentiality during our research phase. In order for my team and I to create an impactful and meaningful design we were in constant communication with Shae, to better understand the organization and their clients. 

Exploring the problem space included conducting several interactive workshops between our design team and the DVP team such as this empathy mapping exercise. By including DVP staff, we discovered more about their clients and identified thought patterns to assist in empathizing with them. This was an example of how my team and I were able to learn more about the DVP client without stepping beyond the client safety and confidentiality boundary.

Building a blueprint of the site through evaluative research

We performed a card sort activity across 5 participants, which supported our initial tree testing research. Similar to the tree test, The results helped us identify patterns of how people categorize DVP services which led to better content discovery with the site and overall improved navigational structure.

To solidify our decision, we utilized UX Tweak’s unmoderated tree testing function to demonstrate potential flows and usability of the navigation. We tested a total of 10 participants and from that research we were able to establish a form of information hierarchy through a sitemap by providing tasks for our participants to complete. 

site goals + features

Building personas and flows

From our research, we developed two personas: Sam, a survivor/victim of domestic violence looking to contact DVP anonymously and find a service or solution that best fits their situation. And Taylor, an ally and advocate for domestic violence survivors/victims looking to get involved locally through DVP.

For the main design of the site, we prioritized our persona Sam, a survivor/victim of domestic violence, and their needs and motivations. We were able to accomplish this by synthesizing our research into core features and content hierarchy.

Applying progressive disclosure and patterns to avoid content overload

We learned that the majority of DVP’s work revolves around partnerships with local and government services. Therefore we knew that the website would need a major focus on the organizational structure and introduce progressive disclosure immediately to prevent the user from being overwhelmed depending on their situation. Here are examples of moments and core features throughout the site to reiterate these themes.

• Quick exit button: An important feature present on the top of every page to allow the person browsing DVP to immediately redirect to another weather.com. This quick exit option was vital to ensure safety for domestic violence victims/survivors that may user the site.

• Step by step illustration: After speaking with Shae and the DVP team, we learned that many people who called were confused about how DVP can help their situation. We wanted to provide an upfront explanation and visual of what happens when you potentially contact DVP.

• Repetition of emergency hotline information: We present the user with the emergency hotline information thoughtfully throughout rather than forcing them to search for it.

• Community engagement: Throughout the site, we strategically placed newsletter signups and flows for the website visitors to engage with the DVP community.

wireframes + prototyping

Establishing design standards and principles

A huge part of the design process is the ideation and iteration phase. A mentor once told me designs are never done because there is also room to improve what already exists.

We held multiple design workshops, one being where my team and I each sketched possible solutions based on insights from our user research and provided feedback on each concept. 

Low and high fidelity wireframes were then created for each page, which all underwent rapid prototyping and multiple rounds of usability testing and documented before final designs were completed. To test the functionality of the site, we developed three prototype versions that were improved based on feedback from usability tests. Below is a visual of the development of the DVP landing page and changes made across each version.

visual design + UI

Making the client experience cohesive

For visual design and UI, I focused on making the client experience seamless and cohesive by defining the brand style and tone, developing and maintaining a style guide, and creating icons and graphics inspired by already existing ones provided by DVP.

In one of our client meetings, we presented a style tile of our proposed visual direction to ensure it aligned with DVP’s vision - more abstract graphics rather than images to avoid situations that could be triggering or inappropriate for the site.

In addition to this I created a style guide beforehand for our team to use as reference to ensure consistent branding and design throughout. This style guide touched upon typography and color that aligned with accessibility guidelines, layout and grid references, in addition to components and any visuals that were used.

results + impact

The first Domestic Violence Project site was officially launched in November 2021 and advertised across all marketing channels. 

Here was some feedback from the DVP staff during the launch party.