YWCA

2

YWCA

Great Lafayette Area

Design Document Sponsor: Tia Rucker

Spring 2017 Purdue CGT Experience Studio Instructor: Professor Nancy Rasche

Caleb Honegger, Christina Christian, Justin Campbell, Si Qiu, Watson Wang

YWCA

Contents

2

Table of Contents 3

9

Problem Overview

Usability Testing

3 3 4 4 5 7

9 10

Company Sponsor

Testing methods Findings

Executive Summary Problem Statement/Goals Team Previous Website

12

15

Research

Mockups

12 Primary Research 13 Secondary Research 14 Taskflow

15 16 17 18

Sketches A/B Testing of introduction page Initial Mockups Feedback from sponsor

19

31

Prototype

Final Website

19 Overview 20 Style guide 21 High-fidelity prototypes 22 Introduction

31 33 33 34 36 37 36

24 About Domestic Violence 27 Take Action 28 Local Resources

Code guide Website URL Additional concerns from presentation Usability Testing Next Step Final deliverables Project Summary

2

YW CA Project Overview Introduction

Problem Overview YWCA

Company

As the oldest and largest multicultural women’s organization in the world, YWCA (the World Young Women’s Christian Association) has been striving for women’s rights, eliminating racism and empower women. The associa-tion provides safe places for women and girls, builds strong female leaders, and advocates for women’s and civil rights in Congress. Currently it has local branches in over 70 countries around the world, and various programs rela-ted to women’s healthcare, education, childcare, job training, etc.

Tia

Sponsor

Tia Rucker is the Outreach Coordinator at the YWCA Domestic Violence Intervention and Prevention Program. Her duties consist of going into the community and other neighboring counties and agencies to discuss different topics based on domestic violence. Some of the topics she discusses include healthy relationships, teen dating, sexual violence, bullying, and the assistance offered at the domestic violence program.

3

2

YWCA

Project Overview

4

Executive Summary This semester in Purdue’s Human Centered Design and Development studio, our team is working with YWCA’s local association in the Greater Lafayette area to develop a website, our project can be split into two phases: • test the current website, make improvements and finalize the framework.

• define new scopes of the problem through user research and extend the functionalities of the website.

The overall goal of this project is to develop a website that can help YWCA Greater Lafayette reach out to more people in its scope and make the help-ing process more accessible and easier for those in need.

Problem Statement/Goals

Problem: Not enough feedback from users.

Phase

1

Goal: Fix bugs and make improvements based on last YWCA team’s work through user testing. Complete the final implementation of the website.

Problem: TBD

Phase

2

Goal: To understand the problem of a new direction and extend the functionality of the website. By framing a new problem and designing a more solid implementation, the team could expand YWCA’s reach for providing information and support to victims of dating/domestic violence or expand the function of the new website.

2

YWCA

Project Overview

Meet Our Team Si Qiu Si Qiu is currently a junior studying Human Centered Design and Development at Purdue University. She dreams to become a UX designer, exploring the possibilities of human centered design, and turning novel ideas into realities.

Watson Watson Wang is a student at Purdue University. He is currently pursuing degrees in Web Programming & Design from the Polytechnic institute with minors in Computer Science and Art & Design. He works as a freelance design consultant for Purdue CARE this summer. His goal is to ship AWESOME experience.

Caleb Caleb Honegger is a third year student in Web Programming and Design, minoring in Sound Design for the Performing Arts. He is the general manager and webmaster of Wiley Radio, Purdue’s oldest student run radio station, and works as a lab assistant for iTap Labs. He specializes in user centered web development.

Justin Justin Campbell is a student at Purdue University’s Polytechnic Institute studying Human Centered Design and Development. He has worked with organizations in Indiana and across the nation specializing in domestic violence aid in various roles including but not limited to outreach, counseling, and relocation. In addition to working directly with aid organizations, Justin also has many years of training in nonviolent conflict resolution.

Christina Christina Christian is a student of Human Centered Design and Development at Purdue University and a full time experience consultant for Samsung Mobile. She has more than 10 years of experience working with customers and technology. She has shown considerable leadership skills in managing her Samsung team as well as her own busy school schedule.

5

YWCA

Project Overview

6

Team Roles

Si Qiu Project Lead Caleb Honegger Research Lead

Christina Christian Communication Lead Justin Campbell Programming Lead

Watson Wang Design Lead

2

YWCA

Project Overview

7

Previous Website

Color theme: Purple. The fall YWCA team chose to implement purple, the national color for domestic violence, as its main color scheme.

Type font: Sans serif. Sans serif fonts has a “friendlier connotation and would create a less intimidating environment to users”. Rounded shaped are also being implemented for the same purpose. “It creates structure without being sharp or intimidating.”

Logo: “LWDV”. The redesign of the logo from “YWCA” to “LWDV” makes it more obvious to users that this is a resource that is ”intended for residents of the Greater Lafayette area”.

Front page It helps direct users to other subsections. “LWDV” makes it more obvious to users that this is a resource that is ”intended for residents of the Greater Lafayette area”.

Domestic violence To help users define domestic violence.

2

YWCA

Project Overview

8

Options Allow users to customize their own plan in terms of ways to take action and seek for support.

Emergency Help users in a life threatening situation through the national domestic violence hotline.

Plan This is a guide for people who are in need to escape a Domestic Violence Situation.

Local resources local assistance for those looking for support.

2

YWCA

Usability Testing

Usability Testing Testing Methods The purpose of usability testing is to validate our design decisions made to our website. After talking with the last YWCA team members and our instructor Professor Nancy Rasche, we scoped the problems and potential next steps for the first version of the website: • The team need to further validate current design through feedbacks. • Brainstorm and implement new functionalities according to the real needs of our target users.

In order to solve the issues above, we prepared our usability testing through UserZoom, a remote usability testing and UX research platform. A test participant would be asked to imagine themselves in a scenario being assigned by the test, and complete five tasks as to resources they can seek help from on the website. Before the task completion testing, a couple of pre-test questions were also asked to help us identify potential correlations between personal factors such as age, sex and marital status, and options being made in the test.

Think-aloud method was also being used in the usability testing so that the team was able to get insights on specific task performances by asking participants to say whatever comes into their mind while navigating through scenarios. The method also helped us generate ideas in terms of improve-ments and new functions that we can implement. .

9

2

YWCA

Usability Testing

UserZoom task interface (2017)

Findings

10

Test protocol (2017)

YWCA

Usability Testing

11

YWCA

Research

Research Primary research In order to refine and improve the resource information on the website, we turned to primary research. We spoke to representatives of Lafayette Urban Ministries, Salvation Army, and Lafayette Transitional Housing in order to find out more about their services and how they offered them.

We discovered that each shelter/housing location had a different set of needs and requirements.

For instance, Lafayette Urban Ministries is an emergency shelter, but those seeking to stay there will need to check in by certain times in order to receive meals or nightly shelter. Lafayette Trans-itional Housing, however is a program which requires those seeking assistance to go through an application process before being allowed to take shelter there. We learned through contacting services such as Bauer Family Resources and Indiana Family and Social Services Administration that there are many different ways for victims to seek help with things such as food, cash assist-ance, child care, and employment. Each service has different guidelines, eligibility requirements, and other complexities.

12

YWCA

Research

Secondary research In order to provide more information on making an escape plan, we found a list of helpful planning techniques, tips, and advice from the Domestic Violence Hotline’s website. Just a small sampling of the information we found from this site was: • Identify safe areas in the home containing an exit and no weapons. Try to move to these rooms if an argument erupts.

• Do not argue where there are children in case the abuser lashes out at the children.

• If violence is unavoidable, make yourself a small target. Curl into a ball in a corner. Protect your face with your arms over your head, fingers intertwined.

• If possible, have a phone on you at all times. Create shortcuts to emergency contacts, including the police and your nearest shelter.

• Confide in trusted friends and neighbors about your situation. Develop a plan and visual signal for help with these people.

• Practice escaping with your children. Teach them to escape, even without you.

• Plan for what to do if your partner finds out about your plan.

• Keep weapons as inaccessible as possible.

• Make a habit of backing the car into the driveway and keeping the gas tank full. Leave the driver door unlocked and others locked to make for a quick escape.

• Do not wear scarves or jewelry that can be used to strangle you.

• Create several plausible reasons for leaving the house at different times of the day or night.

We also learned through this website that there is a chat feature available for the domestic violence hotline, but it had wait times of more than 10 minutes, so it was not especially helpful if someone were needing to talk to someone quickly but could not speak.

13

YWCA

Research

Taskflow We used a taskflow to describe the entire scope of the system from the point of view of the user.

For “Home page” section, users can easily understand the functionality of the website and nav-igate to other section that based on their need. “About Domestic Violence” section provides more information about domestic violence for people who want to understand what is Dom-estic violence. “Take Action” section provides useful suggestions on what to do if people are in a Domestic Violence situation. “Local Resources” section helps users to find the relevant local resources that are available in Tippecanoe county. If users change their needs, they will be able to easily navigate to other sections. For users who don’t know which section they should go to, they can just read through the website from the order of “About Domestic Violence”, “Take Action” and “Local Resources”.

14

YWCA

Mockups

15

Mockups We developed our initial mockups include multiple sketches of our ideas as well as the low-fidelity mockups of our website. The design decisions overall would be talked in detail further in our prototypes section of the documentation.

Sketches Introduction Page

Local Resources Page

Quick escape button

Emergency hot line services

YWCA

Mockups

16

A/B Testing of introduction page Based on our usability testing, the introduction page is of great importance to indicated the main area of service and our target user, we did a quick usability testing on the initial mockups before moving on to the next steps.

A B Pros: The area of service is more clear to users.

Cons: • The way the introduction has been cut into three sections made it hard for users to go through all of the information.

• Not sure if those three circles are buttons or not.

• White texts on the dark background made it hard for users LWDV: to read the paragraphs.

Pros: Put all the information as a whole to create a sense of unity.

Cons: • Too wordy that many users didn’t read.

• Not sure if those three circles are button. or not.

• Users failed to get area of service.

Safe Exit

Lafayette Without Domestic Violence

Q: What is Domestic Violence?

A:

A one-time to pattern of violence, including controlling or coercive tactics committed by one partner against another that consists of physical, psychological, verbal or sexual assaults mainly caused by the abuser wanting power and control.

More info

Take action

Get help

about domestic violence

discover how to help yourself

from local resources

Click here to leave the site without any trace in your browsing history.

(Pressing ESC works too!)

YWCA

Mockups

17

Initial Mockups Tippecanoe Without Domestic Violence

About Domestic Violence

Take Action

Exit Website

Local Reources

Against Domestic Violence At Tippecanoe County Here are some ways to get help

About Domestic Violence

Local Reources

Take Action

Introduction Page: The design decisions would be talked in detail further in our prototypes section of the documentation.

If you are in an emergency, call 911 immediately.

About Domestic Violence Domestic violence is a pattern of abusive behavior used by one person to gain or maintain control and power over their partner in an intimate relationship

About Domestic Violence Page:

Who is affected?

Domestic violence can happen to anyone. Individuals of any race, age, sexual orientation, religion, gender, economic status, or education level are capable of experiencing domestic violence. It occurs between opposite-sex couples or same-sex couples and can occur between couples who are married, living together, or dating. Those who experience domestic violence are not the only one who are affected by domestic abuse, but also their family members, friends, co-workers, and community. Children who are exposed to domestic violence, especially numerous times, are susceptible to a great number of social and psychological troubles and are more likely to adopt the sense that violence is normal in the home, increasing the risk of becoming abusive

Recognizing Domestic Violence 7KH IROORZLQJ EHKDYLRUV PD\ EH UHG ćDJV LQ LGHQWLI\LQJ GRPHVWLF YLROHQFH ï%\ WKH DEXVHU - intimidation, humiliation, fright tactics, coercion, threatening, hurting; blaming violence on stress, alcohol, drugs, other people, etc; accusing partner of cheating; jealous; limits partner’s freedom ï%\ WKH DEXVHG - Feeling helpless, isolated, or fearful; making excuses for partner’s behavior; lying about partner’s behavior

• What is Domestic Violence • Who is Affected • Red flags

Take Action

7KH IROORZLQJ DFWLRQV FDQ EH WDNHQ E\ DQ LQGLYLGXDO WR KHOS WKHPVHOYHV DQG WKHLU FKLOGUHQ LQ D KRXVHKROG ZKHUH GRPHVWLF DEXVH LV SUHVHQW Identify safe areas in the home containing an exit and no weapons. Try to move to these rooms if an argument erupts Do not argue where there are children in case the abuser lashes out at the children ,I YLROHQFH LV XQDYRLGDEOH PDNH \RXUVHOI D VPDOO WDUJHW &XUO LQWR D EDOO LQ D FRUQHU 3URWHFW \RXU IDFH ZLWK \RXU DUPV RYHU \RXU KHDG ĆQJHUV LQWHUWZLQHG If possible, have a phone on you at all times. Create shortcuts to emergency contacts, including the police and your nearest shelter &RQĆGH LQ WUXVWHG IULHQGV DQG QHLJKERUV DERXW \RXU VLWXDWLRQ 'HYHORS D SODQ DQG YLVXDO VLJQDO IRU KHOS ZLWK WKHVH SHRSOH Keep weapons as inaccessible as possible Make a habit of backing the car into the driveway and keeping the gas tank full. Leave the driver door unlocked and others locked to make for a quick escape Do not wear scarves or jewelry that can be used to strangle you Create several plausible reasons for leaving the house at different times of the day or night For further help , seek local resources‌.

Take Action Page: •

List of suggestions on what to do.

Local Resources All these local resources are located in Tippecanoe county, Indiana.

If you are looking for resources in a different region, feel free to call us at 765-xxx-xxxx IRU VSHFLĆF GHWDLOV Filter Shelter

Show All

LUM Emergency Shelter

Childcare

Food

The LUM Emergency Shelter provides short-term, overnight shelter, meals, and showers in a safe and caring environment to homeless individuals. The LUM Emergency Shelter may accommodate up to 44 adults each night of the year.

525 N 4th St. Lafayette, IN 47901 lumserve.org +RXUV $0 30 (765) 742-3259

Fight Hunger

Adecco

Local Resources Page:

Consulting

Provide information about local resources that include descriptions, locations with a maps, opening hours and Contact numbers. On top bar, users can filter resources into different categories. On left side, users can scroll through all the relevent resources.

YWCA

Mockups

Feedback from sponsor After we came up with our initial mockups, we had our meeting with Tia and a lot of useful information and resources from her. These are our takeaways with respect to different sections of the website: Take Action • Can use power control wheels to explain the different tactics that perpetrators use against their partners.

• Use suggestions from the safety action chart from YWCA. Provide “Emergency packages”.

• Besides 911, users can dial YWCA’s 24/7 hotline for help.

• The wording of the content should not be too wordy, communicating with users by asking questions might be a good way.

• On average, it takes seven times to leave an abusive relationship before leaving for good.

Local Resources • There is a list of resources from YWCA that we will be able to use for Local Resources section.

• Besides shelters and childcare providers, some YWCA visitors prefer have their kids stay with trusted person that they know or contacted by YWCA during their work time.

• Legal resources could be added (divorce, protective order, court houses). Marriage counselor might not be a good choice.

• YWCA provides classes about domestic violence on Tuesday, Wednesday and Thursday in a week.

Problem Statement • The goal of the website is to help YWCA reach out to more people in a simpler fashion.

• A new statement will be used on the website.

Branding and scale • YWCA Greater Lafayette currently serves multiple counties. The website will focus on Tippecanoe county with its current resources while the name of specific counties can be written on the website.

• Use a note of “if you are in areas out of Tippecanoe county…” to direct users to more resources and YWCA’s hotline.

• The website would be separated from YWCA’s main website for now and the team would need to decide the domain for the design.

18

YWCA

Prototype

Prototype Overview After receiving feedback from our sponsor and desk critiques, we reviewed a list of problems that should be tackled with in our next iterations.

1, To include new resources from Tia. 2, To come up with a way to visualize the content in a clear and intuitive fashion so that the visitors of the website can easily digest the information.

3, Along with the layout of text information, what adjustments can be made to maintain a consistency within the website and deliver an inviting and friendly experience.

4, Enable the website to work across multiple devices (desktop, tablet, mobile,etc.).

In order to solve these problems, we first developed a style guide for our website, and then incorporated our improvements into our high-fidelity prototypes.

19

YWCA

Prototype

Style guide

We created our final style guide based on the theme of current YWCA website and a couple of design principles. The study guide gives out the general layout of the website in terms of color theme, typog-raphy, and other essential visual elements including icons, buttons, etc.

As the color standing for domestic violence education and prevention, purple can raise people's awareness toward interpersonal violence and abuse prevention. Our original website used different shades of purple in the website indicating different levels of content, however, from our usability testing, we found that only shades of a single color is not sufficient for the variety of functionalities of the website and may cause confusion. For example, an user ignored the reg flags of domestic violence in light purple on the darker purple background, and most of our test participants reflected it hard to describe the structure of the website clearly partly due to the monotone feeling brought by a lack of visual cues.

20

YWCA

Prototype

Therefore in our design, we continued utilizing purple as our primary color, while looking up ways to improve the readability of the website in terms of aesthetics. The first thing that we did was to add an accent color of bright orange. The orange color made a clear contrast with purple which allowed us to improve the findability of important information on the web page, and added to the visually pleasing of the website.

As for typography, we used a friendly-looking font "Copse" for titles, and Lato for body content.

"Copse" is a serif font with bit of soft around the edges, but is clear and sturdy enough for titles (Google Font,2017). Lato was taken from the original website since we did not find related usability issues and it worked well with titles in Copse, but at the same time we made it larger to solve the problem of users having difficulties reading body text. On the other hand, the titles and subtitles were changed from uppercase to lowercase for better readability.

For clickable areas including navigations and resource buttons, we enabled automatically inverse of color with mouse hover. Clickable text would be underscored with mouse hover as well.

In this way, we distinguished different elements of the website from each other through defining their visual hierarchy and using corresponding visual cues.

21

YWCA

Prototype

High-fidelity prototypes 1. Introduction

1-1. Main area of service, audience and purpose The introduction allows an user to quickly locate where the service comes from and to tell the nature of the website. Since from the meeting with Tia we got to know that YWCA Greater Lafayette’s target area is flexible with a center at Tippecanoe County, while the nature of a website makes it open and welcome to whoever visits it, we decided to divide our user group based on their physical location.

People living in areas mentioned above are our primary users who will use local YWCA resources such as shelters, childcare services and focus groups, while people outside of these areas are our secondary users who are seeking ways to know more about the definition of domestic violence and how to take action against interpersonal violence.

On the Introduction of the website, we indicated the main area of service through three ways: • The home button in the upper right corner • Title • Background image of the Lafayette city of Tippecanoe County At the same time, we added a notification on “Local Resources” page to inform visitors that the resources provided are located in Tippecanoe County, Indiana (discussed in detail further).

22

YWCA

Prototype

1-2. Navigation bar and three main buttons The navigation bar is made to be fixed on the top of the page so that when a user can easily enter different sections of the website. From left to right, the buttons correspond to four main sections (home, “About Domestic Violence”, “Take Action” and “Local Resources”) respectively, with the fifth button allowing safe exit to another assigned website (e.g. weather forecast).

1-3. Safe exit

The exit button has been put on the fixed navigation bar, which makes it much less possible to be ignored. Another thing that we changed was the color of the button from vibrant red to grass green. The idea came from a couple of domestic violence websites from comparative research.

Contrast to red, which is often used as the color of emergency for icons, green has been widely accepted as the color of life and safety, and it is also generally used on the exit sign in the US and many other countries (nrc.gov). The green exit button delivers a softer feeling than red does, however, we did not know if the less salient color would lower the findability of the button. In that case we left it as a question to be answered in our usability test.

23

YWCA

Prototype

2. About Domestic Violence

2-1. Emergency bar From our earliest usability testing of the original website, we found that users expect the 911 to be clickable and more obvious on the page so that they can get immediate help under urgent situations. In our prototype, we created an eye-catching bar right below the front page to make the emergency bar one of the few parts first noticed by a user.

2-2. Definition of domestic violence According to the United States Department of Justice, domestic violence is defined as “a pattern of abusive behavior used by one person to gain or maintain control and power over their partner in an intimate relationship� (justice.gov, 2016). It clearly shows when it happens (in an intimate relationship) and who are included. This gives out a concept of domestic violence.

24

YWCA

Prototype

2-3. Wheel of Power and Control “The wheel makes the pattern, intent and impact of violence visible.”

--- Domestic Abuse Intervention Program Instead of using plain text to explain who are affected by domestic violence and how to recognize red flags, we used the Wheel of Power and Control. The Wheel of Power and Control has many different versions depending on its audience, while the majority of them are derived from the Duluth model built by Ellen Pence and Michael Paymar in the Domestic Abuse Intervention Program (DAIP) designed to address the issue of domestic violence (Ellen, P., Michael, P., 1993). The wheel documents the most common abusive behavior or tactics that were used against women those who are suffering from domestic violence (DAIP, 2015), for example, “Isolation: Controlling what she does, who she sees and talks to, what she reads, and where she goes. Limiting her outside environment. Using jealousy to justify actions”, which clearly depicted potential actions that might be taken to isolate the women. The spokes and rims of the wheel are consisted of domestic violence behavi-ors, which all centered to “power and control”.

We found the wheel a good replace for the previous content that we concluded from our secondary research in terms of enabling victims to point to each of the tactics on the wheel and explain how these behaviors were used against them (DAIP, 2015).

In order to implement the wheel in a way that displays its information simple and intuitive, we came up with a couple of ideas. The original wheel is informational, however it may seem text-heavy if directly being tossed on the web page. Another problem was that the meaning of “physical/ sexual” categorization of domestic violence on the rim of the wheel was ambiguous. According to DAIP, it means that physical and sexual violence holds the behaviors all together, whereas now it is often confused as behaviors on the left side fall under physical violence, while the right side falls under sexual violence.

25

YWCA

Prototype

Ideation Sketches

We thought of a couple of ideas to solve the problems, for instance the wheel above which has the text content appearing on the side of the section selected, with a hand pointing to the section, and another wheel with enlarged text taking over the wheel body with mouse hover.

26

YWCA

Prototype

27

2. Take Action

In the take action section, we separated the original text into two parts that facilitate each other. In this way the information was more organized and the action could be given more directly to users.

3-1. What you need “What you need” section included items that should be taken along with a victim while leaving home and abuser. We created a eme-rgency pack from the service resources list of YWCA with the most frequently used items.

3-2. What you do From our secondary research, we concluded a list of actions that should be taken under domestic violence situations. Along with “What you need”, a victim would be able to get materially and psychologically prepared for emergencies.

Service resources. YWCA (2017.)

YWCA

Prototype

2. Local Resources

The local resources page gives out organizations and services that people can seek help from in Tippecanoe and its neighbor counties. For now we have only made 6 resources available in the high-fidelity prototypes with each one of them representing a type of service, which will be talked in more detail further. In the future more valid resources can be implemented on the website easily in the card-style design.

4-1. Card layout and filters In our high-fidelity prototypes, we made a layout change from displaying only one resource at a time to the card layout. Cards divide content into meaningful sections which occupies less screen space. Similar to the way text paragraphs group sentences into distinct sections, cards can gather various pieces of information to form one coherent piece of content (Nick, B. 2016).

28

YWCA

Prototype

29

Another advantage of the card-style design is that it works good both for desktops and mobile devices, because cards offer content in more digestible chunks. They are good choose for responsive design since cards act as content containers that easily scale up or down (Nick, B. 2016). Also, cards make it easier to create a single aesthetic across multiple devices. Compared to our previous design, it is much more easy to create a consistent experience regardless of device.

For the reasons above, we decided to use the card layout for local resources. Although getting rid of the map function kept a user from directly seeing the location of the resource, the better experience brought by the card-style design in terms of user experience and programming outweighed its limit-ations. The “Apply filters” and “Clear all” buttons work together with 6 categories of resources to help users sort out services needed.

4-2. Within a card In a single card, six parts were used together to allow a user to compare and select the local resources needed: • • • • • •

icon of the type of service name of the resource tags of services that the resource provides address opening time phone number

From the resources that we collected from Tia and research, name, address, opening time and phone number of each resource were listed, and all the resources were categorized into 12 types of services:

Social Services. YWCA (2013)

YWCA

Prototype

Through some further research about these services, we found that due to the year that the list was created (2013), not all the services are available, and some of them lack of some information such as days and time open. In the 12 categories, some of them have names overlapped with others, for instance “Children and Babies”, “Child Care” and “Children and Babies”. Therefore in order to decrease the possible memory load of a user and increase the findability of resources, we simplified the 12 categories into 7 more general types of services that can be easily recognized through icons: • • • • • • •

Shelter (include Clothing) Childcare (include Children and Babies, Child Care and Children and Babies) Emergency (include Emergency) Food (include Meal Services) Economical (Financial/ Legal & Government Assistance, Education) Health (Medical/ Mental Health, Special Needs) Support Groups (Local Support Groups, Community and Family)

The address, days and time open, and contact number allow a user to quickly browse through and select a resource.

4-3. Notification of main area of service Again to inform users the main area of service, we added a notification below the title explaining all the local resources provided are located in the Tippecanoe county, and if a user is looking for help in other regions, they can dial YWCA hotline for more details. The hotline will be clickable on the page.

30

YWCA

Final Website

31

Final Website Code Guide YWCA Style Guide Mockup size: 1440x900pt 1em = 16px = 12pt

guide

01//"2%3'"$41+-'5+ ol;vঞ1 (boѴ;m1;

0o | ol;vঞ1 (boѴ;m1;

- h3: 21pt, 1.75em - Lato Regular

- h1: 60pt, 5em - Sinhala Sangam MN Regular

$-h; 1ঞom

6'2%.$7"&'5#2"&

891+$4":&1+"

- h3: 21pt, 1.75em - Lato Regular - #414042

328741

!"#$%&'()*+,&'$-(.$*/,%-,( !'(0$11,-#%*,(2*3%'4(

- h2: 42pt, 3.5em - Lato Light

!"#"$%#"$&'("$)%*&$+'$,"+$-"./

!"#$% ol;vঞ1 (boѴ;m1;

F15B25

&'() 1ঞom

5B4C9F

- white, opacity 40% - 1200x330 pt

- 28pt,

2.333em

- Lato

o1-Ѵ !;vo u1;v

Regular

;<$*'5$%#"$13$"("#,"32*=$2%..$!""$1((">1%+".*?

- 24pt, 2em - Lato Regular

Introduction Page

414042

- Nav bar, 911 bar:

mockup 80pt, 8.89%

YWCA

Final Website

32

YWCA Style Guide Mockup size: 1440x900pt 1em = 16px = 12pt

guide

F15B25

- h1: 60pt, 5em - Sinhala Sangam

!"#$%&'#()*%+,&-+#.)/,)

MN Regular

328741

ol;vঞ1 boѴ;m1; bv - r- ;um o= -0 vb ; 0;_- bou v;7 0 om; r;uvom |o ]-bm ou l-bm|-bm 1om|uoѴ -m7 ro ;u o ;u |_;bu r-u|m;u bm -m bmঞl-|; u;Ѵ-ঞomv_brĺ

- 24pt, 2em - Lato Regular - 414042

)_;;Ѵ o= o ;u -m7 om|uoѴ

- 32pt, 2.667em - Lato Regular

5B4C9F

414042 o;u1bom ş $_u;-|v

mঞlb7-ঞom

loঞom-Ѵ !"#$%

1omolb1 !"#$% !"#$%&'()&*#+$+&,"+'.(&/-.+

voѴ-ঞom

ub bѴ;];

&vbm] _bѴ7u;m

;m bm]ķ bmblb bm]ķ Ѵ-lbm]

!"#$%&'()*%

About Domestic Violence

YWCA Style Guide Mockup size: 1440x900pt 1em = 16px = 12pt

guide

F15B25

- leave space for nav bar, mockup 1440x80pt

- h1: 60pt, 5em - Sinhala Sangam

!"#$%&'()*+

MN Regular

328741

$_; =oѴѴo bm] -1ঞomv 1-m 0; |-h;m 0 bm7b b7 -Ѵ |o _;Ѵr |_;lv;Ѵ ;v -m7 |_;bu 1_bѴ7u;m bm - _o v;_oѴ7 _;u; 7ol;vঞ1 -0 v; bv ru;v;m| Ĺ

- 32pt, 2.667em - Lato Regular

)_-| +o ;;7

- 24pt, 2em - Lato Regular

)_-| +o o Ŏ 7;mঞ= v-=; -u;-v bm |_; _ol; 1om|-bmbm] -m ; b| -m7 mo ;-romvĺ $u |o lo ;|o |_;v; uoolv b= -m -u] l;m| ;u r|vĺ

!"#$%

ub ;uĽv Ѵb1;mv;

&'$()*+,-'(.

Ŏ o mo| -u] ; _;u; |_;u; -u; 1_bѴ7u;m bm 1-v; |_; -0 v;u Ѵ-v_;v o | -| |_; 1_bѴ7u;mĺ Ŏ = boѴ;m1; bv m- ob7-0Ѵ;ķ l-h; o uv;Ѵ= - vl-ѴѴ |-u];|ĺ uѴ bm|o - 0-ѴѴ bm - 1oum;uĺ uo|;1| o u =-1; b|_ o u -ulv o ;u o u _;-7ķ Cm];uv bm|;u| bm;7ĺ Ŏ = rovvb0Ѵ;ķ _- ; - r_om; om o -| -ѴѴ ঞl;vĺ u;-|; v_ou|1 |v |o ;l;u];m1 1om|-1|vķ bm1Ѵ 7bm] |_; roѴb1; -m7 o u m;-u;v| v_;Ѵ|;uĺ

5)'*6 ;uঞC1-|;

7",)-4+7$,8')*% &-'(.

9"':+1$';)* <='$$#+,-'(>

Ŏ omC7; bm |u v|;7 =ub;m7v -m7 m;b]_0ouv -0o | o u vb| -ঞomĺ ; ;Ѵor - rѴ-m -m7 bv -Ѵ vb]m-Ѵ =ou _;Ѵr b|_ |_;v; r;orѴ;ĺ Ŏ ;;r ;-romv -v bm-11;vvb0Ѵ; -v rovvb0Ѵ;ĺ Ŏ -h; - _-0b| o= 0-1hbm] |_; 1-u bm|o |_; 7ub ; - -m7 h;;rbm] |_; ]-v |-mh = ѴѴĺ ;- ; |_; 7ub ;u 7oou mѴo1h;7 -m7 o|_;uv Ѵo1h;7 |o l-h; =ou - t b1h ;v1-r;ĺ Ŏ o mo| ;-u v1-u ;v ou f; ;Ѵu |_-| 1-m 0; v;7 |o v|u-m]Ѵ; o ĺ

/$%.

0-..1"'*.

2$3$4'%

- 18pt, 1.5em - Lato Regular

Ŏ u;-|; v; ;u-Ѵ rѴ- vb0Ѵ; u;-vomv =ou Ѵ;- bm] |_; _o v; -| 7b@;u;m| ঞl;v o= |_; 7- ou mb]_|ĺ

- 18pt, 1.5em - Lato Light

Take Action

5B4C9F

414042

YWCA

Final Website

33

Mockup size: 1440x900pt 1em = 16px = 12pt

guide

- leave space for nav bar: mockup 1440x80pt

F15B25

!"#$%&'()"*+#()

- h1: 60pt, 5em - Sinhala Sangam MN Regular

!""#$%&'&#"()*"#+&'(,+)&'#*+&#"()*$&-#./#0.11&)*/(&#)(,/$23#4/-.*/*5#46#2(,#*+&#"((7./8#6(+# u;voÂ&#x2020;u1;v bm - 7b@;u;m| u;]bomġ =;;Ń´ =u;; |o 1-Ń´Ń´ Â&#x2020;v -| Ć&#x2022;ŃľĆ&#x201D;Ĺ&#x160;Ć&#x201C;Ć&#x2018;Ć&#x2019;Ĺ&#x160;Ć?Ć?Ć?Ńś =ou vr;1bC1 7;|-bŃ´vÄş Ćł !rrŃ´" CŃ´#$%&

- mockup 360x360pt

!"#$%&'()'*+,$-.'/0'( !"#$%#&

#'#&(#)*+

Ć&#x201D;Ć&#x2018;Ć&#x201D; Ć&#x201C;|_ "|Äş -=-Â&#x2039;;Â&#x201A;;ġ Ć&#x201C;Ć&#x2022;Ć&#x2013;Ć?Ć? om7-Â&#x2039;Ĺ&#x160; ub7-Â&#x2039;Äš Ć&#x2013;ÄšĆ?Ć? -l Ĺ&#x160; ќĚĆ?Ć? rl Ĺ?Ć&#x2022;ŃľĆ&#x201D;Ĺ&#x2018; Ć&#x2022;Ć&#x201C;Ć&#x2018;Ĺ&#x160;Ć&#x2019;Ć&#x2018;Ć&#x201D;Ć&#x2013;

1233'+4*5'$657*0,$ 8'4/0.$9'34(0&'*0 "#.$%" Ć&#x2018;Ć? Ć&#x2019;u7 "|ġ -=-Â&#x2039;;Â&#x201A;;ġ Ć&#x201C;Ć&#x2022;Ć&#x2013;Ć?Ć? om7-Â&#x2039;Ĺ&#x160; ub7-Â&#x2039;Äš ќĚĆ?Ć? -l Ĺ&#x160; Ć&#x201C;ÄšĆ&#x2019;Ć? rl Ĺ?Ć&#x2022;ŃľĆ&#x201D;Ĺ&#x2018; Ć&#x201C;Ć&#x2018;Ć&#x2019;Ĺ&#x160;Ć&#x2013;Ć&#x2018;Ć&#x2018;Ć?

328741

- 24pt, 2em - Lato Regular

Ń´;-u -Ń´Ń´

@47'($65&&7*20,$6'*0'( *",$-*.&#

=55A$=2*A'(;$=55A$@4*BC$D*+E /00-

Ć&#x2019;Ć&#x2019;Ć? oÂ&#x2020;m|-bm "|Äş -=-Â&#x2039;;Â&#x201A;;ġ Ć&#x201C;Ć&#x2022;Ć&#x2013;Ć?Ć&#x2018;

Ć?Ć&#x2018;Ć?Ć&#x201C; u;;m0Â&#x2020;v_ "|Äş -=-Â&#x2039;;Â&#x201A;;ġ Ć&#x201C;Ć&#x2022;Ć&#x2013;Ć?Ć&#x201C;

om7-Â&#x2039;Ĺ&#x160; ub7-Â&#x2039;Äš ќĚĆ&#x2019;Ć? -l Ĺ&#x160; Ć&#x201C;ÄšĆ&#x2019;Ć? rl

om7-Â&#x2039;Ĺ&#x160; ub7-Â&#x2039;Äš ќĚĆ?Ć? -l Ĺ&#x160; Ć&#x201D;ÄšĆ?Ć? rl

Ĺ?ŃśĆ&#x201C;Ć&#x201C;Ĺ&#x2018; Ć&#x2018;Ć&#x2018;Ć&#x2013;Ĺ&#x160;Ć&#x2013;Ć&#x201D;ŃśĆ?Ĺ&#x160;|oŃ´Ń´ =u;;

Ĺ?Ć&#x2022;ŃľĆ&#x201D;Ĺ&#x2018; Ć&#x201C;Ć&#x2022;Ć?Ĺ&#x160;Ć?Ć?ŃľĆ&#x2018;

1233'+4*5'$657*0,$92:2;25*$ 5<$=4&2/,$>';57(+'; #*0)0',*.$

#'*04/$8'4/0.$?&'(2+4$ 5<$1233'+4*5' "#.$%"

ŃśĆ&#x2018;Ć&#x2019; -uh -v| Ń´Â&#x2C6;7ġ "|; ġ -=-Â&#x2039;;Â&#x201A;;ġ Ć&#x201C;Ć&#x2022;Ć&#x2013;Ć?Ć&#x201D; om7-Â&#x2039;Ĺ&#x160; ub7-Â&#x2039;Äš ќĚĆ?Ć? -l Ĺ&#x160; Ć&#x201C;ÄšĆ&#x2019;Ć? rl Ĺ?ŃśĆ?Ć?Ĺ&#x2018; Ć&#x201C;Ć?Ć&#x2019;Ĺ&#x160;Ć?ќѾĆ&#x201C;

#'#&(#)*+

5B4C9F

- name 21pt, - 1.75em - Lato Bold - tag 16pt - 1.33em - info 16pt - 1.33em - Lato

414042

Light

*.*)/*-$0

f15b57

!""#

f176ae

$%&'#$()*

ffde17

%*('+%

38833e

,%*'+*)

14abda

*$"-".&$('

414042

Ć&#x2013;Ć?Ć&#x201C; "oÂ&#x2020;|_ "|ġ -=-Â&#x2039;;Â&#x201A;;ġ Ć&#x201C;Ć&#x2022;Ć&#x2013;Ć?Ć? om7-Â&#x2039;Ĺ&#x160; ub7-Â&#x2039;Äš ќĚĆ?Ć? -l Ĺ&#x160; Ć&#x201D;ÄšĆ?Ć? rl Ć&#x2018;Ć&#x201C;Ĺ&#x160;_oÂ&#x2020;u _o|Ń´bm;ÄšĹ?ŃśĆ&#x2022;Ć&#x2022;Ĺ&#x2018; Ć&#x201C;Ć?Ć&#x2013;Ĺ&#x160;Ć?ŃľĆ&#x2019;Ć&#x2018;Ĺ&#x160;|oŃ´Ń´ =u;;

Local Resources

Final Website URL URLďź&#x161;http://www.domesticviolenceplan.com/

Additional concerns from presentation Q: Are you able to eliminate a site from a browserâ&#x20AC;&#x2122;s history?

A: It has been eliminated from the back history, but it does still show up in the history menu.

Weâ&#x20AC;&#x2122;ve added code to hide the title of the website in this history menu, it now shows up as â&#x20AC;&#x153;redirectingâ&#x20AC;Śâ&#x20AC;? and we are trying different methods to generate a list of browser histories in addition to the web API that allows for manipulation of the site history. The ideal safe exit should lead a user to an assigned page when redirected from the history menu.

YWCA

Final Website

Usability Testing Due to the limit of time we have after implementing the website, we tested three female users on the usability of the website. All of the test participants are college students. We think that they can be a good representative of our user group that is made up by young women who might be in a abusive relationship in terms of age and education background. More usability testing with real victims and individuals that are not tech-savvy or highly educated would be our next steps if time allows.

Summary of findings from usability test: 1. Minor bugs

Clicking “Isolation” brings the user to the content of “Denying, Minimizing Blaming” 2. Still ambiguous meaning of “physical” and “sexual” on the wheel

The participant still wonders if “physical/sexual” refers to only actions at one side. A user gave the advice of getting rid of the arrows.

34

YWCA

Final Website

3. YWCA hotline not clickable

The hotline is currently not clickable

4. Target audience of the website: Women only?

Under “Take Action” section, a participant wonder if the website is only for women after seeing “jewelry”, although she thinks it is applicable both for men and women.

This brought up the problem that we might need to explain or indicate some-where on the website about YWCA’s target user of women, or the possibility of broadening the user group of the website.

5. Colorblind

A participant concerned that the safe exit button of the website might be hard to notice by colorblind users, since red/ green colorblind is not rare. In the future we can perhaps add icons onto the button and use other visual effects to make it more obvious to colorblind users.

35

YWCA

Project Summary

36

Next steps Information architecture Since the website would be independent from YWCA Greater Lafayette website, we see the potential to include more functionalities and to expand its user group to possibly men, social workers, family members of victims, etc. In the future, we would like to have more test on the website with real users, and improve its information architecture to be more informational and intuitive.

Final deliverables The website would be delivered in a zip. file including all the following materials: • URL • Source code and images

Project Summary The project started from the website developed by fall 2016 Purdue YWCA team, getting more feedbacks through usability testing, then conduct user research and focus on a new solution that will expand the reach of YWCA’s domestic violence program. Through a semester long process, the team utilized multiple research methods to probe into the problem and came up with a responsive website emphasizing on the local resources and actions that can be taken under domestic violence situations, while at the same time enabling a user to safely exit the website under emergency.

Along with this design documentation, we will include the URL of the website, transition, slide deck as well as the access to our Google Drive team folder.

At last we want to thank Tia for working with us this semester, and also to our Professor Rasche and our TAs Michael and Erica for helping us throughout this semester.

Purdue UX Spring 2017