Results
50+ interactive components with supporting documentation
Redesigned and improved visual experience of the product
Improved collaboration and knowledge sharing between design and engineering
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.
For a full project walkthrough, contact me.
Foundation Improvement 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
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 acted as general support and provided direction on proper components to be used in a designer's project.
In certain projects, we were able to help designers massively redesign and improve experiences like the example listed below.
Documentation
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.
