Overview

A transparency initiative to make criminal data accessible

OpenJustice is a transparency initiative run by the Department of Justice under Kamala Harris. They make criminal justice data available to the public to hold themselves accountable, improve public policy and make California safer. They are interested in adding a community section to get users interested in participating with the site in different ways.


Design Process

It's all about the team

I worked closely with two other UX designers, developers, and data analysts. This redesign would not have been possible without the collaboration and dedication of everyone on the team.

This case study focuses on research, defining our problem, ideation, and wireframes.

Duration

2.5 weeks

Team

3 designers, Data analysts, and Developers

The Designers:
- Kurt Bodden focused on the content management, navigation and IA
- Tracy Reppert focused on the content management and Social Media Plan
- I focused on the Wireframes, IA, SEO, and Analytics

Tools

Sketch, Adobe Illustrator, Omnigraffle, InVision

Deliverables

Heuristic evaluationPersonas, SEO Plan, Site Map, Sketches, Wireframes

 


Research

Identifying user painpoints

Without quite understanding the scope of the site completely the team and I dove headfirst into research. We explored the site ourselves, did a heuristic evaluation of the site, put it in front of users to understand how a variety of people interacted with the site, and looked at how open data was presented in other parts of the country. 

Heuristic Evaluation

Click to enlarge images

Usability Testing

We conducted usability testing with 6 users.

The testing confirmed users confusion with navigating through the site. Specifically,  understanding the difference between data stories, data exploration, the interactive graphs and the relationship between them.

Main takeaways

  • Overall Inconsistency: the navigation names, and links for page have 3 different titles.
  • Multiple navigation of top, side, and breadcrumbs is unnecessary and confusing
  • Footer forms do not provide error messages or allow for users to type long answers
  • Tertiary navigation is inaccessible on mobile


Comparative Research

We looked at how other sites present large quantities of data as possible inspiration for restructuring the information architecture, homepage, and feedback forms.

Key takeaways from each site:

Datausa.io
Homepage gave links to relevant data and stories similar to a new reporting site.
This was helpful to give users a deeper understanding of what they could access on the site.

Data.gov
Main feature was a search bar.
This seems to be a necessary addition to OpenJustice because users first inclination was to search for what they needed during usability testing.

Datasf.gov
The Contact Page gave options for submissions, questions, and feedback which is a useful way to combine OpenJustice's footer submission options.   


Analytics

By looking at the Google Analytics from the past 2 months we discovered:

  • 62% bounce rate
  • 11% of visitors were logging in through the Department of Justice servers
  • 20% of the users were accessing the site on mobile
  • 67% of users only visited the site once

The analytics helped us develop our hypothesis and confirmed specific areas of improvement for OpenJustice. Specifically with the goals of reducing bounce rate, making the site fully responsive, and increasing first-time and repeat users.


Define

Using research to define the solution

We define our design direction based off of our research. The research highlighted the main areas of confusion, inaccessibility and inconsistency that we needed to incorporate into our solution. The main issue were inaccessible copy, confusing site navigation, visually undefined hierarchy, and inaccessibility on mobile devices. 

Solution

Our solution focused on 6 key areas which together could help the multitude of people using the site get the most out of their experience.

  1. Improve the information architecture and navigation
  2. Re-write copy for consistency and accessibility
  3. Increase visual appeal with icons, infographic, accessible homepage, and navigation
  4. Make all pages of the site accessible in all devices specifically the pages that were completely inaccessible on mobile
  5. Make community section more visible to show users how they can be involved
  6. Drive traffic to the site through SEO
     

Personas

We updated old personas and added an additional persona to showcase the types of users accessing the site and to help us understand different user goals and paths.

Information Architecture: Site Map

Initially we codified the navigation titles, making all plural and eliminating extraneous words. We used feedback from usability testing and matched it with feedback from Eric, a data analyst from the Department of Justice. Between the two we were able to determine a way to navigate users through the site with more ease. 

siteMap

Develop: Ideate Solutions

Design studio with the UX team

We sketched rough ideas and ideated different solutions to create high definition sketches to test different versions. Specifically, the homepage and navigation. We received feedback from the stakeholders and developers before creating wireframes.

 

Sketches

 

Site Wireframes

 

Responsive Navigation & Wireframes

We needed to solve the responsive issue and make sure all pages were accessible via mobile. I created a menu that allows for access to the tertiary navigation and mocked up wireframes for tablet and phone. 

 

Navigation

We implemented a 3-tier navigation so all pages can be accessible via the primary navigation. We simplified the navigation by eliminating the breadcrumbs and side navigation. 


Next Steps

Increase SEO to make the site accessible

We recommended prioritizing the SEO recommendations to increase site visibility. Additionally, We propose ideating a topic-based navigation for the next sprint. Users found this more accessible for the lay-person coming to the site for criminal data.

Additional next steps: 

  • Build out community section & blog
  • Add how-to tutorial videos for first-time users trying to understand & organize the data 
Meeting

Conclusion

This project was extremely rewarding. Especially in regards to how much we were able to accomplish in a 2-week sprint. The most important take-away for me was the power of working and interacting with the developers and stakeholders throughout the project. This was paramount to how we navigated each aspect of the project.