Design System for ImmoScout24
The Context
In 2017, I started supporting the market leader of real estate portals, ImmoScout24. At that time, there was an outdated design library that nobody used and the design team was decentralized and without design standards.
The Problem
ImmoScout24 had a completely inconsistent design and the efficiency of the designers was very low because they neither worked with a library, nor had rules for UX patterns.
The Objective
Research, strategize, and build an accessible design system for all UX/UI designers, with a focus on increasing design efficiency dramatically.
The Plan
Buy-in
I created a very simple first draft of a design system with some basic elements. Then I made a video of the design process without using a design system and a video after using a design system — a side by side comparison in time lapse. Additionally, I collected all the advantages and put everything in a presentation. With that I pitched the creation of a design system to the company leaders and they gave me the buy-in.
Inventory
The inventory was massive, especially with a company that is 20 years old and produced thousands of hard coded pages and countless CMS pages. The design team and I crawled through all pages collecting colors, buttons, icons, dropdowns, navigations and more. We found more than 50 tones of blue, another 50 oranges, and many inconsistent UI components.
Clean Up
After the inventory, we cleaned up all the colors and components. We deleted the ones that were no longer needed and kept the ones that made sense.
Color Scale & Accessibility
We needed to create a good color scale which was accessible. We used tools for getting the perfect shades and tested them all for accessibility, until we had a perfect palette.
Atomic Design Components
Following Brad Frost's atomic design methodology, we created all components — first the atoms (basic elements like buttons), then molecules (more complex compositions). We started working with them immediately to validate, and later adopted Abstract for version control.
Development
Our engineer developed all components in CSS and React, adding them to Storybook. Slowly, other engineers were able to use the design system in the live product. More and more pages were built with the design system through continuous collaboration.
The ImmoScout24 Redesign
In 2019, a major redesign started — ImmoScout24 was to be completely redesigned. Colors, fonts, everything. Through our design system, we implemented it in record time. The effort was relatively low and we could work with consistent designs from the beginning.
Conclusion
To create a design system is a lot of work and it costs a lot of money, BUT if you're doing it right the return on invest is incredible. All designers and engineers become so much faster and can work on the things that are important.
The most important things to consider: It needs a permanent team that is highly motivated, and a design system needs to be handled as a product that serves other products.
Let's create something cool together.
I'm always excited to discuss new projects and opportunities. Whether you need a design system, UX improvements, or AI-powered workflows — let's talk.