Clutch - Lyft's open-source devOps platform

What is Clutch?

Clutch is a web application used by developers to who manage computer systems, especially the complex ones that run in the cloud. Clutch is basically designed to make engineers lives easier.  It helps to streamline engineers work by fixing problems and reducing errors, maintaining and making sure that everything is running smoothly through a user-friendly interface, guided operations and seamless integration with existing tools and systems.

User Research

User research was vital in creating interfaces that responded to user needs

  • Crafted targeted questions and tasks to observe users' interactions with existing tools. 

  • To synthesize this data we did 3 iterations of this affinity map.

  • Developed informed designs and prototypes to test with users. 

  • Refined designs to align with users' needs through multiple iterative design and testing phases

This approach allowed us to iteratively enhance the usability and effectiveness of the dashboard for users navigating through intricate workflows.

Design System

  • Developed Clutch's design system adhering to Material Design for aesthetics and functionality.

  • Originated in 2020 by developers using Material UI, without initial design input.

  • Expansion and new workflows necessitated custom components.

  • Open-source nature encouraged a broad contribution base, highlighting the need for distinct identity and consistency.

  • Introduced a comprehensive design overhaul featuring a minimalistic style.

  • Chose Roboto font and a high-contrast blue and white color scheme.

  • Enhanced user experience with engaging visuals, animations, and illustrations.

Example: Alert Component

  • Designed a user-friendly alert component that categorizes system statuses for intuitive recognition.

  • Incorporated four distinct alert types with color-coded labels: Error (red), Success (green), Information (blue), and Warning (yellow).

  • Assigned specific icons to each alert type to enhance visual communication: a checkmark for Success, an 'i' for Information, a triangle for Warning, and a cross for Error.

  • Integrated clickable links within alerts to provide users immediate access to more information or corrective actions.

  • Developed expandable alerts for detailed error reporting, improving transparency and aiding in troubleshooting.

  • Implemented a minimalistic design approach to maintain clarity and avoid visual clutter in the user interface.

Components in action

  • Published the component library in Figma for practical testing through screen creation.

  • Utilized drag-and-drop functionality for components, testing various layouts, and fine-tuning color and typography to the design system.

  • Conducted alignment checks with the design system and shared designs for feedback, facilitating rapid iteration.

  • Developed quick prototypes to assess the visual style and user interaction, informing design choices.

  • Leveraged Figma's latest features like auto-layout and variations to expedite design modifications and enable responsive design development.

Clutch  |  Before and After Workflows

  • Identified the initial user interface as functional yet lacking in intuitive navigation and visual cohesion.

  • Streamlined the workflow with clear step indicators for ease of use.

  • Utilized contrasting colors to improve navigation.

  • Simplified forms and emphasized action buttons for straightforward operation.

  • Incorporated a fun illustration on the confirmation screen to celebrate task completion and elevate user enjoyment.

Clutch | Interactions and Animations for user feedback components

  • Emphasized the importance of feedback for the open-source project Clutch, aiming for an enjoyable feedback experience.

  • Introduced playful interactions and animations within the feedback component for user engagement.

  • Enhanced dropdown menus and text fields with smooth transitions and live character counts for a dynamic feel.

  • Integrated two key feedback mechanisms in the UX design: an inline component for post-workflow reactions and a persistent header tool for continuous access, crucial for the ongoing improvement cycle and user engagement.

Clutch | Light and Dark Theme

  • Light theme offers a crisp, clear backdrop for high visibility, emphasizing legibility and minimalist design.

  • Dark theme provides deep, rich backgrounds suitable for low-light conditions to reduce visual strain with a modern look.

  • Both themes maintain consistent functionality and readability, optimized for appearance in various settings.

  • Theme toggle is designed to be smooth and intuitive for user customization in real time.

Clutch   |   Custom Unique Icons for Workflows

  • Crafted icons with a unified style guide, ensuring they are instantly recognizable and align with the overall aesthetic of the Clutch platform.

  • Selected a color palette that complements the interface, with each icon featuring hues that differentiate the workflows while contributing to a harmonious look.

  • Implemented these custom icons on the Clutch landing page, as evident in the provided screenshot, to guide users effortlessly through various functionalities.

Clutch   |   Custom Logo Design

Developed a series of logo concepts for the new refined version of deploy view workflow called “Ship it”

Clutch   |   Swag

Designed Clutch tech swag featuring a prominent front logo with the "Lyft open source" tagline.