Creating a Visualization Platform for Prison Complaints — a Design Case Study

Connie Liu
Jan 12 · 6 min read

Team: Cornell Hack4Impact (Designers: Connie & Ishika, Developers: Shefali, Steve, Anika, Jiwoo, Amy, Tech Lead: Anusha, Project Manager: Priya)
Timeline:
Fall 2020 (6 weeks Design, 10 weeks overall)

The Problem

There is a huge lack of transparency about conditions inside prisons and three supreme court cases (Branzburg v. Hayes, Pell v. Procunier, and Saxby v. Washington Post Co.) make it difficult for journalists to access these prisons.

Currently, the Correctional Association of New York (CANY) is the only organization with access to that data. CANY wants to surface the data and use it to form an argument as to why it's important to increase transparency about conditions inside prisons.

The Solution

We created a dynamic data visualization platform for CANY to easily create graphs that use real-time prison complaint data.

Competitive Analysis

First, we did market research on similar platforms that involved editing custom visuals. What we noticed from each of these is:

  • Not all options are immediately available, and options are broken off by distinct aspects of the graph, artboard, or use-case
  • Shifting from action to action should require a one-click transition
  • Most of the detailed options are concentrated on the sidebar and rarely on the top bar

Information Architecture

Based on the initial prompt, we went through several rounds of the information architecture. We chose to iterate on information architecture first paired with low-fidelity sketches because we didn’t want to create the mid-fidelity until all the details were concretely defined.

Iteration 1

My initial mental model was that all kinds of graphs with different x and y axis’s were possible.

However, after talking with the client, we learned that they were mainly interested in complaints as the dependent variable.

From our meeting with the client, we also learned they wanted features such as a way to save the graph, undo and redo, and reset.

Iteration 2

In the second iteration, complaints were pre-assigned as the y axis. We had it so the user could limit the data set from both the x and y.

In the next user testing review with the client, we focused on asking questions to define what the client envisioned the y and x axis being, and what actions they wanted to take in customizing the data.

User Testing

During our meeting, we tested our prototypes with the client, two CANY employees, and two non-CANY affiliated students for both functionality and visual design. As a side note, the flows below have been abridged.

Visual Feedback

We had an array of options visually but settled on two final options to test because they either echoed previous design patterns (eg google sheets) or seemed the clearest based on internal team feedback.

✓ Nice visually and usable after users played around with controls
✗ Unclear at first the correlation between tabs and sidebar content, the active color placement in visualization settings was unnoticed

✓ Able to quickly toggle between different actions, similar to Google Sheets UI
✓ Clear relation between the settings summary, edit summary, and the task-action
✗ Unclear the settings co-related to the filters above, needs to be fixed visually

Ultimately, user testing revealed users preferred Option B. We decided to freshen up the UI and optimized the spacing. We also added more visual hierarchy to the sidebar.

Function Feedback

We tested for the usefulness of our product by asking people at CANY to walk us through how they would use our tool to construct visualizations they would use from day-to-day.

We discovered that it was hard to distinguish the difference in action between defining complaints (third option) and limiting the data-set (second option). Both were limiting the data set and defining the x-axis at the same time, but they were separated as if they were performing two separate actions.

Figuring out the 3 Core Actions

After talking with the client some more to figure out the three core actions, we learned that the y axis would always be the number of complaints and that would never change. That meant the only axis to be altered would be the x axis. The client agreed they still wanted to limit the data set and change the graph type — which meant an easy fix would be to replace changing Complaint Type to Setting X Axis.

Final Iteration

The new information architecture and design reflected the changes in the three actions.

We also realized that the user would need a way to keep track of the multiple limits placed under the ‘limit data set’ option which we added visually via a sidebar.

We also learned that the dataset was incomplete and there would be entries without demographic data. We added the explanation via a popup and placed it under the ‘limit data set’ sidebar.

Design System

The final visual design system was heavily based off of CANY’s existing brand to maintain consistency, even though it was an internal tool. That meant using brand fonts, Oswald and Helvetica, as well as brand colors.

Results

View a walkthrough the final iteration below!

At our end-of-semester showcase, we demo’d the project to our client and we were met with positive reviews. A CANY employee expressed his gratitude and said that our tool would make the data visualization process much faster and efficient for them, and they were so excited to use it.

Because the pandemic has been stressful for everyone, our team is still working on developing the tool but it will be deployed in the spring.

Reflections

This semester was Hack4Impact’s first time designing before the beginning of development, and also with pairs of designers. Here are some key lessons learned —

  • The user knows best — there were times where our team couldn’t make a design decision, after we got feedback from users we were able to make clear, informed decisions on which avenue to pursue.
  • Walkthrough the user journey — if we had constructed a user journey earlier we would’ve realized our mental model didn’t line up with our client’s. We did do it verbally, but a more concrete model would’ve been more effective.

In the end, designing wouldn’t have been possible without our wonderful developers and project managers and we can’t wait to see what will happen in the upcoming semester!

cornellh4i

Cornell Hack4Impact is an organization that designs and develops software for nonprofits.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store