Jail Dash Cover Photo.png

JAIL DASHBOARD

An interactive dashboard empowering jail administrators and other state government officials to address jail overcrowding.


AT A GLANCE

Services

  • User Research

  • Rapid Ideation & Sketching

  • Low/High Fidelity Mockups

  • Style Guidlines & Specs

type

  • Web application

Jail dash laptop.png

IndustrY

  • County government

 

USERS

  • Sheriffs, Jail Administrators, and County Data Analysts


THE PROBLEM

 

County jails are chronically overcrowded, costing state and local governments hundreds of thousands of taxpayer dollars every year.  Yet government officials lack insight into the main drivers of overcrowding, preventing them from identifying and employing efficient and scalable solutions.


PROCESS MAP

Jail Process.png

Interviews.png

user interviews

When I started working on this project, I was asked to design the UI for a dashboard displaying 7 data points that jail officials had already requested.  However, I know from experience that users' specific feature requests often arise from preconceived notions of existing constraints, and simply addressing those problems is a missed opportunity to re-think the problem as a whole.  Digging into the "why" helps us rethink the user experience to eliminate these kinds of problems in the first place.

After conducting phone interviews with several individuals from the County Sheriff's office, I developed the following insights and design principles:

 
empathy.png
 

User Empathy

Jail officials have observed that some courts and judges take longer to move people through the system than others, but efforts to directly address this issue with the individuals involved have only created tension and feelings of judgment.  They hope that sharing data will encourage people to change their practices without making the situation feel personal. 

Design principle:  The dashboard will encourage users to examine and take ownership of their own impact on jail overcrowding by giving them the tools to make self discoveries and emphasizing transparency over performance.

 
mental model.png
 

Mental Model

Users already know that jails are filled beyond capacity; what they really need to understand is why people are staying in jail when they shouldn't be.  Users mentally organize the reasons that an individual may be serving unnecessary jail time into three categories: 

  1. The jail is serving a purpose that it shouldn't be

  2. The individual is serving jail time for a minor offense when there are alternative sentencing options available

  3. The individual has elected to serve jail time as an alternative to paying a fine  

Design principle:  By organizing the data around users' existing mental models, the jail dashboard will make it easy for users to take appropriate follow up actions.

 
responsibility.png
 

Displaying Data Responsibly

Jail officials already have strong hypotheses about some of the main drivers of jail overcrowding.  They want this dashboard to expose those drivers so that they can justify changes they've been advocating for for a long time

Design principle:  By giving users access to timely, accurate, and understandable data, we will empower them to discover and validate new insights.  However, the dashboard will not unfairly support any particular viewpoint by displaying data in such a way that is biased toward any particular interpretation of the data.


Ideation.png

Rapid Ideation & Sketching

 

With these principles in mind, I began sketching different dashboard concepts.  The goal of the sketches was to have something that users could quickly react to - not to analyze the details.  Each sketch isolated a different variable: some tested the idea of organizing the data using tabs, tiles, or expandable panels.  Some tested whether highlighting top-level Key Performance Indicators (KPIs) or more detailed drill-down served as a better entry point for further analysis.  Others tested whether the use of differing chart types helped encourage exploration and maintain users' interest or if they just added unnecessary complexity and cognitive load. 

Because the low-fidelity appearance of a sketch communicates a sense of incompleteness and an openness to new ideas and changes, sketches serve as a good tool to measure users' reactions to high-level design concepts without distracting them with interactions and details.  

 
sketches.png

Wireframing.png

Wireframing

 

Once I had some data on which dashboard design concepts best met user needs and aligned with our earlier design principles, I wanted to test those designs' ability to actually convey critical information and data insights to users.  At this point, sketches don't provide enough fidelity for users to actually engage with the data in a more meaningful way - we needed wireframes to simulate the experience of interacting with the dashboard and to encourage users to engage with the data itself, not just the dashboard concepts. 

The key to effective wireframing is only giving fidelity to the interactions you want to test.  In other words, details such as colors and actual numbers will demand a user's attention, so only use them where you want to get feedback.  In these wireframes, I wanted to test the effectiveness of different data visualizations.  For that purpose, actual values were important in order to test whether the visualizations communicated insights, but color (which should enhance a visualization's usability but not be the sole means of communicating any type of information) was not important.  

 
jail wireframes.png

mockups.png

Mockups

 

After I had enough user feedback to hone in on one dashboard design, I was ready to mock up what the actual dashboard may look like.  At this point, I was working closely with developers to make informed choices about which component libraries and styles to use based on engineering constraints.

I utilized InVision to make interactive prototypes that users could engage with more more thorough user testing. 

 
Jail pop breakdown.gif

style guide icon.png

STYLE GUIDE + SPECS

The final step of this project was the engineering handoff.  It was my goal to ensure that my designs were not only exceptionally well designed and usable, but they were also relatively low-lift to implement.  Part of this goal was achieved throughout the design process, by taking advantage of my engineering background to make design choices along the way that optimized for ease of implementation (such as leveraging existing component libraries).  The rest was achieved by providing a useful style guide and specs for engineers to reference throughout the development process.  By showing the intrinsic logical structure of the style and typography, aligning the layout to a responsive grid, referencing relevant libraries, and providing css code and pixel-perfect specifications, I was able to facilitate a smooth design-to-engineering handoff.

Style guides include color palettes and relevant specs for the component libraries used (in this case, HighCharts).

Style guides include color palettes and relevant specs for the component libraries used (in this case, HighCharts).

Typography guidelines include css code that can be incorporated into stylesheets

Typography guidelines include css code that can be incorporated into stylesheets

Interaction guidelines that leverage existing component libraries further simplify implementation

Interaction guidelines that leverage existing component libraries further simplify implementation