CASE STUDY

Law Enforcement Training

UX Research
UI Design
Front-End Development
Logo Design
App Development

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.

Platform

  • Web
  • iOS
  • Android

Deliverables

  • UX Research
  • UI Design
  • Front-end Development
  • Logo Design
  • App Development

Industry

  • Online Learning

Timeline

  • Start: January 2018
  • End: August 2022

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 Andriod

Quote
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

marketing page

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

Personas

Two main personas were defined when building the new application

Presons
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.

wireframingwireframing 2

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

Home PageMobile 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

Principles

• Multi-platform (web, IOS, Andriod)
• 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, exportin 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

We also worked with Navigate360 to build a mobile companion app to the EMS web application

Apps were built using the React Native framework.

See our other projects!

Emergency Management Suite
Stay in control for drills, active incidents and reunification by keeping vital teams apprised through a centralized, cloud-based user experience with Emergency Management Suite
EmployStream
EmployStream is a candidate management software platform that helps companies find, engage, and onboard employees.
Illiquid Labs NFT Marketplace
A beautiful, one-of-a-kind NFT marketplace for peer-to-peer trading, raffles, and loans.
Panasonic Weather
The Panasonic Weather Solutions application allows meteorologists to interpret weather highly sophisticated weather data from the atmosphere during the flight of an aircraft.
Suite360
UX Cabin helped Suite360 revamp their webapp by upgrading the visual design, introducing gamification for students and simplifying the teachers’ navigation so they can get tasks done seamlessly.
Tekonsha Mobile App
Giving truck drivers control over their braking technology from the palm of their hand.