Design System
Unifying the Design Language for Motorola’
Video Security Ecosystem

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)

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

My Role

Director of Design & Research

  • Led full re-platforming of product.

  • Introduced StoryBook as foundational design system element.

  • Formalized our UX process.

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

Approach

1. Research & Foundation

  • Conducted UX audits across Avigilon, Pelco, and ACM products to identify component redundancies and usability gaps.

  • Partnered with engineering and product leads to define common patterns and prioritize reusable elements.

  • Ran operator interviews and heuristic evaluations to ensure system decisions were grounded in real user needs—particularly around situational awareness, camera health, and incident response.

2. MUI as the Core Framework

  • Selected Material UI (MUI) as the foundation to enable scalable, React-based UI components.

  • Customized themes, typography, and interaction models to align with Motorola’s design identity while maintaining accessibility (WCAG AA).

  • Created atomic design tokens for color, spacing, motion, and typography to ensure brand consistency across all applications.

3. Multi-Product Integration

  • Partnered with product teams to define shared component libraries (cards, tables, modals, alerts) adaptable to each product’s data density and visual hierarchy.

  • Introduced role-based UI states for operators, administrators, and technicians to support varied workflows in the same ecosystem.

  • Implemented design system governance, ensuring new product teams (e.g., cloud offerings) adopted the system from day one.

4. Documentation & Adoption

  • Built a centralized Figma library and Notion-based design system documentation portal.

  • Established a DesignOps process for contribution, review, and release cycles.

  • Partnered with front-end engineers to build Storybook documentation for live component previews.

5. Measurement & Continuous Improvement

  • Defined success metrics: component reuse rate, time-to-prototype reduction, NPS improvement, and UX consistency index.

  • Measured a 35 % reduction in design cycle time and a 45 % faster development-to-deploy rate for cloud features.

  • Launched quarterly Design System Council meetings for alignment and roadmap planning.

Notes & Documentation

Buttons

Typography

Logos

Examples of work

Key Contributions

  • Defined North Star UX 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.

Outcome

The unified Pivot Design System became the single source of truth for design and development, serving 300+ designers, engineers, and PMs across global teams.
It streamlined design delivery, improved visual coherence across five major products, and accelerated Motorola’s transition to AI-powered, cloud-connected security platforms.

Impact

  • Unified brand and UX across 5+ product lines.

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