CXUI Component Library

Colorful geometric shapes including a pink triangle, yellow square, blue circle, green semicircle, and red rectangle on a black background.

This library’s 56 accessible and feature-rich UI components are the building blocks for Cisco’s CX Cloud and PX Cloud. It empowers 150+ engineers across 12+ teams.

As a Senior UX Engineer, I partner with the design system team to vet each component for accessibility and maintainability, before building them using Angular. Once released, I act as a developer advocate to encourage and support the adoption of these components.

I have contributed 15+ components to the library; below are a few examples.

File Upload

The File Upload component allows users to upload files by drag-and-drop or through the “browse files” button, which triggers the system’s file explorer. It has built-in file type, size, duplicate, and file count validations. It also allows for custom error messaging to provide more clarity to the user. Depending on the file’s upload state, the file upload can be canceled, deleted, or dismissed.

Design Document
Screenshot of a file upload interface showing multiple files uploading and processing, including PDF and PNG files with statuses such as completed, uploading, or with issues.
Screenshot of a file upload interface showing multiple files with some errors and statuses, including completed, uploading, and pending files.

Timelog

The Timelog component presents information clearly and chronologically. Users can easily add, edit, and delete items. Developers could also define input validation rules. Despite having multiple parts, all elements are encapsulated within the Timelog component, simplifying the process of adding them to pages. This component is utilized for displaying order statuses, activity histories, and comments on support cases.

Design Document
Screenshot of a web interface showing three timeline sections with placeholder text. The sections are titled 'Sample Timelog', 'Timelog that cannot be updated', and 'This can only be edited'. There is a blue 'Add new' button at the top left and a menu with 'Edit' and 'Delete' options on the right side.

Locked

“Locked” is an engineered state that prevents users from doing a typical action, i.e. clicking a button to go to a new page. Instead, users get a tooltip explaining why they cannot perform that action. This allows one platform to serve several user types with different access levels. It can also encourage upsells by showing all available capabilities, but blocking the action until the user purchases the matching service level.

Screenshot of a digital interface showing a copyright notice and a locked item with text indicating it is a sample code for a secondary navigation item.
Design Document