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