Background

After gathering and reporting on their demographic data for a few years, Wistia’s VP of People asked the website team to enable the data to be visible over time, so that visitors to the page can gauge our progress toward a more diverse team. While the snapshot in current time is valuable information, being able to see the progress we’ve made tells the story – and trajectory – of the team’s efforts.

Our goal was to be transparent about not just our current data set, but past data and trends over time. Success would mean that visitors to the page feel they can get a holistic read on Wistia’s progress toward DE+I goals – hopefully increasing job applicants who share Wistia’s values.

Existing data visualization

The current data did already exist on our DE&I website page. To start, I evaluated whether I could add the functionality to the current design to reduce scope.

Some aspects of note in the existing design:

• Mosaic design: All of the demographics we measure are visible at the same time

• Varied use of color: Sometimes to highlight a different group, and sometimes consistent across the data set

• Single filter: A toggle allows the user to filter between showing data for the whole company, just managers, and just non-managers

• Varied formats: Horizontal bar chart, vertical bar chart, large visual number, or just plain text number

Wireframes

I started by wireframing some potential options of varied scope, to frame a discussion around trade-offs. Did we want this out sooner, or with more functionality? Did we want this out sooner, or to be scalable for more years to come?

1. Additional toggle: Lowest lift, uses an existing element (toggle) to change data set from one to the other. Could scale out to a few years, but not more than that. Doesn’t allow side-by-side comparison.

2. Dropdown + additional graph for time: A dropdown allows for more data sets than the toggle. We could add a section that shows specific metrics of interest over time to tell that story on its own – medium lift.

3. Rethinking the visualization: The largest lift would be starting from scratch with the data visualization with time in mind. This could set us up better long-term, but would take more time up front and delay launch.

Data visualization

The verdict from stakeholders was that the team was willing to take a longer time on the rollout in order to have a more scalable, more interactive solution that allowed users to compare data side by side. We believed this was the solution most in service of our goal of being completely transparent about our data, and continuing to serve our DE&I business goals.

Next, I spent some time learning about the ethics of data visualization, especially in a context such as demographic data. I learned about the difference between explanatory visualizations, which were author-driven with a pre-defined path, vs. exploratory visualizations, which were user-driven and serve the needs of the receiver. There was a trade-off, though – putting too much onus on the user to form their own insights could be a usability problem, leaving the user with no insights or worse, incorrect ones – definitely unethical.

Overall, we decided that exploratory was a better fit, but that we would need to ensure to mitigate the risk of over-complexity. I found inspiration of different graph styles and interactions. How much control was helpful, and when did it become overly complex and a barrier to interacting, or forming their own insights?

Two directions

Explorations converged on implementing the graphs as a tab system. This allowed the data to be more digestible, only showing one demographic at a time, and allowed us to scale as we add more demographics. This also simplified the filtering functionality – only filtering the graph that you’re currently on.

Side-by-side, but fewer choices

One direction I was excited about allowed the user to choose from pre-set date ranges to tell the story. The side-by-side data would allow easy comparison, but would it appear overwhelming or dense? Would people feel that the individual years or date ranges not offered were being concealed?

Every data set, but not side-by-side

The other direction allowed the user to swap the data set for each that we had in the database. Would users appreciate seeing each moment in time, making their own comparisons and gathering their own insights? Or would it be too difficult to actually compare?

Comparative usability testing

To gain insights on both directions relative to the goals of the project, I ran unmoderated comparative usability tests.

Insights

The results were extremely clear! They did raise a few good questions about the naming of data sets, and what information should be included on the page outside of the graph, or in our downloadable annual report.

Next steps

This project was still in progress at the time of my departure from Wistia, but my next steps were to work with content design to make the dropdown options clear, and to add a section either below the graph or in the annual report to dive deeper into the year’s gap analysis and progress.

Once live, I planned to track clicks on the graph to monitor engagement. If the there was minimal engagement with the tabs, we could potentially try randomly ordering the tabs on each load, so that one metric wasn’t overly favored.