Design Systems
for Real Estate
Ribbon enables individual home buyers to compete in the housing market with cash. I led design systems to help redesign how real estate agents submit winning offers on Ribbon's platform.
About
At Ribbon, there was a grand vision to improve the product. I was dedicated to design systems along with my coworker Ryan. Together, we spearheaded the design of Quilt. I led on the system's framework and theming. Ryan led documentation and interactive component prototypes. We shared the responsibility of building and maintaining Figma libraries.
Results
50+ interactive components
Redesigned visual experience of the product
Improved knowledge sharing between teams
Impact
While leading design systems, I provided direction and guidance on design system usage in several designers' projects. In certain projects, designers were able to massively reimagine and improve experiences in the product by using Quilt.
Engineering Alignment
This was a new design system at Ribbon. To create visual consistency across platforms, I collaborated with engineering to sync Figma tokens with Github. I was able to use Figma plugins that pushed a JSON file into a branch that both web and iOS engineers could consume.
Design Tokens
I streamlined the new design system by reducing colors from 60 to 32 and standardizing typography, spacing, corners, shadows, and borders. Along the way, I accounted for basic accessibility like contrast, sizing, and usage of proper unit sizes.
Documentation
Ryan and I collaborated to organize documentation. We landed on Zeroheight. Ryan handled much more of the documentation surrounding guidelines and usage.