Flame is Lightspeed's previous design system, which was actively contributed to until 2022. At the time I joined Lightspeed Commerce there was only one designer actively working on the system. With no dedicated developers, evolving a system becomes a challenge. The design team started to grow with many new team members and the system started to fall short. Therefor a small (but mighty) design system team was formed. I joined this team and in a short amount of time we made a big impact.

In a team of two designers, one developer and one manager, we kicked off our efforts. We developed a roadmap for the design system and did lots of research. This was not only focussed on the contents of the design system but also tooling, process and collaboration.

As the Lightspeed Product Design team was growing at a fast rate, we needed a better contribution model and we needed to evangelize the system and build community around it. So while we started re-writing documentation and updating components to be smarter, we also started working on broadcasting our work to the teams and squads around the globe and started actively involving Content Designers.

In order to learn what works and what doesn't work for the designers working with the system, we started hosting Open Office Hours and organized a monthly demo session. This quickly created a momentum and allowed us to find out what we needed to prioritize.

One of the main projects we worked on was totally revamping the way our foundations worked. There was no proper token system and often times designers were left in the dark as to which foundations to use when.

We identified not only that it was hard for designers to work with, but it was also hard for developers to implement and it wasn't supporting consistency in our designs. So instead of using a naming convention that focusses on the contents, we created a token system that focusses on its application.

We designed a whole new system that helps designers make informed decisions on, for example, color usage. A designer no longer has to pick between grey-20 and grey-30. The new naming convention and its supporting documentation makes it a much simpler task. Removing the ambiguity, saving time and creating more consistency. We updated every single component to reflect this system in the UI kit, code and in documentation.

Because of our Open Office Hours and accessible feedback & contribution model we were able to tweak the tokens here and there based on Product Designers and Developers feedback. We published our first iteration and hosted our first big demo to showcase it to the company. To accommodate for all time zones we also send out recordings and created a monthly newsletter, for those who prefer to consume the information in a written way.

All of this work was very well received and people were excited the system was getting its much deserves attention and care. We built trust and IC's started to provide more feedback and showed interest in contributing. The main different from the past was that now people saw that it was actually being picked up and that there was a team who wanted to collaborate.