Isabela Presedo-Floyd's profile

JupyterLab Design System

JupyterLab Design System

JupyterLab is an open source web app made by Project Jupyter that is commonly used by people practicing data science, scientific computing, and machine learning.

This living, interactive design system is based on the organizing principles of Brad Frost's Atomic Design and built out by myself and Javier Garcia to accurately reflect JupyterLab’s CSS. It now takes form as static documentation and nested Figma team libraries used by JupyterLab designers today.

Working on this project was also an opportunity for us to reflect on and update the existing UI for best practices, such as following appropriate WCAG color contrast guidelines as a part of improving JupyterLab's accessibility.

Skills: Design system creation and management, UI design
Motivation
Even though JupyterLab is widely used and contributed to, its limited design system documentation was a barrier for design and development contributors to work together at their best. The existing workflow required either wading through CSS and several layers of external documentation, or for the designer to disregard design system accuracy at the risk of making designs that aren’t technically feasible.

Instead of continuing this workflow, we wanted to create a living link between JupyterLab's existing (and obscured) CSS and design tools while providing language that allows designers and developers to more easily communicate.
Strategy
Solving the information disconnect between contributors was key. We decided to
    •    Create an interactive design system where designers are already working
    •    Preserve the name and structure of the existing CSS system so designers and developers have a precise shared language to communicate with
    •    Clarify guidelines for where and how the elements of this system were to be used with special attention to areas where guidelines had yet to be defined
    •    Propose improvements to JupyterLab's UI and the system where our review identified issues
    •    Create a plan for sustaining this design system since it would require care outside the main code bases.

One way to understand the direct impact of the system is to see how quick it is to make a rough mock up from scratch using the drag-and-drop Figma components and styles our team now works with.
This design system benefits
    •    Design contributors. They can access the design system easier, make more accurate design proposals, communicate more exacting design annotations by surfacing the CSS variables built into the Figma library, and design faster.
    •    Code contributors. They are given technically feasible designs rooted in the CSS they need, are provided more thorough documentation of design specifications, are encouraged to follow good/existing coding practices in JupyterLab's front end, and can complete design implementation faster.
    •    Maintainers/contribution reviewers. They have clear expectations of what they need to review for, what feedback they can give contributors, and know their expectations can be easily shared with contributors via the documentation if needed.


This ultimately benefits JupyterLab users. Clear communication and expectations between multi-skill teams means that each contributor can fully leverage their strengths in order to build a stronger user experience.

In Figma, the design system appears as follows.
Methods
    •    Informal discussion with design and code contributors about past collaboration obstacles.
    •    Synthesizing CSS files and up to four layers of external documentation to create a more designer-approachable set of guidelines and documentation.
    •    Implementing the design system in Figma team libraries.
    •    Creating configurable JupyterLab screen mock ups for quick turnaround projects.
    •    Collecting team feedback from first ten projects that used the design system. Made changes as needed.
    •    Advocated for the addition of the Design System CSS label on GitHub to help us track updates to the design system.

The design system
Below is a selection of pages from the master documents the current libraries are based on. This also serves as the place for giving designers an overview of each element's details.
JupyterLab Design System
Published:

JupyterLab Design System

Published: