Lightspeed Flame Design System

A Design System for a diverse suite of products

With a company history rich with acquisitions from the world over, Lightspeed was ripe for a way to harmonize the divergent styles presented in its products.

The Flame design system is a collaborative living set of multidisciplinary tools that helps Lightspeeders create unified experiences for its customers.

My contribution to the project was to:

  • produce and evolve the team Sketch shared library,
  • use an innersource model to facilitate contributions and discussions between siloed teams of >20 front-end and designers,
  • build an ultimately successful business case to management for a dedicated Design Systems team,
  • develop the roadmap for the Design System and present it as OKRs to management,
  • design, write, publish, and evangelize a Design System Documentation website.
  • correctly identify, design, include new components, patterns, and best practices into the Design System,

To date, the Lightspeed Flame Design System contains:
  • an Abstract-versionned Sketch library of shared components and styles,
  • > 30 components written in React and published to NPM
  • Product Content guidelines for writing within Lightspeed products,
  • a website of 51 pages documenting all components, best practices, code samples, and APIs for all atoms, components and patterns
  • Framer Classic and FramerX libraries for high-fidelity interactive prototyping using the Design System components
At the time of writing, Flame is in active use at Lightspeed by all web front-end teams. It powers 10 teams, 5 products, and 30 Lightspeeders to deliver value to our customers.

Company: Lightspeed POS
Team: Guillaume Lambert, Xavier Drdak, Maarten Afink, Karan Shahani, Kevin Vicrey
Role: Product Designer, Front-End Developer, Product Manager
Timeline: 2016-2019 (ongoing)
Status: in active use

How did this happen? What was my process?

1. Humble beginnings (CSS)

Starting in 2016, I noticed that most design work at Lightspeed was inconsistent at many levels. Having worked on a Design System previously at EF, I understood how to this problem could be remedied. My first step was to find an allies among the Front-end development guild. Together, we explored the idea of building a Design System, and how this might benefit UX Design and Front-end development.

The first few components were made of to CSS classes. We decided to leverage a small project as a proof-of-concept. Getting buy-in from PMs and other developers across the organization was critical: a small time investment up-front in exchange for more quality, speed, and consistency in the future.

UI design for the Design System proof-of-concept
UI design for the Design System proof-of-concept (currently in production)

2. Growth & team buy-in (contributions & React)

Developers and designers quickly gained interest in the Design System. All designers were already using the Sketch and Framer libraries we had created for ultra-fast UI design and prototyping.

Developers from other teams who saw value in this Design System started using it and contributing back to it. This was amazing! Very quickly, the number of components available to us was growing due to the positive feedback loop that the team had initiated.

In an collaborative decision, the contributors decided to evolve from CSS tokens & shared styles to React.

The move React components empowered designers to bring more types of components to the Design System.

For example, I worked to automate the creation of icons from Sketch-exported SVGs to React icon components with customizable 3-tone style.

Sample of the icon set created as React components
Sample of the icon set created as React components

3. Tabular expansion

Realizing the power the Design System on one hand and some inconsistent pages in our products, I rallied designers from each of the major 3 web products from Lightspeed to collaborate on the design and conceptualization of a Table component: arguably the most complex component yet.

To maximize usefulness for all developers, designer and, customers, this Table component would have to support many workflows and modalities. I led interface inventories, competitive analyses, and many design workshops with stakeholders in order to get this right.

We agreed on a design which supported all of the features the Table should have: listing, search, sorting, filtering, summarizing, paginating, and more.

Filter Table from the Flame Design System
Filter Table from the Flame Design System

To test out assumptions about how the Table would be understood by its users, I built a total of 9 iterations of interactive prototypes for the Table's filtering behaviour. This test was massively successful in identifying the wins and flaws of the table.

Link to the Framer Table Filtering Prototype

As I was building the prototype, I learned how to use anonymous functions with map and filter, fetch mock data from the network, optmize rendering, and write modular single-resposibility code.

I am very pleased that the Table is now an integral part of the Design System and in use by all product teams.

4. Birth of a team

After a year and a half of building the Design System in a distributed way, I wanted to further increase the velocity and quality of the Design System. I pitched to key stakeholders the idea that the company should invest in a dedicated team for the Design System.

I put together a presentation outlining the benefits of spending dedicated resources to internal tooling. By attaching a dollar value to the potential benefit of having a dedicated team, I was able to convince senior management to pull together people from existing teams and new hires to form the Design System team. We are (at time of writing) 4 developers and 2 designers. I fall into the latter, and also was bestowed the responsibility of being Product Manager. This has been a huge challenge for me, as I have never received training on how to be a Product Manager.

The Lightspeed Design System team enjoying some Ramen 🍜
The Lightspeed Design System team enjoying some Ramen 🍜

5. Hardening and evangelizing

With a newfound team and hopeful hearts, the team transitioned from working on the Design System as an "innovation time" project to treating it like a product. Our first initiative was to improve the developer experience of using the Design System. This meant moving from CSS tokens and webpack configs to CSS-in-JS (using styled system) and distributed builds for the React Components.
The improvements were significant.
From a previously difficult-to-navigate experience which might take a mid-level front-end developer 2 hours to set up, we moved to a way of working that required less than 2 minutes to set up.

The team now offered an easy-to-use solution for installation and usage of our UI components.

Gap analysis showed that our stakeholders (designers, developers, product managers, quality specialists) were being provided with very little guidance as to how, when, and why to use each component. This was to be our next leap forward as a product. I teamed up with the other designer on the team to design, develop, and launch a comprehensive documentation site for the Design System to boost understanding and context of the tools we were providing.

After working for about 2 months continuously, the MVP for our site was done. By launch, it contained:

  • Getting started guide for design and development,
  • Atoms documentation (color, spacing, typography, iconography),
  • Product Content writing guidelines,
  • Component documentation including example usage, copy guidelines, code playground, and API documentation,
  • Pattern documentation for high-level components and component compositions.

Landing page for the Lightspeed Flame Design System
Landing page for the Lightspeed Flame Design System

Creating the site was not enough. Lightspeeders needed to know what it was, why it was good for them, and how to access it. With that in mind, I organized and held 2 "lunch-and-learn" events at Lightspeed offices (in Amsterdam and Montreal) to properly launch the Design System Documentation website. This launch resulted in a 60% increase in visits to the site week-over-week from the previous soft-launch initiatives.

Launching the Design System in Amsterdam
Launching the Design System in Amsterdam

If you're still reading, I think you deserve a visit to the Design System site. The URL from the slide above is for internal use only.