Revitalizing Jenkins

image

Revitalizing Jenkins

πŸ“š

Project overview

Jenkins is the world's most powerful CI/CD platform. It is central to the DevOps industry, with millions of developers leveraging its deep extensibility to manage continuous integration. Jenkins is an open-source project that has been in development for over a decade. It has thousands of contributors, nearly 2,000 compatible plugins, and a complex user experience. This case study details the early steps in a long-term initiative to modernize the Jenkins user experience.

πŸ™‡πŸ»β€β™‚οΈ

About my role Throughout early 2020, I served as product design lead for this revitalization effort.

image

Driving a unique strategy

Jenkins suffers from a challenging blend of legacy infrastructure, CloudBees proprietary ties, conflicting open-source governance, and significant historical design and technical debt. In mapping a long-term strategy for Jenkins revitalization, several complementary priorities stood out in my collaboration with product management. We balanced incremental progress on the following items in tandem, allowing us to ship tangible value for a sorely undervalued user base.

  • Accessibility improvements β†’ We would begin with a long overdue visual refresh that instantly improved the experience for thousands of users. For users not directly impacted by accessibility improvements, the changes still communicated CloudBees' intentions to invest in the project.
  • Design system foundation β†’ Alongside accessibility improvements, I worked closely with my development team to begin formalizing Jenkins' first ever official design guidelines. The long-term goal was to build a comprehensive design language compatible with Jenkins' open-source infrastructure.
  • Technical analysis β†’ My front-end partner conducted extensive technical analysis to inform our long-term Jenkins strategy. He audited our frameworks and libraries to evaluate the risk around the ambitious future changes we were targeting. His investigation helped inform our visual refresh.

image

Fundamental extensibility

Every facet of the Jenkins project (including its nuanced interface) is fundamentally extensible and open to modification by open-source contributors. Open-source contributions are managed by an independent system of governance to which CloudBees is held accountable. The screenshot above shows a basic example of how an otherwise straightforward empty state anatomy is complicated by extensibility considerations. From a design perspective, this focus on open-source extensibility means several things:

πŸ€”

Design considerations answer to a unique network of stakeholders, members of which have conflicting visions for the future of Jenkins.

✏️

All changes to the Jenkins interface must be extensible by design, with design and development resources made available for the open-source community.

πŸ–‡οΈ

Popular third-party plugins (of which there are thousands) impose unique constraints, as every big interface decision must be careful not to break these externally crafted experiences.

πŸ’Έ

Jenkins is also the operational foundation of a CloudBees proprietary product called CloudBees CI. Changes to Jenkins meant changes to CloudBees CI, so every interface adjustment had material impact on the experience of the company's biggest money maker, despite being underfunded.

image

Iteration and approval

Designing for Jenkins meant challenging deeply engrained design assumptions that had been built upon for over a decade. It meant driving changes while respecting the unique, disparate workflows of millions of daily active users. In order to meaningfully drive change, I worked with product management to craft the workflow seen here, with the goal of introducing iterative improvements while balancing the competing interests of internal and external stakeholders.

🎨 More on the visual refresh

Our team made dramatic usability improvements. For the first time in the history of the open-source project, Jenkins users now benefit from consistent baseline styles that impact every native screen in the interface. Here's some of what we did:

  • Conducted in-depth interface audits of native and third-party functionality to understand Jenkins' constraints
  • Introduced a formal typographic hierarchy for the first time, resulting in legibility improvements throughout the application
  • Introduced a suite of modern color palettes designed with accessibility in mind, as well as complementary color guidelines for third-party developers
  • Established a foundation for a proper Jenkins design language through thorough documentaiton
  • Implemented fully redesigned buttons and usage guidelines
  • Introduced consistent and user-friendly interactive states to high-use elements
  • Implemented clear visual affordances where they were lacking

image

Reconsidered typography

Jenkins now has a clear, consistent typographic hierarchy. A proper type scale and thoroughly documented usage guidelines helped to inform the design of full components.

πŸ” 

Utilizing system defaults

Following an investigation of industry standards in developer tooling, it became clear that we should avoid packaging unnecessary fonts in Jenkins. Instead, we took the opinionated but flexible stance of adopting users' system default font configurations. This approach dramatically reduced page load times and created a more seamless experience between Jenkins and other popular development applications, respecting developers' preferences in the process.

πŸ“

Thorough usage guidelines

Detailed usage guidelines have been written to encourage consistent third-party contributions to Jenkins. This was especially important for type. These guidelines were then packaged for public distribution to the open-source community, and shared with developer advocates in our recurring meetups with leading contributors.

πŸ§ͺ

Designs tested with system defaults

Following our decision to lean on system fonts, we added default typography checks into the design workflow. Similar to testing for localization impact, every newly designed element was reviewed for visual compatibility with the three most popular system default fonts. This helped ensure that elements appear as intended for users on any operating system.

πŸ”—

Improving text links

Because text links are common throughout Jenkins, we introduced proper text link interactive states. We discovered that various elements had been configured throughout the years using modified link classesβ€”this complicated things somewhat. At the time of my departure, work was underway to untangle link styles in pursuit of clearer affordances throughout the UI.

🌏

Collaboration with global communities Before my departure, I had the chance to initiate collaboration with a handful of Jenkins' international developer groups, with the goal of forming long-term collaborative relationships. My hope is that the organization continued these communications and is actively working toward a more globally mindful Jenkins design language.

image

User-friendly color methodology

A consistent color scheme is critical to ensuring that users perceive visual affordances and understand system feedback. Through thousands of UI contributions over the years, the color palette in Jenkins had become messy and inconsistent. My team introduced a modern, sensible color schema throughout Jenkins to serve the interface's complex needs. We also worked to clean up disparate color treatments throughout the UI, like the ever-challenging "sea of grays" that so many products see.

image

Header bar and breadcrumbs

We dramatically improved the design of this area for a more mobile-friendly experience. My team began with this component because of its relative simplicity compared to more extensible elements. It was the ideal element with which to begin our delicate collaboration with external stakeholders. We leveraged and refined the new base styles we'd been developing, feeding every bit of progress back into our burgeoning design language documentation to inform the design of future components.

image

Navigation panel

The Jenkins navigation panel suffered from deep usability challenges which amounted to what felt like UI from the 90's. We leveraged our new type, color, spacing, and interactive state guidelines to improve its aesthetic and legibility. These changes dramatically improved the panel's overall ease of use.

πŸ€”Β Why it all matters

Jenkins is one of the most important pieces of software in the world, used by millions of people to orchestrate CI and CD. Thoughtful design is critical for the long-term sustainability of any software, but especially so for a project with such nuanced dependencies and global repercussions. My hope is that the CloudBees organization continues to recognize the critical role of design for the future of Jenkins, and prioritizes it for the benefit of users around the world.