National Council on Child Abuse and Family Violence
RWD | UI Redesign Case Study
Project Overview
NCCAFV is an American non-profit organization that is serving families seeking local community prevention, intervention and treatment for child abuse, spouse/partner domestic violence, and elder abuse and neglect. The goal of this project was to redesign the NCCAFV website with a focus on the information architecture as well as the mobile channel experience design to make navigating through the site easier and more effective.
The Problem
Overwhelming amount of text and information making it difficult to find the information needed
My Role
I designed the user experience and interface of the website with a team as apart of the GWU UX/UI Bootcamp and performed the following tasks:
-
Research
-
Contacting Stakeholders
-
Sketching and Wireframing
-
User Testing
-
Prototyping in Figma​
Timeframe
2 weeks.
Design Process
Empathize
Define
Ideate
Prototype
Test
Design Tools
Research
The National Council on Child Abuse & Family Violence
The NCCAFV website helps family violence victims to get local referrals to reporting or treatment assistance in their city, county, or state. This process of anonymous online access to helpful local information is preferable to most victims rather than contacting helplines or hotlines.
The NCCAFV is serving families seeking local community prevention, intervention and treatment for child abuse, spouse/partner domestic violence, and elder abuse and neglect.
Website Analysis
My team and I went through the current site and conducted a heuristic evaluation.
-
Change/make logo smaller
-
Change website’s style to a calmer style.
-
New navigation headers and fixing dropdown spacing...sponsors tab, instead of at the bottom of the screen.
-
Add a search bar
-
Condense heavy text
-
Add a sticky escape card
-
Fix footer
-
Move to footer
.png)
-
Adding breadcrumbs
-
Select state dropdown to condense text
Usability Testing
After reaching out to the stakeholders it was clear that being able to remain anonymous is very important for the users. The stakeholders have previously added a chat function to the site, but this was not utilized by the users.
As we were seeking qualitative data, we decided to perform usability test with specific tasks, as well as interview questions to gain as much insight as possible while respecting the users need to remain anonymous.
​
Sample of Questions:
-
What sites do you use often?
-
What brings you joy during the day?
-
If you were looking for help, what would you need from a site like this?
Affinity Diagram
Once we conducted the usability tests, we accumulated all of the user responses in Miro. My teammates and I went through all of the responses and started categorizing them into relevant groups.
It was evident that the current website had an overwhelming amount of information for users to digest. The outdated style made it hard for users to know if the website was still live and working. A website that is intended for with domestic abuse and neglect victims should make the users feel safe and reduce anxiety. It was clear that this website needed a redesign.
Definition and Ideation
Prioritization Matrix
Following the affinity diagram, my team and I ideated potential design solutions that would resolve some of the frustrations users were feeling. We used the 'I like, I wish, What If' method to brainstorm possible solutions. We then prioritized these ideas on a high value, high effort, low value, and low effort matrix. This was all done on Miro.
User Insight
This anonymous user needs a safe and trustworthy place where they can get reliable information and help to prevent further abuse. During user interviews/testing, we discovered that this user, who often is stressed and scared, wants help but is afraid they will be recognized. Therefore we believe that a well organized website that ensures their anonymity will ease their mind and help them feel confident in their decision on seeking help, and that we might be able to help by making important numbers and links prominent on the website. We might do this by changing the color scheme and adding escape options in case the abuser is watching. Doing this will allow the anonymous user to focus on getting the help they need.
Problem Statement
The anonymous user is experiencing abuse and needs to quickly find reliable information on where to call/contact to get local help. They are stressed and don’t know who they can trust, making it harder to seek the help they need. Our solution should deliver a way for them to easily access local information and contacts that ensures them that it’s secure and reliable.
Competitive Analysis
A competitive analysis was done by comparing direct competitors and indirect competitors to further research any gaps in the market.
Direct Competitors
National Domestic Violence Hotline
Strengths​
-
Easy to find and straight to the point information.
-
Explains how to help others in need.
-
Resources to understand and learn how to act in abusive scenarios.
-
Weaknesses
-
"Donate" button hard to find
La Casa De Las Madres
Strengths​
-
24/7 Help
-
"Donate" button easy to find
-
Offers training on "Prevention Education"
-
Weaknesses
-
No straight info on what to do in case of domestic violence.
Indirect Competitors
National Coalition Against Domestic Violence
Strengths​
-
Events to get funds
-
Many ways to get involved
-
"Donate" button easy to find
-
Information available on how to get help
-
and how to help
-
Calming theme
Weaknesses
-
Home page too focused on events and other information not interesting for people in need.
Futures Without Violence
Strengths​
-
A lot of useful information that stays up-to-date
-
Information is organized well
-
Weaknesses
-
Very focused on funding rather than help and information
Storyboard
We presented the user journey by creating a storyboard of the persona
Card Sorting
We card sorted with 3 users to better fix the navigation
User 1
User 2
User 3
Site Map
Prototyping
Sketches
To begin the prototyping phase we sketched out our design solution ideas this enabled collaboration and creativity. We were able to get our ideas out on rough sketches worrying more about functionality than aesthetics.
Once our ideas were out on paper, we chose what we liked best from each design and built out simple wireframes. Again, the wireframes served to show functionality rather than aesthetics. Upon building out wireframes, there were some features we wanted to test with users before moving forward to mid-, and high-fidelity prototypes.
A/B Testing
A/B testing allowed us to test different features and different placements of components to see what the users preferred.
Wireframes
Style Tile
Testing & Iterating
RWD Mockups
Final Thoughts
Designing for an anonymous user posts numerous challenges in terms of research. The sensitive subject has forced us to think of new ways of how we can gain insight into our users needs and wants, without leaving our user exposed.
The next steps would be to dig deeper into our users behavior on the site, and how the user responds to features like the emergency button and escape option, and gain more insight into which additional features would be useful.