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:
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
Status: in active use
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.
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.
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.
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.
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.
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:
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.
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.