2020_RJ_banner_v3

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

I am the lead product designer working to revitalize Jenkins and CloudBees CI through this initiative.

Revitalizing Jenkins

2020_RJ_banner_v3

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

I am the lead product designer working to revitalize Jenkins and CloudBees CI through this initiative.

2020_RJ_Unique_Strategy_v3

Driving a unique strategy

My team is employing a unique process to accommodate Jenkins' blend of legacy infrastructure, proprietary ties, and open-source governance. We are starting this long-term initiative with a visual refresh. This allows us to begin building a formal design language, and to conduct extensive technical analysis that informs our long-term strategy.

2020_RJ_Empty_Anatomy_v1

Fundamental extensibility

Every facet of the Jenkins interface is fundamentally extensible and open to modification by open-source contributors. Layouts that would be tightly controlled in proprietary products must be highly flexible in Jenkins, as demonstrated by this wireframe for empty state anatomy.

2020_RJ_OSS_Proprietary_v1

Balancing OSS and proprietary objectives

Because it is an open-source project, designing for Jenkins means working with both internal and external stakeholders. It means challenging deeply engrained design assumptions that have been built upon for over a decade. It means driving deep changes while respecting the workflows of millions of daily active users. This requires a unique workflow to balance both internal and external motivations.

Phase 1: visual refresh

Through the introduction of modern aesthetics, our team is making dramatic improvements to Jenkins' usability. For the first time in the history of the open-source project, Jenkins users will benefit from modern, consistent base styles that will impact every screen throughout the interface. As of Fall 2020, we are actively working on designing and implementing these improvements.

Conducting interface audits to inform base styles and future phases

Introducing a formal typographic hierarchy

Introducing a suite of modern, accessible color palettes

Investigating and improving upon Jenkins' front end toolchain

Establishing a foundation for a proper Jenkins design system

Implementing clear visual affordances where they were lacking

Prioritizing long-overdue visual accessibility improvements

Introducing user-friendly interactive states to redesigned elements

Implementing fully redesigned buttons and usage guidelines

2020_RJ_Type_Headings_v2

Reconsidered typography

Jenkins now has a clear, consistent typographic hierarchy. Improving how type appears throughout Jenkins helps improve the readability of most screens. A proper type scale and thoroughly documented usage guidelines help 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 pick up users' system default font configurations. This approach dramatically reduces page load times and creates a more seamless experience between Jenkins and other popular development applications.

Designs tested with system defaults

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

Usage guidelines

Detailed usage guidelines have been written to encourage consistent third-party contributions to Jenkins. This was especially important for typography. These guidelines are being packaged for public distribution to the open-source community.

Improving text links

Because text links are common throughout the Jenkins UI, we introduced distinctive text link interactive states. We discovered that various elements have been configured throughout the years using modified link classes—this complicates things somewhat, so the work continues to untangle link styles in pursuit of a clearer treatment throughout the UI.

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 the Jenkins UI had become very inconsistent. My team is introducing a modern, sensible color schema throughout the UI that aims to serve the interface's complex needs. We are simultaneously working to cleanup disparate color treatments throughout the UI. These changes will help to solve for visual contrast issues that are currently all too prevalent throughout Jenkins.

Header bar and breadcrumbs

We've dramatically improved the design of this UI component, resulting in a more user- and mobile-friendly experience. My team very intentionally began with this component because of its relative simplicity compared to more extensible elements. We leveraged and refined the new base styles, feeding every bit of progress back into our burgeoning design system to inform the design of future components.

Navigation panel

The Jenkins navigation panel currently suffers from several deep usability complications, so we'll be making more fundamental changes soon. Within Phase 1, we've leveraged new type, color, spacing, and interactive state guidelines to improve its aesthetic and legibility. These changes dramatically improve the panel's overall ease of use.

About project confidentiality

The vast majority of work being contributed to this initiative also informs CloudBees' proprietary product offerings and long-term strategy. As a result, I can't share more than the base style details above. As this initiative continues and more details are shared publicly, I will share more about the work.

© Joseph Brueggen 2020