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:
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 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 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.
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 a collaborative decision, the contributors decided to evolve from CSS tokens & shared styles to React.
The move to React components empowered designers to bring more types of components to the Design System.
Realizing the power of 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, designers, 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.
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.
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.