Art Installation & Product Design

Combating Street Harrasment

“Xposé is an interactive educational tool to raise awareness about street harassment. The app serves as a platform for people to share their experiences of being catcalled/hit on/street harassed. User sends in an audio recording of what their response would be to the harasser. That information will later be displayed on a three tiered box installation with a touch screen monitor where people can interact with it to see the stories and hear the responses.

Role
Product Designer & Developer

Timeline
6 months

Collaborations
Designer, PM, Engineer

Platform
iOS app & Web Platform

0.0 intro0.1 challenge0.2 solution0.3 user research0.4 design goals0.5 ideation0.6 user testing0.7 iteration0.8 learning

Challenge

According to stopsstreetharrasment.com, 81% of women and 43% of men reported experiencing some form of sexual harassment and/or assault in their lifetime. Others are really threatened to share their stories and experiences and are petrified to express.

How might we help people to express their thoughts and to encourage them to share their experiences? As well as holds street harassers accountable for their actions and to expose them of their indecencies.

Solution

Xposé” is a street installation utilizing and combining a mobile app with screen display and sound projector to combat street harassment against minority women in downtown Seattle. Whether it is a voice recording or text entry of their experience, users can share their story and/or say what they would have retaliated with. These stories/experiences will be displayed in a street art installation that combines data visualization and the audios of these occurrences.

The intention to display this installation in public spaces is to make a bold statement against street harassment, and displaying the harassment showcases the injustice that minority women face on a day to day basis. Our goal for this project is to give the "harassee" the voice and the power to express their thoughts and to encourage them to share their experiences. At the same time, it holds street harassers accountable for their actions and to expose them of their indecencies.

User Research

Inspiration and backstory

Stop Telling Women To Smile is an art project by Tatyana F. where she interviewed women about their experiences with street harassment and then drew their portraits with a quote of what the women wanted to say back and posted those around the world in order to create a bold presence for women in an environment where they are so often made to feel uncomfortable and unsafe.

Hollaback is a mobile application that users can type in their experience with multiple forms of street harassment, as well as document what kind of harassment happened (whether that’s catcalling or stalking) and then the app maps the location of where the harassment happened.

Diggin into stakeholder interviews

We interviewed 2 stakeholders in total Aretha Basu (partner Women of Color for Systematic Change (WOCFSC))and Anida Ali (Artist-In-Residence at UW Bothell). Both played a crucial role in our project in each phase from inspiration to user testing. We showed them a rough prototype of the app we were planning on making, and they helped narrow down our ideas and specifying the project purpose and goals

Some of the important insights regarding the content ‍

Displaying image of map showcasing harassments around the world

Exposing harasser

“Find your friends” type of feature
Potentially too many steps within the app

Maximize the participation by simplifying question and interaction, intent with data collection

“Are you being hit on?”

The more broad our audience the better data we will receive

Design Goals

What we derived from data

We interviewed 2 stakeholders in total Aretha Basu (partner Women of Color for Systematic Change (WOCFSC))and Anida Ali (Artist-In-Residence at UW Bothell). Both played a crucial role in our project in each phase from inspiration to user testing. We showed them a rough prototype of the app we were planning on making, and they helped narrow down our ideas and specifying the project purpose and goals

Some of the important insights regarding the content ‍

Other feedback of possibly having the sound of people’s voices as it  will challenge the passiveness and silence that women feel in those situations .

Wants a quick interaction within the situation, so they can quickly remove themselves

Women are nervous about tackling harassment on their own but would help if another person was being harassed or attacked

The in Between

Evaluation, Refinement & Production

As a team, we began our development process using Scrum framework . I learned to effectively use a product backlog in user story format to prioritize the features of the system. This is a way to make sure that we have the core features that our stakeholders and users want, at the same time, we can see which features would run out of scope of the project. For each sprint, we break down each feature to a task sprint backlog, and try to complete them by the end of each week.

We were able to identify that we need to finish implementing the app by the end of March, so that we can focus on the data visualization display on the website, as well as construct the box for our installation in April, then we’ll be able do user testing and documentation in May. This activity also helps me to quickly learn and use the project management tools on Assembla, because every feature and task is already defined, including the time measurement.

Ideation

Explorations

We brainstormed and ideated for 8 hours straight. We asked a myriad of "how might we" questions and encouraged each other to come up with our wildest ideas without thinking about constraints. We then evaluated each of these ideas against our design goals and selected our top three.

We decided to move forward with the mobile app, followed by data visualization and installation since it was befitting all our design requirements and our carefully chosen design goals. It was also the best medium to reach a wider audience and provide more educational content and support from community.

Information Architecture

As a team, it was important for us to identify components and some unique user flows. I took initiative on building our IA and divided them up in two part structure: 

1) Component Structure

2) User flow of the app

Protoyping

Experimenting through the first

We wanted to create a concept prototype that could invite critique and open up a dialogue with our users and stakeholders. So, I designed a quick and dirty prototype in InVision FreeHand that allowed us to test alternatives and even scrap entire user flows early on in the design phase.

Given how little people knew about street harassment compared to sexual harassment, we hypothesized that they would want to be hand-held through the reporting and storytelling process. We designed a guided experience with the possibility for users to jump ahead, depending on their previous recycling experience and knowledge.

Installation Concept Generation

After researching street installations and museum pieces, we were particularly inspired by a colorful geometric pole in the streets and use that aesthetic into our own installation.

We decided to use boxes because based on our research, women often feel boxed in or passive in the situation, so by using speakers within the boxes their voices are able to be heard. The colorful display is to visually attract people to the installation in order for them to stop and listen to why street harassment is a problem.

Phase 1 Development

Putting iOS app together

At this stage, I'm in charge of developing the core functioning of the app, which consist of a button to capture the location of the incident, as well as the date and time of when it happens and store them in our MySQL Database. The user can send the text or audio response and view other responses as well as view where harassing incidents occur on a map using Google Map API.

Next was the Website

We also built the basic functioning of our website on CakePHP framework which also connect to our MySQL Database. The next step is to create a page that combines the three different database tables (text, audio, map location) for the screen display in the installation.  

User Testing

Once we had app and website in place we user tested for our first phase. Some of the feedback we got was: 

Phase 2 Iteration

iOS app

Website

Redesign the app UI to be consistent with the overall color scheme of the project

Constructing the Installation

User Testing Again! 

We had an estimate of 50 participants in our installation and a total of 37 feedbacks from our users and audiences. Overall we found that the majority of the users found the technologies useful for providing information and data on street harassment.

  • For our app, the users want to see information about our project within the app
  • They also want quick access to the map page, and clearer instructions
  • For the installation, the feedback that we got were adding headphones.
  • A lot of the users were really interested in reading through multiple stories

How did I grow?

Impact & Learning

Overall for this project, we want to go beyond just street harassment and address other issues such as hate crimes, racial hate speech, and targeted crimes on marginalized communities to highlight that.

Doing the risk assessment activity early on helped me to see eagle eye view of the project and to help identify and mitigate problems early on.I took the initiative to set the deadline for each task by asking them directly. Throughout this experience, I learned that my strengths are team lead, organization, and time management.

Looking back on the team learning, the thing I would do differently is to take the lead early on in the project, rather than being passive, and wait for my team members to take the responsibility. I would also not taking all the work myself and ask for help more often, and trust that people will get the work done. And lastly is to directly state my expectation between team leader and team members.

take me
home