Motorola MDT

Design System for In-Vehicle Law Enforcement

Product: Motorola MDT

Role: Senior UX Designer

Company: Motorola Solutions

Timeline: 1 year

Team: UX Design, Product, Engineering, Research

Contributions: UX Strategy · Interaction Design · Design Systems · Prototyping · User Research

Platforms: Embedded touchscreen / In-vehicle

Overview

I designed a scalable UX and UI system for Motorola's Mobile Data Terminal (MDT), an in-vehicle touchscreen used by law enforcement officers.

The system supported critical workflows including license plate queries, dispatch communication, messaging, field reporting, officer directories, status information, and emergency controls. The design system established consistent interaction patterns, readable typography, high-contrast controls, and touch-friendly components optimized for use inside a moving vehicle.

A key part of the system was context-aware Day and Night modes, allowing the interface to adapt to changing lighting conditions while maintaining usability and reducing visual distraction.

My Role

I focused on creating the interaction and visual framework that could be reused across the MDT application.

My contribution included:

• UX strategy and interaction design

• Design system foundations

• Touchscreen interaction patterns

• Component and control design

• Day/Night visual modes

• Information hierarchy

• Prototyping and usability testing

• Accessibility and contrast considerations

• Collaboration with Product, Engineering, and Research

• Translating desktop-oriented interactions into touch-first experiences

The Problem

The existing MDT experience reflected older desktop-oriented UI conventions. Controls were small, information was difficult to scan, and workflows often required multiple interactions to complete simple tasks.

The environment created additional challenges:

• Officers may interact with the system while driving or stopped.

• The display must work in bright daylight and low-light conditions.

• Controls need to be easily targeted at arm's length.

• Critical information must be readable at a glance.

• Excessive brightness at night can create glare and impair dark adaptation.

Night blindness generally refers to difficulty seeing in low-light or dark environments. In this context, excessive screen brightness can create glare and make it harder for an officer's eyes to adjust to the surrounding darkness.

The challenge was therefore larger than modernizing the visual design. The interface needed to become touch-first, glanceable, high-contrast, and context-aware.

Design Goals

I established several principles to guide the system:

• Touch First
  Design controls large enough to reliably target with a finger rather than a mouse.

• Glanceable
  Prioritize information that officers need to recognize quickly.

• High Contrast
  Maintain strong contrast between controls, text, and backgrounds.

• Context Aware
  Adapt the interface to environmental conditions through Day and Night modes.

• Consistent
  Create reusable patterns that behave consistently across MDT functions.

• Efficient
  Reduce unnecessary steps in high-frequency workflows.

Design System Foundations

The foundation established a consistent visual language across the application.

Color

The system used distinct visual states to communicate importance and status:

• Neutral controls for standard actions

• Green for primary actions such as Send

• Red for critical Emergency functionality

• Light backgrounds for Day Mode

• Dark surfaces for Night Mode

The Night Mode wasn't simply a darkened version of the interface. Colors, contrast, borders, and surfaces were adjusted to maintain hierarchy while reducing overall luminance.

Typography

Typography was optimized for viewing at arm's length, with clear hierarchy between:

• Application navigation

• Screen titles

• Input fields

• Vehicle information

• Status information

• Actions

Touch Targets

Controls were redesigned around finger interaction rather than mouse precision.

The keyboard and navigation controls use large, clearly separated touch targets, reducing accidental selections and improving interaction while seated in the vehicle.

Component Library

The MDT design system established reusable components for the broader application.

Examples included:

• Navigation buttons

• Primary and secondary actions

• Emergency controls

• Text inputs

• On-screen keyboard

• Status indicators

• Data tables

• Information panels

• Search and query controls

• Navigation patterns

• Notifications

• Day/Night themes

The goal was to make the system repeatable rather than screen-specific.

A designer building Dispatch, Messaging, Reports, or Officer Directory screens could reuse established components instead of creating new interaction patterns.

Case Example - License Query

The License Query screen demonstrates how the design system came together.

The interface combines:

Navigation  >  Search  >  Results  > Keyboard  > Actions

The officer can enter a license plate, review vehicle information, and initiate actions from a consistent touch interface.

The bottom action bar provides persistent access to common functions such as:

Previous · Next · NCIC · Plate · Vehicle · Gun · Print · Delete · Send

This creates a predictable interaction model across query workflows.

The Send action is visually emphasized as the primary action, while Emergency is consistently separated and highlighted in red to communicate its critical nature.

Day & Night Mode

One of the most visible examples of the system is the Day/Night experience.

Day Mode

Uses a light interface optimized for bright environments, with strong separation between controls, information panels, and the surrounding interface.

Night Mode

Uses dark surfaces and reduced visual intensity to minimize glare and preserve visibility in low-light conditions.

Importantly, the interaction model remains consistent between modes. Officers don't have to learn a different interface at night—the system simply changes its visual presentation.

UX / Engineering Workflow

The design system was developed collaboratively with Product, Engineering, and Research.

My process included:

Audit  >  Define   >  Design  > Prototype   >  Test   >  Refine   >  Document   >  Implement

I worked with engineering early to understand technical constraints and ensure components could be implemented consistently.

Design specifications documented:

• Component behavior

• States

• Touch interactions

• Visual hierarchy

• Day/Night variations

• Edge cases

• Interaction requirements

This reduced ambiguity during implementation and helped maintain fidelity between design and the final product.

Takeaway

This project reinforced an important principle in my approach to design systems:

For the Motorola MDT, the system connected visual consistency, touch interaction, accessibility, environmental context, and operational efficiency into a single framework.

The result was more than a library of UI components. It was a foundation for designing a complex software product that had to work reliably in a demanding real-world environment.