BUILDING A DESIGN SYSTEM FROM SCRATCH
PROBLEM
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.
Examples of Realtor.com landing pages
We looked at Airbnb, Google, Salesforce, and others. The main goal of this step was to understand what does the term “Design System” means for each company and why they chose the styles and principles they have.
OUR APPROACH
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.
ATOMIC 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.
Atoms
Molecules
Organisms
UI INVENTORY
The best place to start the building process is by evaluating what we already have. Which elements do we like? Which do you want to replace?
We went through all pages and interactions on the site. Took screenshots and categorize all the unique components that make up our user interfaces. I was using the Sketch tool to collect all screenshots.
Buttons inventory
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.
Office walls with the component inventory
BUILDING PROCESS
We built our components in Sketch, using the nested symbols and atomic design principles.
One of the helpful advices I heard was:
“Build symbols in Sketch. It seems time-consuming, but once you see the possibility of symbols you will appreciate it, and it will make your and your team's work easier."
Following this advice, we treated carefully every symbol, tested it with a different combination of settings and checked its responsiveness.
Responsive symbols (Sketch)
All nested symbols were documented so designers could understand the hierarchy of the complex component system.
Sketch Symbol's map
CREATING CYCLE
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.
List of the tools we used for the Design System
InVision DSM
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.
DSM Sketch Plugin and DSM Web views
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.
The main goal of InVision is to make better collaboration between engineers and designers. The “Prototype and DS” feature is a large step in achieving this goal.
See also my article "Collaboration Between Designers And Developers Just Got Easier"
InVision, DSM feature
InVision and Design system integration panel
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
MASTER PAGES
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.
Realtor.com Home page. Mobile view
FINAL NOTE
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”.