Case Study
Law Enforcement Training Platform
UX Cabin designed and built Leotraining, a web and mobile application for training law enforcement officers on court case law.
Responsive Web App
The application needed to work well across all screen sizes for officers to access
Logo Design
UX Cabin led the branding development for the new identity across the app
Landing Page Design
LeoTraining needed a user facing site that would present all their feature and brand accurately
One of a Kind eBook Experience
Reading, searching and navigate the eBook is now far easier than using the old PDF
iOS and Android
All designs took into account the specifics for each platform
User Research
Users were kept at the forefront of all product decisions
Overview
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.
Background
Law Enforcement Training is the premier constitutional officer training platform in Illinois. Their training materials have helped educate officers for over 20 years.
Objectives
- Provide a way to deliver online training materials in an easy way
- Seamless online exam format that reports to local agencies
User Research
To best understand the users behind the platform we built personas, organized surveys and conducted qualitative user interviews.
Personas
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.
Findings
- 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.
Design
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.
Principles
- Simple as possible
- Empowering admins
- Uncluttered
- Straight to the point
- Optimized for reading
Design System
A design system was created from scratch and built to allow the application to easily 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).
Principles
- Multi-platform (web, iOS, Android)
- Bold and accessible
- Flexible enough to fit different scenarios
- Specific enough to be useful
Development
LeoTraining needed something that could handle thousands of users running reports, exporting data to excel as well as membership role capabilities.
Constraints
- 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
Solution
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.
“UX Cabin has been an incredible partner. They took our vision and turned it into a platform that officers actually enjoy using.”
Dale Anderson
President