Context

At Alan, we are all FullStack engineers. However, we don't all have the same front-end experiences, whether it's about best practices or design inclination.

So, how do we continue delivering the highest quality software and elevate the designers' work in such a dynamic and vibrant company like Alan? The answer is the Design System, of course ;)

The Mission

Starting with a comprehensive yet technically challenged component library (graphical inconsistencies, bugs, duplicate use cases), we, in collaboration with the Design team, implemented the following strategy:

• Definition of the Design System as a whole: principles, components, atoms, foundations, core components, design tokens

• Refactoring of the component library:

  • Sharing interfaces (Typescript) between React and React Native libraries to ensure a consistent practice on both mobile and web

  • Sorting components and migrating the codebase to establish a unified relationship between UX usage and a component

• Implementation of documentation using Storybook

• Creation and implementation of design tokens (colors, sizes) to ensure maximum consistency in size and margin management

• Implementation of linting rules (ESLint) to guide the 80 developers toward best practices

• Implementation of high-level design principles (UI Engineering Principles)

• Formation and management of a team of willing developers to evolve the Design System over the long term

• Study and implementation of the best styling solution for our needs

The major challenge of a project like this was that it was necessary to make all these changes without impacting the work of the 80 developers working on the same repository.

We established a precise action plan to ensure that the impact of the various migrations did not disrupt other teams, particularly through the creation of "progressive" linting rules:

• If a line of code doesn't comply with the rule but has never been touched, the linter remains silent

• If a developer touches the line in question, then they must correct the linter error

As a result, we managed to bring about graphical consistency in record time by involving all developers in making micro-changes over several months.

Today, Alan's Design System is a cornerstone of its visual identity and the efficiency of its teams.