Evan Contact
Realstax
Home

Realstax

Building and implementing a design system

Product Design

Android

iOS

Web

This case study aims to chronicle how we created a design system at Realstax. I’ll share insight into our process, product design and tools we used to create and implement the system.

Problem

rxd-1

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.

Understanding Our Constraints

Optimizing For Data

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.

Accessibility

While building our design system we had to do extensive testing for multiple browser support, monitor visibility, and accessibility for our older user base.

Laying the Foundation

Color

  • #4ABBF3
  • #979797
  • #FFFFFF

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.

Typography

Android App Material Design Elements

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.

Iconography

Android App Material Design Elements

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.

Building an Ecosystem

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.

Components

Components

These are our UI elements that are used consistently throughout a product. These included buttons, inputs, dropdowns, toggles, avatars, and tooltips.

Patterns

Android App Material Design Elements

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

System Structure

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.

Abstract + Sketch

Android App Material Design Elements

Living Guide

Color Living Guide
Color Living Guide

Documentation

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.

Lessons Learned

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.