Ribbon enables home buyers to compete with cash. I led design systems to help redesign how real estate agents submit winning offers on Ribbon's platform.
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. Key results included:
50+ interactive components
Redesigned visual experience of the product
Improved knowledge sharing across teams
This case study is a concise overview. Additional details available upon request.
Before and after—
the impact of Quilt.
I collaborated with designers on their projects. Throughout collaboration, I mainly offered guidance and some direction. In certain projects, designers were able to massively reimagine and improve experiences in the product by using Quilt.
Processes and automation
to help create 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.
Improved design tokens
to create cohesion.
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.
A source of truth
with design documentation.
Ryan and I collaborated to organize documentation. We landed on Zeroheight. Ryan handled much more of the documentation surrounding guidelines and usage.
