GRIDSERVE - Building GRIDSERVE's First Design System

/Role

Lead Product Designer — system strategy, components, Figma standards, accessibility, governance, and engineering handover.

/Context

Design system built for a native mobile EV charging product, with foundations extended across website and web app experiences for a unified brand.

/Impact

Created GRIDSERVE's first design system, improving consistency, accessibility, handover quality, and scalable delivery.

/The challenge

As GRIDSERVE's product ecosystem expanded, inconsistent UI patterns were slowing delivery, fragmenting the user experience, and creating accessibility gaps. A unified, scalable system was needed to support growth while ensuring inclusive, consistent experiences across products.

/Team

Set the design direction and system architecture, working directly with web and mobile engineers throughout — from initial token and component decisions through to implementation review. Aligned client stakeholders around priorities and scope, ensuring the system served both immediate product needs and longer-term scalability.

Pre-system product landscape

Pre-system product landscape revealing visual and drift.

/The approach
  • Foundations — Defined core visual principles including typography, spacing, colour, and structural patterns, embedding accessibility standards from the outset to ensure contrast, hierarchy, and usability at scale.
  • Platform Toolkits — Built scalable web and mobile component libraries in Figma, aligned to platform specific requirements while maintaining cohesive, accessible interaction patterns.
  • Governance & Contribution — Introduced structured naming conventions, documentation, and contribution workflows to ensure long term maintainability, accessibility compliance, and adoption.
Unified system architecture

Unified system architecture supporting shared foundations and platform-level variation.

Semantic token structure

Semantic token structure enabling scalable theming and accessible colour foundations.

/Project challenges
  • Securing Stakeholder Buy In — Demonstrated the business and usability value of a unified, accessible system through clear prototypes and measurable outcomes.
  • Driving Adoption — Integrated the system into existing workflows, ensuring designers and engineers could adopt it without disruption.
  • Maintaining Cross Platform Consistency — Balanced shared principles with platform nuance across web and mobile while preserving accessibility standards.
/How did I have an impact?

Established GRIDSERVE's first design system from the ground up — defining the token architecture, component coverage, and governance model that would underpin both web and mobile product delivery.

Set the structural foundations that reduced duplication across design and engineering, enabling faster handovers and measurably less back-and-forth between disciplines.

Embedded accessibility standards into the system from the outset, addressing gaps that existed across the live product.

Worked to build stakeholder understanding of accessibility not as a compliance checkbox, but as a direct driver of product quality and commercial risk reduction.

Accelerated the design process across the team through a shared component library, reducing time spent recreating patterns and allowing more focus on higher-order product decisions.

Variant driven select field

Variant driven select field component supporting consistent states, icons, and error handling across platforms.

Scalable design system

Scalable design system powering consistent web and mobile experiences.

/Outcomes

Delivered GRIDSERVE's first unified design system, establishing visual and functional consistency across web and mobile for the first time.

Reduced friction in the design-to-development handover — engineers spent less time interpreting design intent, and designers spent less time fielding implementation questions.

Improved accessibility standards across the product suite, with token-level colour and contrast decisions embedded at the foundation rather than retrofitted at component level.

Created the structural conditions for the product team to scale delivery without accumulating design debt — reusable patterns, clear naming conventions, and a contribution model built to last.

Accessibility maturity remains a longer-term programme of work. The system established the right foundations; continued stakeholder education and iteration are the next steps.