Law Enforcement Training Platform

UX Cabin designed and built Leotraining, a web and mobile application for training law enforcement officers on court case law.

IOS & Android
UI/UX Design
Logo Design
React Development
Web App


UX Cabin redesigned and rebuilt LeoTraining’s web application from a Wordpress site to a progressive web app and built a corresponding react native mobile app for IOS and Android


Law Enforcement Training is the premier constitutional officer training platform in Illinois. Their training materials have helped educate officers for over 20 years.


  • Provide a way to deliver online training materials in an easy way
  • Seamless online exam format that reports to local agencies

marketing page

User Research

To best understand the users behind the platform we built personas, organized surveys and conducted qualitative user interviews.


Two main personas were defined when building the new application

Quantitative Survey

To start, we needed validation that the features we were building were useful and necessary for the departments we were serving. LeoTraining has numerous resources and services and we wanted to hone in on the opportunities within their services.


• Officers overwhelmingly appreciated the training materials
• Younger officers liked the online experience
• Older officers preferred a print-out version of their training materials

Qualitative Research & User testing

We interviewed many officers to understand how they liked interacting with training materials such as books, pdfs, and online reading. This allowed us to shape up a wireframe that we could refine and employ for user testing.

wireframing 2


The design needed to help officers get in and get out in the most streamlined way. Everything had to work as expected the first time and not slow them down.


• Simple as possible
• Empowering admins
• Uncluttered
• Straight to the point
• Optimized for reading

Home Page
Mobile Screen

Design System

A design system was created from scratch and built to allow the application to easly scale with future features and designs

Atomic Design

the Design System was created with Brad Frost’s “Atomic Design” philosophy. In this model, the smallest UI elements are referred to as “atoms” (ie, icons, labels) and are assembled together in order to create components referred to as “molecules” (ie, buttons, inputs). Molecules are put together in order to create more complex components called “organisms” (ie, cards).”

Some examples of these design molecules include:
• Buttons & Selectors
• Inputs
• Icons


• Multi-platform (web, IOS, Andriod)
• Bold and accessible
• Flexible enough to fit different scenarios
• Specific enough to be useful


LeoTraining needed something that could handle thousands of users running reports, exportin data to excel as well as membership role capabilities


• We needed to rebuild LeoTraining from scratch
• We needed to do it quickly
• We wanted a solution that was future proof, making it easy to upgrade and maintain.


Given the needs of the project we chose React + Lumen (Laravel).Styled-components

could handle the styles and offline plugin to handle app updates. We were also planning to build a React Native mobile app in the future so react made the most sense.To keep

things simple we hosted it all on a LAMP stack.

Mobile App

Design and build a user-friendly app for Court Smart using the latest technology, React Native. Available on iOS and Android.

Apps were built using the React Native framework.

Table of contents