Visual Design and Design Ops
Pivot Design System
March 2023
Team: 3 designers
From Lookalikes to Leaders:
How Design System Unifies Avigilon & Pelco Brands
Motorola Solutions, owner of both Avigilon and Pelco security 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.
Logo before and after the refresh in 2023
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.
Examples of components
Hello, Design Tokens
A key component of this design system's efficiency is the implementation of Design Tokens.
Design tokens setup (or as they are called ‘variables’ in Figma)
These act as a single source of truth for all design elements, including colors, typography, and spacing. This centralized approach ensures that designers across the Avigilon team always use the correct styles and eliminate inconsistencies.
Furthermore, Design Tokens empower the creation of themes. With a single click, designers can switch between Avigilon's and Pelco's branding, allowing for rapid exploration and iteration within a cohesive system. This not only streamlines the design process but also fosters a culture of brand consistency within the large design team.
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.
Desktop grid
Web grid
Mobile grid
Examples of grids in use
Before & After
Results
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