We didn't have a system. No color system, no typographic system, no layering system, no icon set. The product did not feel cohesive and had vastly different patterns and functionality across platforms.
Our broker tools were mostly data heavy, web and mobile products. Simplicity, readability, and load-time were all key values in our design. We knew that we wanted something that was simple and clean that any broker regardless of age felt comfortable using.
While building our design system we had to do extensive testing for multiple browser support, monitor visibility, and accessibility for our older user base.
The system’s primary colors are white, blue, and grey. For us it was important to limit our color palette so that we could focus on the data and content.
We wanted a font that was legible, had characteristics of a professional font face, and a solid geometric structure. Additionally, since Open Sans is an open source google web font, there was a high probability that the font was already cached by the user’s browser from another website, which reduces page load time.
Each icon has a visually distinct motif standing for what it represents and relevant to the real estate product type and specific work flow. The icons are constructed on a 16x16 grid for clarity while scaled down. The style are outlined and slightly rounded in nature.
We had to audit our current system to identify which existing patterns and components could be synthesized into their most basic form to build a solid foundation. For components and patterns that were not already in existence we had to score it’s flexibility and use case across the platform before we could include it into RXD.
These are our UI elements that are used consistently throughout a product. These included buttons, inputs, dropdowns, toggles, avatars, and tooltips.
Patterns are elements or practices throughout a product. They are flexible and can contain components. These included navigations, card styles, tables, empty states, notifications, alerts, and modals
The first was GIT style system for documenting and managing design files. The second internal page with usable code snippets, downloadable files, and documentation to explain how each component was used.
We had to document the system, specs, showcase examples uses, and specify guidelines for how all patterns and components were used. This was one of our most challenging and time intensive tasks while creating a design language system. We wanted to be thorough so that our use cases were clear and we were organized for future iterations.
We knew that this was going to be challenging project. It meant we had to break down our existing infrastructure, evaluate, research, and re-build it from the ground up. One of the most challenge parts of the project was documentation. We spent a lot of time identifying what language to use and layout out use cases for each part of RXD so that it was understandable across the organization.
