ServiceNow

Context

Having already created early versions of the design system using their proprietary front-end tooling (Now UI Framework), the design system was moving off of React and into the world of web components (specifically, custom elements) to enable stronger Workspace experiences

Horizon (known at the time as Now Design System, or NDS) was established with its design system components and design tools to help internal teams align with product design direction, but they needed help in a few areas, including:

• Building new components to support shared UI patterns
• Enabling complex accessibility requirements in bleeding-edge web component standards
• Enabling platform-wide theming using CSS custom properties (variables)

Contributions by Right Warp included front-end development, architecture, project planning, and mentoring of junior team members to make meaningful contributions for the duration of projects.

Components

Horizon needed to expand its offering with a few new components:

• Accordions, to support collapsed content
• Buttons, particularly floating action buttons (or FAB)
• Date pickers, implemented with date-fns
• Modeless dialog, in combination with a FAB

In addition, numerous refactors and system-wide rewrites took place for nearly every component, particularly Modal, Alerts, Collapse, Popover, Dropdown, and Tooltip.

Accessibility

To support floating elements at an accessibility level, a library was created leveraging event-bus architecture. The coordination of multiple floating elements in a web interface is a notoriously challenging topic; solving modal-based accessibility provided consistent keyboard and screen reader behavior.

In addition, popover logic was added to an existing component to better support keyboard navigation in nested popover elements. This ensured context would never be lost for users in complex workflows, whether as a customer service agent or ServiceNow instance administrator. The panel-fit logic was also iterated to enable a variety of complex use-cases, such as generalizing its fit logic for several floating components.

Separately, better accessibility testing tools were implemented with Axe to ensure WCAG 2.1 compliance.

Theming

To enable a transition for platform-wide theming, Horizon was able to achieve it using an architecture consisting of CSS custom properties, enabling customers the ability to modify their UI for brand-fit and custom, accessible themes as needed.

The solution didn't just enable light and dark modes, but really any custom theme you can imagine. Its robust system- and component-specific variable architecture provides the means for truly deep customizations by administrators and designers alike.

Contributions in this project involved large system-wide migrations and CSS updates to consume theme variables and provide feedback on architecture, both from design and development perspectives.

Conclusion

The culmination of the above in the relatively small team (less than 15 members) supported 40M+ customers administrating and working from their ServiceNow instances, bringing them into a more customizable and accessible workspace experience.