A new design system to build better and faster

singulart - client work - 2022

In May 2022, I joined Singulart, an international art and design platform that allows collectors and art enthusiasts to buy contemporary works online. The art sector has been deeply affected by the COVID-19 pandemic, forcing everything to move online: galleries, auctions, showrooms, etc. Created in 2017, Singulart has seen its activity grow rapidly and has raised €60 million in series B funding round in November 2021. I joined the new product team to help them on two product scopes :

Besides my work on those two product scopes, I also worked on and led cross-functional design initiatives to deliver the best Singulart experience possible. In this specific and interesting context of high growth, I decided to reflect back on two typical design challenges growing tech companies are facing :

Role : Senior Product Designer

Period : May 2022 - September 2022

By reading your favorite newspaper on your phone or typing an email on your computer, you are constantly using in your everyday life design patterns, i.e. re-usable form of a solution to a design problem occurring over and over again in your environment, let’s say to stuck to our examples, reading the news headlines of the day on a mobile screen, or typing the letter “Q” on the QWERTY layout of a keyboard.

A design system, is a complete set of standardized patterns and reusable components intended to manage design at scale, and it has become extremely popular with the rise of the modern internet, the transformation of many industries through software, and the wide delivery of products and services at a global scale.

Nevertheless, the best design system in the world would be worthless if your product is not answering your user's problems. If it actually does, a design system can be of great help to build better and faster. As Product Designers are dealing more and more with design systems, I decided to dedicate this post on my experience of building a design system at Singulart.

The best design system in the world would be worthless if your product is not answering your user's problems

Why we need design systems

This question has been answered extendedly through multiple books and blog posts for many years now, so I won’t get through redundant details and will try instead to point out the specific cases which made investing in a design system especially relevant for Singulart, a growing tech company with a new product team.

User experience consistency

An early-stage company is usually shipping fast one-off solutions to test its assumption on its market. By the time a product market fit has been found - and the company has reached a stage of growth - the product has been crafted by different hands, those of the founders, those of some engineers, marketers, or product people. The resulting patchwork of inconsistent patterns and components withers the user experience. With the set up of the new product department at Singulart, the new design system helped us to build a more cohesive user experience and consistent design language for our users.

Unified brand identity

Building a strong brand identity on a presentation slide for a 48-sheet billboard is way different than making this same brand identity sound in the depths of your product, let’s say through a checkbox on your online checkout page. I have too often witnessed a problematic gap between the brand identity defined on paper, and the one actually perceived by the users through their experience with each interface element. It has also been the case at Singulart. The design system helped us to offer our users a unified brand identity throughout all the product.

Speed up work to focus on what matters

As I always advocate, a good Product Designer doesn't ship crystal clear interfaces, a good Product Designer ships crystal clear interfaces that are actually solving user problems. Using a design system, especially with modern and collaborative interface design applications, has the potential to ramp up the production of prototypes and thus to free up more time for what really matters: not pixels, but user problems. Once implemented a design system offers easier maintenance, better scalability, and reduces technical debt both on the design and the technical side. After some investment upfront, we were quickly able to design prototypes and iterate way faster.

Using a design system, especially with modern and collaborative interface design applications, has the potential to ramp up the production of prototypes and thus to free up more time for what really matters: not pixels, but user problems

How to build a design system

It’s common nowadays, especially in large tech companies, to have Designers, Front-End Engineers, Product Managers, and Project Managers fully dedicated to design systems. It was not the case at Singulart, where the growing Product and Tech team was composed of around 35 people, of which only two of us were in charge of the product design (me included) when I joined. Our focus was to work on the product roadmap to deliver our users new features, and the work on the design system was a cross-functional side initiative. A rigorous organization was required to make this design system a success. Here is my advice on how to build a design system without a dedicated team.

Build trust with the Brand and Tech teams

Led by the Product Design team, a design system nevertheless remains a cross-functional project and thus building a closed and trusting relationship with both the Brand and the Tech team is necessary. The first one, to validate the principles and foundation of the design system according to the identity and values of the company, and the second one, to groom, implement, and document patterns and components within the code architecture.

Build a clear and shared workflow

Even if you have a team dedicated to your design system, it’s never a one-shot, ad-hoc project, and to make it continuously progress, you will need a clear workflow shared among the teams involved. At Singulart we divided it into three main steps :

Build an active Product Design and Front-End collaboration

To keep moving the design system forward, a close collaboration with the Front-End Engineers is especially required. At Singulart we created a weekly design system committee, gathering together, voluntarily, Product Designers and Front-End engineers with a simple agenda based on our workflow :

PS : In addition to moving forward faster on the design system, interacting with Front-End Engineers is always extremely fruitful for Product Designers. Part of our respective job is the same, one produced through vector graphic edition, the other through lines of code and there is no reason that they will not merge one day.

Singulart’s design system

Singulart’s purpose as an online art and design platform is to empower artists and designers to allow a transparent experience with buyers. It means that we are in this particular case where our brand identity should promote the aesthetic of multiple others. Regarding the state of the platform design at the time we started to build the design system, two principles guided our work:

Singulart brings to light the work of designers and artists

From the psychological point of view of our potential customers, buying an impressionist painting is emotionally different than buying a flat screwdriver. While the second experience is based on “findability” (users look for items - the adequate screwdriver), the first one is based on “discoverability” (users come across the item - the one they fall in love with). Our design system should leverage this personal and intimate connection by giving more space to the work of our artists and designers because this is where the emotion is coming from.

To illustrate this principle with an example, we built a new product item component with new image display rules and captions rules, optimized to give more space and importance to the visuals.

A new product item component that gives more space and importance to the visuals. Artworks from Maxim Fomenko

Singulart helps buyers to get into art and design

Our positioning is the one of a trusted third party, helping all buyers to get into the world of contemporary artists and designers. Therefore, our own brand reflected through the product, should not take over our creators’ own work.

To illustrate this principle with an example, we built a new color system with a richer grey scale to easily compose elegant interfaces without being deadly dull. We created a new light gold, used especially for content aimed to help and accompany our users in the world of contemporary art and design.

New colors to compose elegant interfaces

Another example is the strict limitation of border radius and shadows that can be too expressive and unnecessarily monopolize visual attention.

New buttons have a light border radius and the use of box shadows is limited to case were depicting elevation is necessary.

Conclusion and lessons learned

As a Product Designer with a primary focus on user research, product thinking, and user experience design, I have often composed interfaces with components coming from existing design system. Building one from scratch has been a great learning opportunity both for the design of patterns and components, and the organisational side of the construction of a design system, especially when you don’t have anyone fully dedicated to it.

As with every project, there are things I wished we would have done differently. I’m sharing here, some of the lessons I have learned.

Clearly define a design system lead

Even if it’s a collaborative initiative, any project to properly move forward need a clear leadership.  With the other Product Designer I built this design system with, at first we didn’t name a project leader. Afterward I think it would have been better with one, to drive the dynamic required. I recommend also to name one design system lead on the product design side, and one on the technical side, each responsable of their respective workflow mentioned previously.

Allocate weekly fixed time to work on it

If no one is fully dedicated to the design system, or if it’s not part of your personal or team objectives, it’s easy to get absorbed by the product roadmap delivery and somehow let the design system fall by the wayside. Don’t forget, that the sooner you will have a strong design system implemented, the more you will have time for the most valuable part of your projects. I recommend to set fixed weekly time slots dedicated to the design system.

Don’t wait for your component to be perfect to implement it

We lost a lot of time validating some basic components because we didn’t have all the different variants, types and states prepared. It’s a good thing to try to cover all possible cases, but it’s important to keep in mind the impact the component will have on the users. It's often better to implement a simple component that covers 90% of the case, than to wait far longer to have just the 10% missing covered. It’s always possible, once implemented, to make a component evolve, and it goes faster because now it’s living as a component in the code.

If you are thinking about building a design system and need someone to lead this project, please  contact me.