Design Systems for Preply

I joined Preply, a language-learning company, in November 2021. Ten people design org in a company of a few hundred was looking for someone to take care of their design system. Together with a senior front-end engineer (and later with one additional junior engineer) we spent the next twelve months doing spring-cleaning, and putting together solid foundation for future development.

By the time I joined Preply, they'd had a few years’ worth of accumulated design debt captured in the form of a few Figma libraries, accompanied by inconsistent and oftentimes outdated guidelines. Tooling for developers also was in a substantually neglected state. As a newly established team, we had to move quickly. We needed to lay the foundation and start building useful tooling on top.

Introducing new components rapidly

Throughout my time at Preply, I was primarily focused on elevating the design team's experience with the design system, via building better components that used the best practices. My other main concern was closing the gap between engineering and designers by making sure that all the components and tools that the design system team worked on was immediately available and easily usable in the existing codebase.

Each of the basic components went through the rebuild process. We increased ease of use, introduced new functionality and increased the alignment of code and Figma components.

The work included creation of a complex multi-variant structures occasionally to make sure that designers are not left guessing about how certain states and combinations of props look like. Neither the engineers were left behind with everything that designers had access to being available in code. Components were modular both in Figma and in code, this allowed consumers to compose them easily and with confidence.

We always made sure that these new complex components would be built to last and include many quality-of-life features, in order to enable rapid and rich prototyping, as well as new UI creation.

That, however, did not mean that the development cycles were long. On the contrary; the large and complex projects were delivered quickly and efficiently, and the small and urgent were immediately attended to and completed on the same day. When the Russian invasion of Ukraine started in February of 2022, we've rolled out a new logo with the Ukrainian flag colors and the accompanying website favicon in a matter of hours. As Preply is a company with Ukrainian roots, showing support and solidarity was a matter of utmost urgency and importance.

Supporting and guiding product teams

Of course, even producing the best components in the world would not be worth much if those components did not gain traction in the product. The only way to achieve adoption organically was embracing the mindset of a service team that is always there to support the product teams in any possible way, be it through adding features or components that they need, amending functionality that they have encountered problems with, or guiding them through the changes and new features.

In lots of cases this meant not just providing guidance about the technical stuff regarding new functionality that folks may have been yet unfamiliar with, but also clearly communicating common universal design rules that can be applied everywhere. The approach we took was to add a short Do and Don't sections intermingled with the rest of the documentation related to a specific pattern, component or concept.

Still, guidelines attached to a separate documentation website can never replace just-in-time assistance, so I made sure to offer the same amount of support right where people were actually using components that we were providing: in the comment field on top of the property pane of Figma components and in the tooltips of components in the assets tab.

New updates were communicated clearly through multiple channels: Slack updates in a dedicated channel, detailed changelogs in the respective mediums, regular townhall meetings etc.

The process of contribution was kept simple, with the design system team being responsible for majority of the activities. The turnaround from the proposal to the implementation was kept short, never exceeding a couple of weeks. In most cases, just under three days. At the same time, folks were always invited to review and approve all the work-in-progress so that we wouldn't miss anything.

Color

The old color palettes of Preply were riddled with numerous issues, such as lack of accessible combinations, low amount of appealing combinations, the classic “too many gray shades” issue, and lack of consistency with numerical naming of the steps in the color ramps. My personal pet peeve: Preply's brand color was named “blue” despite being distinctly cyan and despite the palette containing another blue color that was named “violet”.

For the updated color palettes, evolutionary development was chosen instead of pursuing a radical departure from the previous hues. New color ramps very produced using ColorBox. After that I did the final fine-tuning in HueTone: colors were normalized to have clear accessibility combination guidance according to their names, and match overall lightness and saturation.

A few different in character approaches for color generation rules were tried out and presented to the design team for evaluation.

One of the hardest scales to normalize, unsuprisingly, was the yellow one. I had to try many different approaches to make sure that it has a sufficient contrast, while staying recognizable and having an appealing look.

After all the due dilligence and getting the buy-in and approval of the product design team I assembled the new palette.

On a last-minute request from the brand team a few more adjustments were made and one more additional color was added. Preply now had a future-proofed set of colors that we were able to combine confidently getting combinations with a good contrast. And they were also more catchy and appealing than the previous color palette.

For the rollout, a set of deprecation messages was added to the old styles, and extensive evangelizing with many comparisons was presented to internal teams.

Typography

Prior to 2021, Preply was using a mix of Roboto and Arial as brand typefaces, but this was about to change with the brand uplift project being underway. Initially, Poppins was selected as a new brand typeface. This choice by the brand team was not viable for a language-learning company due to a very limited language support. After informing all stakeholders of the downsides of such a choice and getting buy-in for finding a better alternative, the ultimate choice was made for Inter, a popular neutral geometric grotesque that could with some Opentype features look quite close to the the style of Poppins.

After a new typeface choice was approved, the technical questions of rolling it out needed a solution too. Previously Preply relied on Google Fonts. Self-hosting font binaries is a superior choice (and the only appropriate one in case you want to use Inter with certain Opentype features, that are stripped from the version that is hosted by Google). To get the buy-in for this technical change, I did extensive benchmarking, so that the engineering team could get behind this decision too.

With self-hosting receiving a green light from engineering, special customized Inter binaries were produced. The relevant Opentype flags were turned on directly in the binary files, and files were split by unicode-range to optimize loading speeds. The fallback font (Arial), that would be shown for a brief period of time while our binaries were still downloading, was adjusted and fine-tuned with CSS to cause a minimal amount of reflow in the layout once loading was finished.

With all of preparation and technical work out of the way the new brand typeface was soft-launched, increasing legibility, improving performance, and establishing a new consistent brand feeling.

Taking charge of roadmaps

With the project as multifaceted as design systems usually are, keeping key stakeholders is a non-trivial task. One of the main difficulties that they typically have is common lack of understanding just how interconnected everything in a design system is. To illustrate this point and keep everyone updated on the current status and the future roadmap, I created a Miro board which we would then update regularly.

This provided a nice bird-eye view and a visual explanation of different UI patterns and their connections to one another.

Obsessing over the smallest details

For me personally, the most memorable moments are the small and obscure ones. Making sure that the quality of an individual detail is the best possible, doesn't take too much time, but the impact of such “polish” can be long-lasting.

Sometimes it's a matter of simply applying best practices and paying attention to details, but occasionally this means figuring out novel technical solutions.

And sometimes it's simply a matter of re-doing the job, because you made a mistake before and it's worth fixing that bug, no matter how rare it would occur.

During my time at Preply a new functional design system was built and adopted. The chaos was conquered, foundations were laid for future swift and painless large-scale design changes. Design systems are a hard craft, but they don't have to take forever to build or paralyze product feature development. Instead they can be a reliable helper that will make sure you won't accumulate too much technical and design debt.