OJP Web Platform 2018

User Persona and Journeys

User Personas and Journeys

Sitemap and Sketches

Sitemap and Sketches

UX Research

UX Research

Platform Mockup

Design System Comps

Annotated Comps

Annotated for Development

Reaching over 1M users a month

The Office of Justice Programs was faced with ballooning costs from several technology stacks required to support a portfolio of 75+ sites. Our goal was to migrate their sites to a cloud platform and provide a design system that unified the user experience.

Each program serves a unique user base that on the surface seems similar, however each have their own vocabulary and user expectations. Our efforts to provide a system of scalable and reusable templates began with extensive user research and a comprehensive requirements discovery. The research revealed user challenges like discrepancies in business rules that were previously unknown by the client. The clickstream analysis revealed that new and mobile visits were rising quickly but were bouncing at 3x the desktop rate because the sites were not responsive. While each program office had been offering grant opportunities for over twenty years they were surprised when focus groups revealed that many applicants created their own spreadsheets because it was more efficient than using the website.

It was necessary to hold a series of discovery sessions with the panel of sixteen stakeholders to review the user research and challenge preconceptions. It was a novel approach for an organization that typically encourages each stakeholder to think of themselves as a completely separate entity.

When the user research, component library, page templates, and theming specifications were delivered to the collective stakeholders they had a common language to express their vision for what they would be maintaining as a unit.


  • Reduce the noise for users
  • Improve orientation and status for the user
  • A device agnostic website
  • Organize content within an enterprise-wide taxonomy
  • Improve the presentation relationships between content
  • Search, should be accurate and reliable


  • Mismatched terms
  • Very deeply nested information architecture
  • Fragmented content categories
  • Site specific search and navigation patterns
  • Product owners that don’t agree


  • 195 screens, 23 modules, 8 templates, 3 fully interactive prototypes (mobile,tablet,desktop)
  • Concept Testing
  • Focus Groups
  • Facilitated All Design Activities Among Sixteen Product Owners
  • Customer Feedback Sessions
  • Clickstream Analysis
  • Compliance
  • Agile Project


  • Sketch
  • Invision
  • Material Design Lite
  • Color Contrast Analyzer
  • Readability Analyzer