Bookiply Design System — A new foundation


Bookiply is a holiday rental management tool that operates all around Europe. Homeowners can distribute their properties on different rental websites and handle their bookings within the same platform—a one-in-all tool used by many people.

Different teams across the company used the brand differently, within multiple platforms and with different purposes. That resulted in a Frankenstein product with a lot of mismatches.

In late 2020, I led a project to redefine the entire Bookiply brand, whose main foundation was online platforms. My role was to create a design system that would allow us to build digital products that are simple, intuitive and easy to use. At the same time, unify the whole brand experience.

Mockup with the new design of Bookiply
Before and after the redesign

The Problem(s)

The first thing we had to do was a long, hard look in the mirror.

Together with a branding designer, we compiled a myriad of examples of how the brand was currently used. In addition, we analysed different scenarios in which the brand was represented and how the communication was done.

We quickly realised the following:

Examples of the old branding
Examples of the old branding

Design Audit

At this stage, I also did a design audit on the main Bookiply website. My idea was to create a Design System based on best web practices, such as performance and accessibility. Currently, the usage of fonts and colours were not well optimised, and there was a lot of room for improvement.

Screenshot of colour contrast checker
The primary colour did not have enough contrast

Process & Redefinition

"Who are we?"

This was the first question we needed to answer.

We spent some time interviewing internal stakeholders as well as customers. We also did a vast benchmark of our competitors to see how they were positioning in the market. We needed to understand our mission and find clear values that would help us build a robust Design System.

This whole process took some time but was essential. Finally, after few iterations, we came up with a new scheme of colours and fonts that would still be loyal to the original Bookiply essence but with a fresh and clean new look — it was time for a change.

New branding concept
New branding concept

Building a Design System

Bookiply is used by many people from a wide range of ages, locations, contexts and abilities. It is not a tech-savvy tool but rather a mainstream tool that everyone needs to wield.

With that in mind, I designed a down-to-earth Design System. Something that would allow us to build a product intuitive and straightforward to use, removing any friction between the user and the main actions they had to take on the website.

I started with the base design tokens (sometimes referred to as atoms) such as typography, colours and spaces and then moved to more complex UI components like the navigation, forms or footers.


Design Systems are the best way to promote collaboration between designers and developers and help teams scale their products. But one can only achieve that with proper documentation.

For this project, I paid particular attention to how each design decision was communicated on the Design System — I wanted to avoid any misinterpretation and make sure that this document became a single source of truth.

I developed system embedded guidelines in the design file to understand the rationale behind the design choice.


Results and Learnings

The creation of the Bookiply Design System has empowered everyone in the organisation to launch new marketing pages rapidly and consistently and helped designers find UI areas of improvement.

Additionally, we removed old technical debt with this project and improved its overall performance, which helped the website load faster and boosted users' reliability and trust.