Building a Design System
from Scratch
The company didn’t have a consistent design language that could be used by all design teams. That resulted in design inconsistency between the products.
One of the first things we’ve done was to study companies that already have developed powerful and successful design systems.
We looked at Airbnb, Google, Salesforce, and others. The main goal of this step was to understand what the term “Design System” means for each company and why they chose the styles and principles they have. Then we created a map of what we think will define the Realtor.com design system.
The next step was choosing the right approach for how we should start to build our Design System.
Based on our exploration we decided to go with the Atomic System, created by Brad Frost. The idea behind this process is that all objects are built from smaller simpler substances. So the smallest elements are atoms and by combining them they form molecules. These molecules can combine further to form relatively complex organisms.
The next step was choosing the right approach for how we should start to build our Design System.
Based on our exploration we decided to go with the Atomic System, created by Brad Frost. The idea behind this process is that all objects are built from smaller simpler substances. So the smallest elements are atoms and by combining them they form molecules. These molecules can combine further to form relatively complex organisms.
After the inventory was done and organized by the atomic principles we printed out all pages and put them on the wall. This was a good practice to present the inventory in one space, so everyone from the company could see how things worked and combined in an overall system.
We run a couple of workshops with the design team, we're working with the sticky notes by marking the duplicated items, leaving notes and comments.
We built our components in Sketch, using the nested symbols and atomic design principles.
All nested symbols were documented so designers could understand the hierarchy of the complex component system.
As soon as we put together all components in Sketch, we started to plan what tools we would use to maintain our system, collaborate with developers and make it efficient for the whole company.
As the main tool for managing our Design System we chose the Design System Manager by InVision (DSM).
The DSM platform can be accessed in two ways: web view or sketch plugin.
Sketch plugin view is a technical tool for designers. The goal of it is to enable the reusability of components that improves the productivity of designers.
The web view is the main view where everyone from the company may see the library with all components, documentation of usage, visual examples and the React code sources.
When designers use components from the DSM library in Sketch, engineers will be able to easily see exactly which components were already built, and which ones are new. That way, an engineer can be confident about the reusability of design components and only needs to rebuild components that are not represented by the purple layer.
In order to make the designers' working process even faster we have built page templates for key experiences.
The master pages contained high-fidelity visual design, wireframe, and spacing specs for each brace point.
The design system has been a big success. It improved our look and feel across the site and gave us a unified resource for design.
Building a design system was a large undertaking. Doing this will help the company to make the design process become better and faster. Some of the elements could have their second or even third iteration, because new issues will arise during the development. As design systems are living “beings”, they have no definition of “done”.