Clutch (Developer's Tool) Redesign
Goal
Establish Clutch’s own identity and design systems in order to scale efficiently, maintain consistency in design patterns and develop clear guidelines for the contributors.
Client
Lyft - Developer Console Team
Role
Lead Product Designer
Team Members
Derek Schaller (Staff Engineer)
Daniel Hochman (Staff Engineer)
Duration
Nov 2, 2020, to Dec 29, 2020
Tools
Figma Figjam Google Doc Slack Jira Confluence
Specialities
Wireframes Design System Prototypes Dev Handoff
The Client:
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.
Design Process:
- Design Audit
- Conceptual Workflows
- Design System
- Wireframes
- Prototypes
- Design System
- Dev Handoff
What I did:
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.,
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?
Design
I wanted to keep the design very minimal as the main goal was to ensure user experience is consistence, 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.
Interactions
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 latest updates on the auto-layout, variations, etc., it was very easy to change, update and create responsive designs on the fly.
What challenges I faced:
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! Understanding the workflows like Resize HPA, Terminate Instance, etc. was difficult to understand as I did not have an engineering background.
What have I learned:
Everything is possible if you follow the process. It is very important that you have proper reasoning and validation behind every design change, what and why you made a change!
What have I achieved:
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. 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
kanchangaur1986@gmail.com
LinkedIn