case study

Embedded design system engineers

Enterprise HR software platform

Embedding specialist frontend and UI/UX engineers into an enterprise product team to build a design system at organisational pace

Embedded engineers·AI-Augmented Teams·HR Technology / SaaS·February 2023

Client identity and commercially sensitive detail are withheld under the confidentiality terms of this engagement.

Challenge

Challenge Our client had already made the strategic decision to invest in a unified design system for their HR platform. The business case was clear: a large customer base, a large user base, and a large engineering organisation building simultaneously across a multi-module suite. Without a shared component library and design language, product inconsistency and engineering duplication were structural problems that would compound with every feature shipped. The challenge was not what to build. It was who would build it. A production-grade design system - tokens, a typed React component library, a documentation site, a theming architecture, an adoption program - is a significant undertaking. It needs specialists: engineers who understand component API design, accessibility implementation, and CSS-in-JS architecture, and who can build for developer experience as much as end-user experience. It needs designers who work at the system level rather than the feature level, thinking in tokens and patterns rather than individual screens. The internal engineering team was fully deployed on product delivery. Pulling senior engineers off features to build infrastructure was not viable. Hiring specialist design system engineers takes months and adds permanent headcount for work with a defined endpoint. The right answer was to augment: bring in specialist capacity for the duration of the build, embedded directly in the client's team, working to the client's processes and timelines.

Approach

Approach We embedded a team of specialist frontend engineers and UI/UX designers directly into the client's product organisation. They joined the client's standups, used the client's tools, took part in sprint ceremonies, and worked inside the client's engineering process - not as an external agency delivering work in batches, but as an extension of the internal team with full context and daily collaboration. Team composition was matched deliberately to the workstream: frontend engineers with specific experience in React component library architecture, TypeScript API design, and CSS-in-JS styling; UI/UX designers experienced in token systems, component library construction, and designing for developer experience alongside end-user experience. That specialisation was the whole point - the internal team had strong product engineers and product designers; what it needed was design system specialists. The handover plan was defined in the first week. The goal was never to create a dependency on us. Every technical decision was documented. The component architecture was designed to be maintainable by internal engineers without the original authors present. The documentation site was built so onboarding a new team member meant reading the docs, not finding someone who was there at the time. The adoption program included training, contribution guidelines, and a structured period of parallel support while internal teams progressively took ownership.

Solution

Solution The embedded team delivered across the full design system workstream alongside the internal organisation: Frontend engineering capacity - specialist React and TypeScript engineers embedded full-time, owning component architecture decisions, the component library implementation, the CSS-in-JS theming system, the documentation site build, and the automated prop API generation pipeline. Working at full sprint velocity inside the client's engineering process from day one. UI/UX design capacity - system-level designers embedded in the design organisation, owning the token system, the component library construction, interaction pattern definition, accessibility design review, and white-label theming design. Working directly with the client's product designers to keep the design library and the code library in sync throughout the build. Design-to-code workflow - established and documented the process by which design decisions translate into token changes and component updates in code. This daily handshake between design and engineering is what prevents design system drift; getting it right as a process, rather than as a one-time deliverable, was a specific focus of the engagement. Adoption program delivery - presentations to product teams, component onboarding workshops, migration guides for teams moving off the legacy styled library, and a defined contribution process for teams proposing new components or variants. Knowledge transfer - structured handover across the engagement: architecture documentation, contribution guidelines, component decision rationale, and a defined overlap period supporting internal engineers as they took ownership. The engagement ended with the client's team fully capable of maintaining and extending the system independently.

Results

Results The embedded model gave the client specialist capacity to deliver a production-grade design system without permanent headcount overhead and without pulling senior product engineers off feature delivery. The system shipped on schedule, was adopted across the engineering organisation, and was recognised with an internal engineering excellence award. The client's team owns and extends it independently, with no ongoing dependency on us. What this engagement demonstrates: augmentation done properly - specialist expertise embedded deeply for a defined, high-value workstream, with a handover designed from week one rather than negotiated at the end.

Technologies

React(Frontend)TypeScript(Frontend)Emotion(Frontend)Figma (design token system, component library)(Design)Design-to-code workflow(Design)Component API design(Frontend)Accessibility implementation (WCAG 2.1 AA)(Frontend)Next.js (documentation site)(Frontend)Jira(Backend)GitHub(Backend)Sprint ceremonies and agile delivery(Backend)Structured knowledge transfer(Backend)

Ready to reach escape velocity?

Let's talk about your product.

Contact us