Clearco CASE STUDY
When I first joined Clearco, we didn't have a design system. Designers worked in silos, prioritizing speed over quality and consistency. Over time, this added to an ever-compounding front-end debt problem.
This case study is currently still a work in progress. If you had any questions, please get in touch!
Lead Designer (Roadmapping, UI Design, Design Ops)
Jen de Vera, Senior Product Designer
Michael Chiu, Senior Visual Designer
Nate Devey, Engineer
Complete and unfettered freedom — this was the scene that I stepped into when I first joined Clearco. Though some might argue that design systems can stem a designer’s creativity, as our design team grew to more than just a handful of product designers, our old way of doing things was clearly no longer going to work.
(Above) What it felt like in the early days of Clearco. Wild, free, and void of any structure and order.
"If you want to go fast, go alone. If you want to go far, go together."
Each designer worked independently, prioritizing the speed and delivery of their own areas of the product over consistency. As the team and codebase grew, this became a bigger and bigger problem. It became apparent that we needed a better way to design and build, so I led a small team of designers and engineers towards a possible solution — a design system.
We called it the Clearco Design System, and with it, our goal was simple: achieving great design at scale.
We started with the basics. The web, when you break it down, is just an amalgam of texts and colours. With that in mind, we were careful to establish typography and a colour palette that was intuitive, adaptable, and accessible.
UI Colour Palette — Functional colours were added to our brand palette to give designers the ability to convey important feedback to users.
We started by running an audit of our existing UI and figuring out what components were most frequently used. This helped us prioritize our components roadmap, starting with buttons and form fields.
Creating a space for component guidelines and other documentation was incredibly important. Education was a fundamental part of implementing a design system that could be adopted.
UI Testing — We back-tested key screens in our product to ensure that global styles and components can be easily refactored.
© 2022 Julian Liao