Lyyti Design System

As both the engineering and design teams gained maturity, it became pretty clear that without a Design System, our (then) Design team of two would be in trouble. We wanted to be fast, efficient and consistent — enter the Lyyti Design System.

To protect Lyyti's business, I have omitted and obfuscated some information in this case study. All information in this case study is my own and does not necessarily reflect the views of Lyyti.

Contribution

Research, Visual design

Key Collaborators

Design lead, Product manager, Software engineers, QA

Year

2020

The origin story

I joined Lyyti as the second in-house designer. Our new team of two just did not have enough time (or enough designers!) to address all of our product’s design needs.
During my first weeks at Lyyti, I noticed a common difficulty that former design teams of one face: we had no design documentation at many levels, including styles, components, or patterns. That made us slow, inconsistent, and worst of all, we were missing out on time to focus on something else: our user’s problems.
We knew having a Design System would allow us to not only have more time to focus on developing our product but also let us experiment much faster. An added benefit would be deepening the relationship with our engineers. We wanted to stop checking if things needed to be moved a few pixels over and prioritize bigger conversations.

Prep work

I had no idea how to get started with this monumental task. That meant that a big chunk of time went into research. I read anything I could find regarding Design Systems. I talked to other designers, and I went to so many Design System webinars that things started to make sense.

Interlude, or a side note on good timing

Many Design System success stories mention the Design System release being bundled with a project or product launch. In 2020, Lyyti had been working on polishing out its brand. The result of it was a revised brand book with new colors, typefaces, and a well-considered tone of voice, supported by custom-made illustrations by Kati Närhi. This new brand vision could now be applied to our product as well, to get us to the level of consistency we set out to have.

Key decisions

I started a lightweight UI audit — an amazing way to showcase all our inconsistencies and map out our most used UI components. We decided our Version 1 would contain buttons, text inputs, and a few other basic controls, in addition to the redefined typography, shapes, and illustrations.
After learning more about the engineering requirements and constraints, we were able to chart a plan and define the tools that would work best for our teams: designers would create components on Figma, and Frontend engineers would host components in Storybook. Documentation and versioning would be on Zeroheight so that the entire Lyyti team could make the most of the Design System.

Building the Design System

Documenting brand guidelines

With the new brand guidelines, this step was a breeze. All we needed to do was to transfer our brand book to Figma, connect it to Zeroheight, and write down the rules. Under our brand guidelines, Lyyti colleagues can now find guidance and instruction on how to use:

— Lyyti’s logos in different sizes and formats
— Brand colors and interface-specific colors
— Images
— Tone of voice, with Content writing guidelines and tips

Building a UI kit

With colors and typefaces defined and a shortlist of components to get started with, Emmi and I spent a bit of time finding out a style that would communicate the essence of Lyyti. When we were satisfied with the result, we went ahead and started building a UI kit. Taking into consideration our budget and needs, we decided against creating a fully bespoke component library, and opted to adapt an existing system, theMaterial UI (MUI). MUI offers highly customizable design kits, and a React library for our Frontend engineers, which was tremendously helpful.

This was my favorite phase of the project. Emmi and I had agreed to prioritize quality over quantity, and it paid off: we created components that could be resized, colored and changed to different states with no effort. As a bonus, I got to challenge myself with the intricacies of Figma.

Ship it!

It was really important for us that the rest of the company would buy into this project and take ownership of it (honestly, building a design system is as much a political exercise as a creative one). Instead of naming it ourselves, I created a poll on the main Slack channel giving a few suggestions and asking for more opinions. In the end, the company decided on the "Lyyti Design System" — an easy way for everyone to know what we’re talking about.

Holding an onboarding session for the team

Although a lot of people were involved in this project, there were still plenty of our colleagues that weren't, particularly those who were not directly building the product but were collaborating, such as the Marketing and Content team. To help those coworkers, my colleague Mariana (we had grown from a team of two designers to four!) held an onboarding session to show everyone the ropes.

Paving the road to success

It really was hard work to get this design system up and running. Emmi dreamt of buttons. I feared auto-layouts for a while. And it has paid off, with the most promising outcome being to see both the design and engineering teams being able to truly focus on tackling user needs by using the design system when building Lyyti's ambitious vision for a modern, improved event management product, the Lyyti Next Gen.