Clutch Design System
Creating user interfaces for DevOps tools that are scalable, functional and gorgeous.
Clutch is a developer portal that makes managing infrastructure easier. It is an open source web UI and API platform designed to simplify, accelerate, and derisk common debugging, maintenance, and operational tasks.
Initially, the team used material-UI which offers a good set of primitives but there was a lack of clear direction. The team needed to establish their own identity and design systems inorder to scale efficiently, maintain consistency in design patterns and develop clear guidelines for the contributors.
So, as a Primary and only designer to work on the design system for clutch, I was super thrilled and excited but at the same time it was very challenging as Clutch was primed for release that month, which meant that they will start accepting contributions soon and so I was required to deliver the design system with clear guidelines within 30 days!
I accepted the challenge as this was a huge opportunity for me as a designer to build a clear, consistent, efficient, fun and scalable design system.
Step 1 - Discovery & Research
I started off by conducting a design audit. This helped me to prioritize and list out important components that were primarily used by the developers in their workflows. Then I started researching some of the established design systems like Material-UI, IBM, Spotify, etc.,
Step 2 - Define
The first thing I did as a designer was to understand the challenges that were faced by the developers in terms of design.
● Not enough reusable components at the moment.
● Workflow styling was done without input from designers
So, how might I help the team build a design system that is clear, consistent, efficient, fun and scalable?
Step 3 - Design
I wanted to keep the design very minimal as the main goal was to ensure user experience is consitence, easy to read and use across the platform.
I designed a color scheme with higher-contrast that met web accessibility guidelines. I started with a base color as per the material design color selector for each color family, then I adjusted the saturation and brightness values to create colors with the same hue but with different levels of contrast always checking the color contrast ratio.
I simply used Material design fonts and icons, unless there was a need of custom designed icons.
I wanted to apply my visual designs skills to make the interface stylish and creative. Generally, developer tools are very dry and boring, so I decided to add some fun visual elements to make the workflows more interesting.
Step 4 - Prototype
Once the visual style was set, it was easy to apply the same on the components. I also created quick prototypes of the workflows to test out the visual styles of user interactions with components. Thanks to Figma to come up with lastest updates on the auto-layout, variations, etc, it was very easy to change, update and create responsive designs on the fly.
Step 5 - Test and Reiterate
30 days just flew by and finally I was able to deliver a design system that the Clutch team was able to use and implement.
As the engineers build the workflows, I was able to conduct user interviews to get overall feedback. The results allowed me to create a more visible, readable, and accessible web application for the developers.
The most important learning for me was that everything is possible if you follow the design process!
It is truly a pleasure working with some of the best engineers from Lyft - Daniel Hochman, Derek Schaller. Thank you :)
I was lucky that I got the opportunity to continue working on the design system with the latest updates on adding the Dark Theme.
© Kanchan Gaur 2020
+ 1 (323) 791 3330