Building Penta - Fiverr's Design System

In 2020 I took on a leading role in establishing the first design system behind Fiverr.com. Take a sneak peak to my journey as I'm breaking down the different phases of Penta from early days to maturity.

Year

2018 - Present

Company

Fiverr

Role

Product Design Lead

Highlights
#

  • Onboarding Designers and FE Engineers
  • Identifying and introducing new design patterns
  • Creating contribution models
  • Architecting and managing multiple design libraries (Figma)
  • Introducing Layout, Typography and base React components
  • Delivering a documentation website
  • Introducing local libraries
  • Introducing design tokens

What is Fiverr?
#

Fiverr is an online marketplace for freelance services that provides a platform for freelancers to offer services to customers worldwide.

How things started
#

Prior to my design system journey, back in 2018, we had a design kit built with Sketch. This was an on-going collaborative thing. I was one of the core contributors who helped in the various tasks, such as creating components and keeping things nicely organized and easy to use. I had previous experience in doing that while I was working for SimilarWeb back in 2017, where I was building the first ever design library.

A screenshot of Fiverr design kit in Sketch, 2018.

A screenshot of Fiverr design kit in Sketch, 2018.

Why did we need a design system?
#

Back at the time, we used the Sketch design kit as an internal way for us, designers, to save time in building common components and creating consistent mockups, which was fine at the beginning. However, soon enough we were on a point that this was insufficient to solve problems at large scale and bring design and code together - we were an orechestra that played way out of sync . Designers and engineers were very distanced from each other, and sometime literally. We had a different mindset, different set of jargon and essentially a very different perspective.

Ultimately this resulted in longer development cycles and a lot of inconsistencies in our experiences. Not only that our end users suffered by this, but also our ability to ship quality products as an organization.

By this point, we knew we needed to systemize the way we craft our digital experiences. We needed to change our mindset and methodologies and put more emphasize on product goals and user experience we believe our users deserve rather than pushing a few pixels here and there.

Transitioning from Product design to Design system
#

After the efforts to sell the design system idea found success (with the help of @nadavbarkan, @benbenhorin and @razcohen 👏), and given the fact I was very engaged with the design system idea and have experience in engineering, I was offered the role of leading our design system in full time. Finally, I felt that we can invest the right amount of time and attention to tackle the issues we were experiencing.

After 2 years of being a product designer, I started my adventure of visioning, planning and crafting the future of our design system. At that time, I was the only person among 800 employees in Fiverr who was dedicated to work on this mission in full time. That being said, it came with a lot of responsibility and a lot of challenges.