Introducing Midnight, our Design System

Midnight is PayFit’s design system and also the name of the team working on it full time.
In this article, we will tell you where it comes from, and give you some explanations on the way we work in a fast-growing company.

A bit of history

Since its creation, Midnight has gone through several phases.

Midnight was initiated at the beginning of 2019 by Thomas Michel, who was our Product Designer at that time. To avoid duplicating things in his design tools (Sketch and Invision, back then) and to have a single source of truth for our growing team of designers, he started organizing all components of the PayFit application as a shared library.

As the team grew, more technical solutions were needed in order to allow developers to use the components created by the designers.
With the help of Thomas Roch, Tech Architect, Midnight took a new path: he created a UI library made with React, with the goal of publishing it as a package that can be used by all developers in the company.

The first stable version of the Midnight library was delivered in November 2019 with only 5 components.

Today the Midnight library provides designers and developers with 60 components. We have around 10,000 unique component usage throughout PayFit’s application. Seems to be a good adoption figure!

Midnight now has a dedicated team, composed of 5 members:

• Cyril Lopez, Lead Frontend engineer
• Sylvie Nguyen, Senior Product Designer,
• Fiona Gianquinto, Visual Designer,
• Nicolas Toulemont, Confirmed Frontend Engineer,
• and myself, Yann Isabel, Confirmed Frontend Engineer.

What is a Design System?

There is no standard definition of what a Design System is.
The common idea worldwide is that a Design System is a collection of shared patterns and practices that enable teams to build better products faster by making design reusable.
If you want to learn more about Design Systems, I recommend that you take a look at this book by Alla Kholmatova.

Design System as a Lego system

As a metaphor, I really like to talk about Lego.

All elements of the Lego world were designed to work together. With those elements you can design anything you can think of, just by assembling them. Over time new elements are created to answer new needs, to prevent getting bored, to follow fashion or to attract new customers, but they're all still working with all the existing elements.

With Midnight, we're following the Lego concept guided by few principles:

• It’s consistent. The way components are built and managed follows a predictable pattern.
• It’s self-contained. The design system is treated as a standalone dependency.
• It’s reusable. Each component can be reused in many contexts.
• It’s accessible. Applications built with our design system are usable by as many people as possible, no matter how they access the web.
• It’s robust. No matter the product or platform to which our design system is applied, it should perform with grace and minimal bugs.

With these principles in mind, we follow a methodology adapted from the Atomic Design by Brad Frost to classify our tokens and components:

• Foundations: This is where we gathered all our Tokens. (e.g: colors, spacing, text, icons).
• Components: These are the components that will be used to compose interfaces. These components are as atomic as possible, (e.g: avatar, buttons). They can be easily assembled to make more complex components.
• Patterns: These are groups of components that are related to the same global purpose but are designed for different functionalities. For instance, a Form group is composed of different fields such as Input, Select and so on, while a Navigation group is composed of links, modals, navigation menu and so on.
• Utilities: The utilities are primitive components or UI helpers. This is generally the structure of our components or components that could structure a layout (grid, column, row) with minimal predefined design decisions.

This classification is our standard that is used both by developers and designers in the Midnight team.

How do we work together and with other teams?

At PayFit, all product teams (also called squads) are working as a Triforce. This means that the team is led by a Product Manager, a Product Designer and an Engineering Manager.
You can find more information about the product organization in this article by Florian Fournier, co-founder of PayFit.

The Midnight team is one exception to this, because our team is led by a Product Designer and a Lead Frontend Engineer, without a PM. Each initiative we work on is owned by an ephemeral BiForce Design/Tech.
This is great because each designer of Midnight will work with each developer of the team at some point.

Collaboration and communication

Inside our team, communication and collaboration are the keys of our workflow. Working as a BiForce on each project doesn't mean that the owners are the only persons who work on the project. The other members of the Midnight team will also follow and help on the project but will be more contributors and reviewers than owners. They will be involved most of the time during the converging phases of the Double Diamond.
It allows us to parallelize projects, while keeping an eye on the evolution of our Design System.
To make this follow-up easier, in our sprints of 2 weeks we have a dedicated ritual called "Feedback Time" to present our current work to the rest of the team to get feedback and ideas as soon as possible.

To communicate with Midnight all employees of PayFit can join our channel called #ask-midnight and talk with us on any subject they want related to the Design System. We can also easily share Notion documents on which we need comments or additional content. It helps us to support teams, gather feedback and product needs.

Inner Sourcing

To go further in the collaboration and foster contribution from other teams to the Design System, we introduced inner sourcing last year. Inner sourcing means that as soon as a team needs an additional feature or a new component, a designer and/or, an engineer from this team can work with the Midnight team to make the component available for all teams via Midnight.

To make it easier for teams to “inner source” their needs into Midnight, we have pushed the idea of "Midnight buddies" to accompany the members of the involved team in every step of the project, during 2 weeks.

To prepare those two weeks, the team needs to make its own discovery, following this schema:

Tools

Because Midnight is not just a UI library, we also provide tools to not only help us collaborate more with teams, but also to understand how and where they are using this library inside the PayFit application.

Documentation

The documentation website is the main tool that we provide internally for everyone at PayFit.
It gathers all information concerning the Midnight Design System, such as general guidelines and rules to follow when it comes to build interfaces.
We also provide clear step-by-step guides to make sure that both designers and developers understand how to use the Midnight library.

Playground

Our documentation website also features a Playground tool. It’s a place to test and play with Midnight components on a code editor with a preview, right in the browser.
It also improves the Midnight comprehension by providing an editable interface that isolates the behaviors of our components.

Through the Playground, the teams we work with can share with us their experimentations with a unique URL generated on save.
As it is outside of the PayFit application, we can make sure that if there is an issue, it comes from the component itself, or from how it was used, and not from the application environment specificities. It saves a lot of debugging and learning time on both sides.

Monitoring

We have a monitoring tool to gather metrics on libraries and packages usage in the code base of all PayFit repositories. As not all the PayFit codebase uses Midnight yet, with these metrics we can measure the adoption of our library in the whole code base, and conversely find where it should be used more easily.

In a nutshell

In  Design System work, roughly 80% of the work is human interaction. In this part of the job, we have to evangelize, convince, foster the adoption, give proof of the impact it may have, etc. We also have to teach, learn from feedback, improve, and so on.

The good news is that the Midnight team has the chance to work in a company where the Design System concept is well understood and well adopted. So basically all teams we work with are using Midnight by default because it's part of their workflow. It allows us to invest more time on accompanying teams that want to use Midnight, than on having to worry about the adoption itself.

The ambitions we have for the future are:

• To create components that are not currently available in the library, but might be needed by teams,
• To make the library even more accessible,
• To better serve the responsiveness of the interfaces.

Also, one day, we would like to open source some of our work! The web is a tool shared by everyone and, because we're all using it and building it, we all want to make it better by sharing practices and knowledge. Hopefully soon!

This project could not have been possible without PayFiters who have now departed: Thomas Roch, Ayoub Adib, Yann Pringault, Mickaël Zhang

Header photo by Mourizal Zativa / Unsplash