Smalltalk - A Workplace Sexual Harassment Visualization
Motivation
A national survey found that 81% of women and 43% of men reported experiencing some form of sexual harassment (SH) and/or assault in their lifetime. While those numbers are harrowing, they remain just that: numbers. My goal for this project was to create an interactive visual representation of real-world sexual harassment data that would raise awareness of the issue by increasing its personal relevance to the users.
I worked on the data analysis, design, and implementation as an independent study during my final semester as an undergraduate at the University of Texas Arlington. Joshua Wilson, my Art & Art History faculty advisor, guided me through this process and provided feedback.
Tools: Adobe Photoshop & Illustrator, Unity Game Engine, Python, Excel
Conceptualization
During the ideation process, I was inspired by visualizations of the Petrie multiplier (e.g. Ian Gent's and Matt Lane's), a thought experiment developed by Karen Petrie to illustrate the high rates of SH experienced by women in tech. Based on those examples, I chose to represent harassment through verbal interactions between workers (though harassment can take various other forms, such as inappropriate staring or touching).
To make the visualization accessible and legible, I aimed to keep the design simple. The visual focus should be on the worker interactions and the relevant statistical data.
When it came to the setting of worker interactions, I had to compromise between creating customized layouts for different workplaces (e.g. retail store, warehouse, office, etc.) and presenting a portfolio-ready version at the end of the semester. I ultimately decided to set the visualization in a generic office environment. While a cubicle-style office is not the typical workplace across all industries, it seemed universal enough for my goal to show incidences of workplace SH.
Data Analysis
My goal was to reflect the reality of sexual harassment incidence for men and women in various job environments. Such incidence rates are reported by the US Equal Employment Opportunity Commission (EEOC). In 2017, they provided an extensive data set to Buzzfeed News, which published a comprehensive analysis.
Alongside the article, the author published the raw data and the Python scripts used in their analysis and visualizations on GitHub. Their data set included over 170,000 claims, filed between 1995 and 2016, with information about the filer’s gender and job. Most claims were affiliated with a specific job, but a notable 64,000 (37%) were not. The author also included information about each industry, such as the percentage of women and the average wage.
This data set and script provided a solid basis for my own project, but I needed to extract the desired information in the correct format to calculate harassment rates. I used a Jupyter Notebook and Excel to do my own analysis and summarize gender ratios and annual SH rates for 20 different industries.
Design Elements
The core UX elements of Smalltalk include:
A semi-transparent splash screen with a play button to start the visualization
An office environment with 100 agents representing workers
Workers moving about the office space as time progresses
Nearby workers engaging in conversation, which sometimes turns into harassment
A status bar showing the currently selected industry, its gender ratio, its yearly harassment rate, and the simulated time span
Environment Layout
Main design challenge: balance space for agent movement and functional spaces
The images on the side show multiple iterations of layouts before arriving at the final version. The most challenging part of creating the layout was to provide enough desk spaces without limiting the agents’ paths too much. To facilitate showing the gender ratios for each industry, I wanted there to be exactly 100 workers, so there had to be at least 100 fixed workspaces (excluding conference and break room spots). The first two iterations of the layout had three conference rooms, leaving too little space for individual desks. The third iteration replaces two conference rooms with more desk rows, which results in the needed number of desk spaces.
Like in many contemporary office floors, the space is divided into 4 different sections: desk rows, individual offices, conference rooms, and a break area. Each worker has their own fixed desk in a row or an individual office, whereas spaces in the conference rooms and break area can be occupied by anyone. Workers routinely move between their assigned workspace and the break area, occasionally being called into a conference room for a meeting with other workers.
Even though all agents are programmatically the same, the individual offices in the layout create an illusion of hierarchy by separating some agents from the rest.
Agents
Main design challenges: clearly represent interactions, show when and how often harassment occurs
Representing Interaction: In the earliest prototype iterations, interactions between agents were indicated by a thin line between them. However, this did not properly show the directionality of the interaction, an important aspect of this visualization. It was impossible to see which agent was the perpetrator of harassment and which was the receiver. I changed the design by using tiny circles that pass between interacting agents as a sort of “conversation token." This way, the direction of an exchange would be more noticeable.
Interaction Valence: Given the agents’ small size, I considered adding a pop-up above the receiving agent to show whether an interaction was positive/neutral or harassment. Following feedback from my project advisor, I researched stylized symbols for harassment, insults, or anger that could work with the style and scale of this project. Unfortunately, this search yielded no usable results, since most symbols for harassment or anger are not clearly legible on a small pop-up (e.g. crossed out hand, hand showing the middle finger, lightning bolt, etc.). Instead, the pop-up now shows a simple smiling green, or frowning red face pop-up. Harassment interactions are further marked by red triangular interaction tokens instead of circles.
Interaction Effect: To go beyond merely showing the frequency of harassment, I also wanted to illustrate the long-term impact of repeated workplace SH. In Smalltalk, worker sprites change color to a darker shade after experiencing harassment. This happens after the first and fifth harassment incidents. In addition to showing how heavily individuals are affected, this change also gives an impression of how men and women are impacted as a group if one compares how many darker male vs. female agents there are.
UI
Main design challenge: effectively utilize screen space and emphasize important information
To synthesize all the information relevant to the current visualization (i.e. selected industry, gender ratio, SH rate, time scale), I wanted to create a “hub” where the user could easily find this data. At first, I considered a collapsible sidebar with editable elements, such as the industry selector and time scale, and a top bar with more static data (top).
This would allow the user to hide all but the most basic information and focus on what is going on. However, testing this idea revealed that minimizing the sidebar created a large space on the right side of the screen. Since the scale of the office space and agents is relatively small, this space would be better used if the scale of the visualization components were increased. Thus, I worked on different designs for a single status bar (middle).
The final design can be seen in the bottom image. It contains the current gender ratio, an industry selection dropdown, the SH incidence rate, a time indicator, and buttons to speed up or slow down time. Compared to the other designs in the middle image, this one is the most streamlined and simple, with all the components in one line. The most visually salient component (the gender ratio circle) is on the right, guiding the user’s gaze from right to left.
