Design System
Realtor.com
San Francisco, CA, USA
01
The Plan
Building entirely new Design System was my first project at realtor.com. Even though the company has existed for over 20 years, it didn’t have consistent design language which could be used by all design teams. That in turn resulted in design inconsistency between the products. Having a clear and coherent design system was a crucial requirement to take designs to the next level.
Building new design system is a huge undertaking. However prior to drawing even one pixel, we needed to spend time researching our possibilities and to come up with a solid plan.
One of the first things we’ve done was to study companies which already have developed powerful and successful design systems. We looked at Airbnb, Google, Salesforce and Yelp among some of them. The main goal of this step was to understand why each company chose the style they have; we tried to answer what makes each style fit well with a given company.
02
Atomic Design Principles
Atomic design system is created by Brad Frost. The idea is that all objects are built from smaller simpler objects. Just like in the natural world, atomic elements combine together to form molecules. These molecules can combine further to form relatively complex organisms.
We decided to use this method for building our system, this is a great way to approach a design system because it creates a clear hierarchical structure.
How it works
Atoms are the smallest components like buttons, checkboxes, fonts, photos etc., there are basic foundational building blocks.
Molecules are bit complex elements like bottom navigation bar, search bars etc.
Organisms are the next level of complexity. Such us listing cards, lead forms, modals etc.
03
Inventory
I started my process from collecting the interface inventory. Creating an inventory requires screenshooting and catigorizing all the unique components that make up our user interfaces. I was using Sketch tool to collect all screenshots.
During this process we found out that there were a lot of instances where we have multiple flavors ot the same component. For example, we had three different primary button styles.
After all inventory where done and organize by the name in one Sketch document. We printed out all pages and put them on the wall. This was a good practice to present the inventory out in one space, so everyone could see how things worked and combine in an overall system.
We run a couple of workshops with the design team, where working with the sticky notes we marked the duplicate items, leave the notes with the ideas of why one element is different from another.
After we finished with workshops, me and my manager Jose, who was guiding and helping me with the design system decisions, went through all elements once again. We consolidated duplicated evolved other peaces to fit better our visual style.
04
Building Process
Tools and plugins I have used for building the Design System in sketch:
-
Colorable.com - sourse where I checked the color contrast and made a test for accessibility.
-
Runner - plugin that fast for finding and installing other plugins.
-
Rename it - find and replace names of any sketch objects and replace them with the new one.
-
Symbol Organizer - structurize symbol page into visual groups determined by symbols name in an alphabetical order.
-
Paddy - automated padding, spacing and alignment for Sketch layers.
-
Sketch Icons - sort and organize all icons.
-
Styles Generator - very helpful to agonize the text styles.
One of the helpful advices I found was: “Build symbols in Sketch. It seems time-consuming, but once you see the possibility of symbols you will appreciate, and it will make your and your team works easier."
Symbols in sketch is very powerful tool. It’s important to design web UIs that work at different browser widths. Using a combination of settings, groups and symbols, you can create a basic responsive UI in Sketch.
I designed all component of the Realtor.com design system library to be responsive.
05
Sharing and Feedback
As the work came together, we shared with the rest of the team regularly to get their feedback and provide awareness. We also started the conversation of thinking in a systemic manner with all projects going forward. Everyone is expected to understand how their area looks and interact with everyone else.
As soon as we put together all components in sketch, we found the Design System Manager tool by InVision that is perfect tool for the sharing and using the Design system components for designers. The Sketch integration with DSM helps immensely in getting designers use the library.
In addition to being usable for the designers, we wanted to bring in the same naming conventions that the developers were using in there code. So we spend some time with the dev team to see how things were currently named and made some adjustment for the new library. Also on the web view of DSM developers can download the SVG icons in just a few clicks.
We released version one of the library, shared it with the team for them to test and give feedback. We asked them to put comments directly into the InVision boards or any feedback/recommendation that they might have.
Leaving comments in InVision was a great idea because it helped to create group discussion without sending individual emails with feedback.
After that we began to work with the product and engineering to go through our current site and create tickets to start updating elements.
Working with engineers and product team we were able to sistematicly update the site as a whole.
06
Conclusion
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 company to make the design process become better and faster. Design system is a living project. After the rollout of the first version, a design system becomes a journey that never ends.
