CASE STUDY
Online training and resources that help law enforcement officers know how they can safely and constitutionally serve their community based on recent case law decisions.
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 Andriod
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
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
Two main personas were defined when building the new application
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
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.
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
A design system was created from scratch and built to allow the application to easly scale with future features and designs
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.
We also worked with Navigate360 to build a mobile companion app to the EMS web application
Apps were built using the React Native framework.