Enterprise SaaS / Network monitoring
Insight UI. A design system for Highlight's observability platform, built from the ground up
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
Light and dark themes
Insight UI introduced dedicated light and dark themes using shared semantic colour tokens.
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 2.0 AA was established 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.
Impact
~3,000
Monthly active users
Light + Dark
Themes built on a shared design system
WCAG 2.0 AA
Minimum accessibility standard
Up to 7.36:1
Contrast ratio across status colours
