Insight UI. A design system for Highlight's observability platform, built from the ground up

Insight UI cover - design system and component library title card over dark network monitoring dashboards, with accessibility updates and dark mode badges

One system for a complex, multi-level product

Insight UI is the design system and product redesign underpinning Highlight's Service Observability Platform, a complex, multi-tenant SaaS product used by ~3,000 monthly active users to monitor infrastructure across 100,000+ global locations and 85+ vendor integrations. As the sole designer, I led the redesign from foundational tokens and reusable components through to accessibility, theming and production implementation. Highlight turns large volumes of network and performance data into something people can act on quickly, so the interface needs to stay information-rich without becoming difficult to scan. The goal was to modernise the product, improve consistency and accessibility, and build a system that could scale as new features were introduced.

Role

Lead UI Designer & Design Engineer

Scope

Product design · Design systems · Front-end implementation · Accessibility

Tools & Technology

Figma · React · TypeScript · SCSS · axe DevTools · Datadog

Scale & impact

~3,000

Monthly active users

100,000+

Global locations

85+

Vendor integrations

68%

Light + Dark theme adoption rate

WCAG AA

Minimum accessibility standard

Up to 7.36:1

Contrast ratio across status colours

Light and dark themes

Insight UI introduced dedicated light and dark themes using shared semantic colour tokens. Across the latest two-year reporting window, 744 of 1,098 users with a recorded theme preference selected Light or Dark, representing 68% adoption. Themes are implemented using CSS custom properties, so components consume functional roles for surface, text, borders and status, rather than hard-coded values. This keeps the system consistent as new components are added, while preserving hierarchy, contrast and meaning across the interface.

From design to production

Insight UI extends beyond the Figma library. I design and implement production React and TypeScript features and reusable UI components, taking work from UX exploration and prototyping through to the shipped interface. I also maintain and refactor the underlying SCSS architecture to improve consistency and scalability across the product.

Accessibility

WCAG AA was set as the minimum accessibility standard for the redesign. Accessibility testing using axe DevTools and manual review is incorporated into the design and development workflow, with particular attention given to contrast, keyboard interaction and status information that cannot rely on colour alone. Semantic tokens are also separated by purpose: text tokens are constrained by WCAG contrast requirements, while foreground tokens are tuned specifically for icons and graphical elements. Status text colours were tuned individually against their backgrounds, exceeding the WCAG AA minimum of 4.5:1, with contrast ratios up to 7.36:1 depending on state.

Ship, measure, iterate

Once features reach production, I use Datadog RUM, session recordings and Power BI to measure adoption, identify usability and performance issues, and guide post-release iteration. User interviews provide additional context where behavioural data alone cannot explain what users are experiencing.

Building the system

I created a token-based design system covering colour, typography and spacing, then used those foundations to build reusable components, interaction patterns and states. This provided a shared language between design and development, helping new features feel consistent without repeatedly solving the same UI problems.