Leading Design Systems for Real Estate

Leading Design Systems for Real Estate

Leading Design Systems for Real Estate

Leading 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.

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.

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.

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.

Results

50+ interactive components

Redesigned visual experience of the product

Improved knowledge sharing between teams

Contributions

Design Systems

Design Tokens

Figma Library

Documentation

Overview

My time at Ribbon Home was dedicated to design systems along with my coworker Ryan. Together we made the design system called Quilt. I managed most of the system's theming and framework. Ryan managed most of the documentation and prototyping of components. We split the work when it came to building the actual Figma components/libraries and collaborated heavily when setting up processes.

Foundations and Design Tokens

This was a new design system at Ribbon and I started with foundations. I had to work quick so I didn't start from scratch. I took what was existing and reduce our colors from 60 to 32, implemented responsive typography, and standardized space, corners, shadows, and borders.

While designing foundations, I considered basic accessibility like color contrast, font sizes, and usage of proper unit sizes.

Aligning with Engineering

I set up our Figma tokens to work 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. This would help create visual consistency across platforms.

Processes

Clarifying Ambiguity

There were questions on how others would work with Quilt. Ryan and I collaborated heavily to set up and map a process. Engineers and designers from other teams could rely on this for context and understanding. Throughout this process we pushed for Storybook to improve design QA and maintain synchronicity with engineering.

Product Impact

Ryan and I collaborated frequently with other product designers. We'd provide general support and direction on component usage in a designer's project. In certain projects, we were able to help designers massively redesign and improve experiences.

Documentation

Knowledge Sharing is Required

Ryan and I collaborated to find a home for documentation. We landed on Zeroheight and from there Ryan handled much of the documentation surrounding guidelines and usage.

More detailed information about the process and execution of this project is available on request.

© Javier Jacome 2024

© Javier Jacome 2024

© Javier Jacome 2024