Design System title

Design Systems

Unified WCAG AAA accessibility compliant Design Language
for Motorola’ Video Security Ecosystem

Case Study
case study below

Overview

As Director of UX & Research at Motorola Solutions, I led the initiative to design and implement a scalable design system built on Material UI (MUI) to unify the user experience across Motorola’s expanding portfolio of video security and access control products—spanning both on-premises and cloud platforms.
Key products included:

  • Avigilon Unity (on-prem VMS platform)

  • Avigilon Cloud Services

  • Avigilon Control Manager (ACM)

  • Pelco SDT (Site Design Tool)

  • Camera Configuration Tool (CCT)

  • Elevate

  • Halo

The goal was to establish a consistent, accessible, and AI-ready design language that improved usability, accelerated development, and reflected a cohesive brand identity across the entire product ecosystem.

Challenge

Motorola Solutions, owner of both Avigilon and Pelco security brands, along with other smaller brands, required a visual refresh to differentiate their product strategies. Avigilon would focus on comprehensive security solutions, while Pelco would specialise in hardware (cameras). Previously, the highly similar visual language made it difficult to distinguish between the brands. Additionally, recent logo refreshes for both brands presented a perfect opportunity to introduce a unified design system.

Motorola’s video-security suite had grown through acquisition, resulting in fragmented user interfaces, inconsistent design standards, and duplicated front-end frameworks.
Design debt slowed delivery, increased cognitive load for operators, and created friction for global teams working across multiple applications.

We needed a unified design system that:

• Scaled seamlessly between on-prem and cloud architectures

• Supported mission-critical, real-time operator workflows

• Balanced brand unity with product flexibility

• Integrated AI/ML patterns for alerts, search, and analytics

• WCAG AAA accessibility compliance

Logo before and after the refresh in 2023

My Role
Director of Design & Research

  • Led full re-platforming of product.

  • Introduced Material Design & StoryBook as foundational design system element.

  • Formalized our UX and handover process.

  • Worked with a front-end development team to define and grow components.

  • WCAG AAA accessibility compliance.

A screen from the deck I created to convince the stakeholders and leadership

Introducing: Pivot Design System

We implemented a design system to create a cohesive brand experience for both Avigilon and Pelco, while highlighting their distinct product focuses. Here's how we achieved this:

  • Leveraging Open Source: Instead of building every component from scratch, we adopted Material-UI (MUI), a popular open-source library for React. This efficient approach allowed us to customise the library's components to match the desired brand styles for both Avigilon and Pelco.

  • Embracing Design Tokens: We took advantage of Figma's newly launched Design Tokens feature (introduced in 2023) to streamline the design and development process. This allowed us to define core design elements like colors, typography, and spacing as centralized variables. Any changes to these variables would automatically update across all designs, ensuring brand consistency and reducing maintenance effort.

  • Modern accessibility: The design system prioritises a modern aesthetic, ensuring the user interfaces feel current and engaging. We meticulously crafted the system to adhere to Web Content Accessibility Guidelines (WCAG) standards, guaranteeing an inclusive experience for users with disabilities.

Selected slides from the company-wide Design System launch presentation (click to enlarge).

Design Tokens

A key component of this design system's efficiency is the implementation of Design Tokens. 

Switching themes with tokens is simply one click away

Grid Layout

Recognizing the extensive product suite within Avigilon, each potentially requiring a unique grid layout, the design system incorporated a comprehensive grid system. This responsive grid spans desktop applications, web interfaces, and mobile experiences, ensuring optimal layouts across various screen sizes. This standardized approach streamlines the design process for Avigilon products, promoting visual consistency while empowering designers to focus on the specific functionalities of each product within the suite.

Web grid

Desktop grid

Mobile grid

Desktop grid

Examples of grids in use

(click to enlarge)

Mobile grid

Web grid

ACC 7.0

Before & After

ACC 8.0 (light mode)

ACC 8.0 (dark mode)

design system screens

Key Contributions

  • Defined North Star Ui Vision for the video security portfolio.

  • Directed cross-functional teams across design, research, and front-end engineering.

  • Established AI-inclusive design patterns (smart search, anomaly detection, conversational assist).

  • Created a governance model balancing innovation with system integrity.

  • Elevated the role of design as a strategic partner in platform evolution.

  • WCAG AAA accessibility compliance

Impact

  • As of 2024, the Pivot Design System is fully adopted across Avigilon’s portfolio products as listed below.

    Avigilon Unity Video     : end-to-end on-premise video management software
    Avigilon Unity Cloud : cloud-based video management software
    Avigilon Unity Mobile : on-the-go video access on mobile devices, for both iOS and Andriod
    Avigilon Unity Access : on-premise access control software 
    Avigilon camera/sensor/device’s web UI : Web interface for device configurations for over 9 camera lineups

  • Reduced design redundancy by 60 %.

  • Improved operator efficiency via standardized layouts and interaction models by 80%.

  • Enabled scalability for future AI/ML integrations and third-party extensions.

  • Flexible, fast and affordable.

design system components

My Work