The client embarked on a transformative journey to upgrade from outdated technologies to a flexible, headless architecture. The initial step in this ambitious project was the modernisation of the product listing page, utilising cutting-edge technologies like React Server Components (RSC) and a headless architecture. Moreover, they aimed to establish a comprehensive set of best practices, patterns, and libraries as a blueprint for other teams facing similar upgrades.

A critical and challenging aspect of this project was the development of a versatile and robust design system. This system needed to meet the diverse requirements of various teams while maintaining a consistent look and feel across the board. Achieving this balance was no small feat, but it was accomplished with great success.

This project wasn’t just about updating technology; it was about laying down a solid foundation for future growth and innovation. Through close collaboration and a forward-thinking approach, the client has not only modernised their digital presence but also empowered their teams for easier and more cohesive future developments.

Improved design consistency and DX by implementing a token-based design system

Improved interaction and communication between designers and engineers

Helped streamline the process of implementing Ul/UX designs

Helped onboarding other teams to contribute to a common design system implementation

Helped lay the foundation for a component library that meets cross-team requirements

Worked closely with design team to improve UI/UX implementation

Typescript

React

Next.js (app router)

React Server Components (RSC)

Styled Components

Style Dictionary (Amazon)

Storybook

Radix

Design tokens

GraphQL (Apollo Client)