Clara building a modern lending platform to eliminate the billions of dollars and thousands of hours of waste that plague the $10 trillion mortgage market, delivering a home financing experience that is efficient, intuitive, and straightforward.
Laying a Foundation
When I first joined Clara, it was a blank slate with no design guide or component library. With the help of my co-worker, we created a robust, modular, and cohesive design system that allowed for designers and developers to easily create and build features with extreme accuracy and speed.
The goal of the design system was to unify our language and have our products be device and screen agnostic, as seen in our products. In order to accomplish this goal, we took the best industry standard conventions from Apple, Google, Facebook distilling them into a singular system.
The modularity of the design system allows for features to be built without negatively affecting others, rapid iteration, and easily adding or modifying elements. Below are some examples of this. We can add or remove elements without having to dramatically change the code or design. This allows for us to design for the future while also designing for the current. If a toolbar includes meta data and actions that won't be implemented for the MVP, they are hidden until that functionality is supported.
It was crucial to have a design guide and a component library accessible in the cloud. This allowed for designs to stay consistent amongst the design team with open company access making it easier for product managers and developers to reference. This allows for easy and rapid feature creation for both designers and developers.