Midday Design System

Creating and contributing to Prezly's brand and design system over the years

intro image

RESPONSIBILITIES

Strategy

Product and Graphic Design

Lead Product Designer

ROLE

Lead Designer

YEAR

2019-2022

Why building a design system?

Prezly only had one designer when I joined the team. As the team scaled, both in the design and development departments, problems with consistency and implementation of the designs emerged, and newcomers found it difficult to understand our design patterns.

After a short time, as a team of three designers, we decided to give Figma a try since it could be a great tool for us being a remote team.

The exercise of migrating all of the existing components and remaking many pieces of the app in the new tool taught me that having a solid foundation for our design work would save us a lot of time in the long run and would answer many questions that were raised each week during the hand-off.

Branding and design principles

Before we jump into the main topic, I would like to talk a bit about branding. Prezly was founded ten years ago, and the logo and overall style haven't changed much for a long time. The existing logo was very outdated and was blocking us from transforming the Prezly brand and product into something more appealing and modern looking. So we redesigned it!

Along with the logo and colors, we created a full branding project where we defined our design principles, voice tone, illustrations, and social media asset guidelines so we could be prepared and more agile for all our design and communication needs.

prezly branding

Methodology and structure

Based on the Atomic Design principles, the system is separated into parts in order of complexity and attempts to give guidance without inhibiting creativity and discovery. We added additional features throughout time, such as variants and interactive components, to help designers take use of Figma's potential and create better, more realistic prototypes while also improving the designer experience.

In the following sections, I will discuss the method and thoughts around the most important components.

Figma view

Colors

One thing we saw was that there were some constrast issues in the app, as well as a lot of single-use colors in production.

We refined our color palette with accessibility in mind, using the TailwindCSS system, which made it extremely simple for developers to integrate and change in the app.

design system colors
design system typography

Typography

Previously, the app simply used Open Sans, while the marketing site combined it with Playfair for the headlines. As part of our new brand approach, we opted to replace it with Inter, a more UI-focused typeface, and pair it with Rubik for headlines and social media assets.

We changed the font size and weight in the app to improve content density and readability across all viewports.

Icons

With so many new projects and features, we were often in need of fresh icons.

Along with the small and inconsistent existing icon set and the number of special features we had that were difficult to represent with existing libraries on the web, we took the time to create icon creation templates that allowed us to craft a new, homogeneous icon library and make creating new icons on the fly as simple as it gets.

design system icons
design system buttons

Buttons

As a B2B software firm, we required a large number of hierarchy choices in our design system to accommodate the many interaction scenarios we confront.

We refactored our buttons to be more obvious, readable, and accessible during our color and accessibility exercises, inspired by the latest design trends. We produced guidelines on best practices for sizing, placement, and alignment.

Inputs

We defined this component by nesting the input, along with its state variants, within the form element and placing the interactivity at the component level, resulting in a powerful and adaptable piece that saved us several hours while generating project prototypes.

Because we rely significantly on forms and inputs, we spent time establishing best practices for various types of information and placement, which made launching new pages seamless and consistent throughout the platform.

design system inputs
design system tags

Other components

As you may guess, the labor in this project transcends beyond the modest elements described above. Designing and documenting complex patterns such as tables, navigation, notifications, modals, panels, and so forth has been a continuous work in progress over the years.

If you'd like to see the full system and how we use it on a daily basis, make sure to contact me; I'd be pleased to walk you through it :)

Conclusions

Each design system is unique and should be created, just like any project, to meet the team's objectives and enhance their workflow. Design systems should be a living ecosystem that is continually adapting to the people and products it is designed to serve, as well as maturing with the tools it is built with.

A design system's project is never marked as Done. Many sections of this system are still under construction or are suitable to be upgraded. The efforts put in by the Prezly Product team so far have helped us gather alignment between designers, developers, and managers, make faster and better design decisions, and document our product to make onboarding smoother for new team members.

Thank you for sticking with me all the way to the end! Read the following case study to learn more about how this design system has helped us build the Prezly platform.

Have a cool project? Let's work together ☺︎