Sage Design System

At Sage, I led the mobile design system efforts across a suite of enterprise tools. I was responsible for designing, documenting, and scaling mobile components that now support multiple products across the business — from Sage HR to AutoEntry and Sage People.This checkout redesign was grounded in a wide base of research across the UK, US, and Australia. We combined analytics, session recordings, industry best practices, competitor audits, and user feedback to identify pain points and shape a clear, measurable direction.

Working as part of a global team, I collaborated closely with product designers, engineers, and accessibility specialists to align patterns and behavior across markets. We didn’t just build components; we built the infrastructure to support consistent, accessible mobile design at scale.

More than documentation

Zeroheight became our design system’s front door. I helped structure and write the guidance that made the system usable and useful across disciplines.

• Creating clear, visual documentation with usage guidelines, do/don’ts, and best practices

• Organising content into intuitive sections (foundations, components, patterns, motion, etc.)

• Making it accessible to everyone — from new designers to PMs to front-end engineers

• Continuously evolving it based on feedback from users across teams

• Ensuring guidance matched what was live in Storybook/Carbon, creating a tight loop between design and code

Read more about how Sage used ZeroHeight in a case study detailed below

Real-world applications

The mobile design system now supports a wide ecosystem of Sage mobile products. Below are a few examples a few examples of the broader mobile ecosystem that now benefits from a shared design language, implemented at scale.