Case Study: Women's Resource Center

The Process

Research

Proto-Persona
User Interviews

Define

User Persona
User Insights
Problem Statement(s)

Ideate

Empathy Map
Heuristic Evaluation
Card Sorting
Site Map
Storyboard
User Flow

Prototype

Sketches
Wireframes
Clickable Prototype
UI Style Guide

Testing

Usability Tests
Wireframe Testing
Prototype Testing

Background

Women's Resource Center

This is a non-profit organization that specializes in helping women and families who have been exposed, or a victim of domestic violence. They also have sister programs such as Nia's Place and Safe House.They provide resources and help to those in need as well as making the option available to volunteer and donate to the cause.

Role:

UX UI Designer

Duration:

2.5 weeks

Research

Proto-Persona

Interviews

We conducted 2 interviews as a group with employees at the corporate level, one a Director of Operations and the other a Director of Development. These two interviews were enabled us to gain insight into who our user is. You can view transcripts and audio of interviews.

Affinity Diagram

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Affinity Diagram

During the creation of the affinity diagram, the information from the 2 interviews and secondary resources were organized into 10 groups. Those groups were pain, children, demography, site traffic, site design, campaigns/programs, site content, topics, tone, and information architecture.

Affinity Diagram

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Define

User Persona

User Insights

User Insight 1

User Insight 2

User Insight 3

Problem Statement

New volunteers need to be able to see, respond to, and sign up for events via the website because they prefer to interact electronically rather than having human contact.

How might we redesign the WRC website in a way that encourages volunteers and donors to interact directly through the site in order to appeal to a younger demographic?

Ideate

Empathy Map

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heuristic Evaluation

A heuristic evaluation of the site was done first to find out the areas that could be improved upon and which areas they are currently doing well in.

Feature Prioritization Matrix

As a group, we decided which ideas fell in the different quadrants, then we took the ideas in the high priority high impact section.

Card Sorting

After we had card sorted, we asked two women to card sort the current site to see what they would come up with during the exercise. After the exercise, we received feedback as to why they grouped it the way they did. We took their responses as well as what we had come up with and proceeded to site map.

Site Map

Top Navigation and Info

After the card sorting process, the top navigation was simplified to 3 top navigation: About Us, Get Help, and How to Help. The Chat Now option is a sticky nav that enables the option to chat with a live person.

Footer

The footer was also simplified to include the most important information.

Value Proposition Statement

Creating a safe space, empowering survivors,
and transforming lives to end domestic violence once and for all

Storyboard

Userflow

Initial

Final

A user who wants to volunteer had two options to consider. They could either select a one time event or view an opportunity which could be a longer role. As a result, the user flow had to be adjusted.

Prototype

Sketches

As a group we came up with sketches and ideas we though could be implemented.

Wireframes

Homepage

Volunteer page

High-Fidelity Prototype

The high fidelity demo to the right shows our redesign on the current website. The hotline was placed on the top right, and the top navigation have now been simplified to 3 main topics. The option to go to the volunteer section is located at the top right. The homepage has been revamped as well to display key aspects of what they do. While the volunteer page shows upcoming events that people can choose to be a part of, as well as a way to connect socially. The footer was also updated to include the most pertinent information.

Homepage

Volunteer page

UI Style Guide

Testing

User Tests

A usability testing plan was created so tests on tasks could be conducted for the volunteer page. During those tests, I, as well as my group members realized that the circles on the volunteer page were not intuitive for users to click on to find out more information on roles. Most found the ability to choose and register for an event simple. Others needed more direction on the volunteer page.

Need some help on a project?

You can email me at victory.fejokwu@gmail.com