CircleCI Next Generation 

Role: Lead Product Designer and Manager. In addition to managing and mentoring two other product designers, I am the primary contributor when it comes to design direction, strategy, and our design language.

Problem: CircleCI suffers from a fair amount of technical debt. As a result, updates of any magnitude feel like enormous efforts, and might I add costly for the company. In addition, having such a strong tie to GitHub as a VCS has hindered our ability to scale with the growing needs of various customers. Through extensive feedback the product team had great ideas for things we wish we could do, but never had the opportunity to do them.

The task was quite simple – bring CircleCI to the next generation. Some requirements included: user-centered, incorporate a design language, accessibility, update brand vision, and create a domain model that is VCS agnostic.

 
 

User Research

An important, and arguably non-negotiable part of the user experience design process. I prioritize this at the beginning of any project and it is regularly injected throughout the design process to gather qualitative and quantitative data, validate hypotheses, and solve differences of opinion.

 
user-research-image.jpg

user interviews

Our primary mode of research are user interviews. We gather information on our users’ feelingsmotivations, and daily routines, or how they use our and other products. This helps to establish a clear understanding of a user’s requirements. What will make them more successful, and faster? We incorporate this feedback into our product requirements and designs on a daily basis.

reserach-gathering@2x.png

documentation + action

Documenting your research practice is fantastic step, but flawed if it’s considered the end result. I make sure we have actions items (JIRA, Asana, etc.) with a clearly stated problem, proposed solution, and owner. Since we have early and active involvement with users, we avoid cost, churn, and ultimately create a better product.

 
 

Change is Hard

The existing product historically suffered from having too many areas that need attention. Unfortunately, making changes were met with relentless headwinds from lack of resources to an unwieldy tech stack. One enormous shift worth noting was re-educating our users on terminology. The graphic below was used internally and externally to illustrate as simply as possible what was happening as we self-corrected on what “Builds” actually meant to our users.

In a blog post, I used this image to illustrate a change in terminology and hierarchy as CircleCI evolves.
  • Provide a flexible domain model that allows organizations from every VCS to structure their teams and projects in a simple, scalable way.

  • Simplify and consolidate navigation, preferences, and primary tasks to reduce user sessions in the UI (Yes, less time in the UI means more time committing code).

  • Create a hierarchy, url structure, and breadcrumb that is consistent while providing multiple means of navigation. Our old structure brought workflows and jobs to the same level despite the fact workflows contain jobs. In our new experience, builds envelope those two.

 
 
 

 
 
 

Where Did We Come From?

CircleCI’s technology and developer centric approach carried it to being a leading CI/CD tool. However, our product was using outdated frameworks that were largely unsupported. As the monolith became larger, iterating quickly and modeling a CI/CD mentality became increasingly challenging. Small wins turned into debilitating migraines.

 
 
 

Where Are We Going?

Industry leading technology and design. A company considered by Foresters to be the 2nd best rated continuous integration solution should have an experience to match. As a team, we went to great lengths to modernize a design previously lead by developers. We addressed best practices, accessibility issues, browser support, and responsive design. Large undertakings involved navigation restructuring using a new highly scalable domain model and simplification of our information architecture.

 

Level 2 – Build Detail

Level 2 – Build Detail > Jobs

 

 

Level 3 – Job Detail

Level 3 – Job Detail > Summary

Level 3 – Job Detail > Details Panel

Project List

 
 

Design System

Working through a complete redesign, there’s been diligent attention to every component and their details. On the build list, this cell has many states and potential for unbelievable complexity. It’s important to make something that scales as team’s builds scale, that is direct about action items, and surfaces the highest priority information. It also expands to discover more detail before determining if a build requires troubleshooting.

 
 
 

Onboarding

There are two fundamental steps to creating an account with CircleCI. Naming and validating, followed be connecting projects you would like to build. After selecting projects, there are more configuration steps to customize, test, and build. Project creation can be a part of an initial onboarding, but due to the level of detail it’s also served as a standalone experience.

 
onboarding-img2@2x.png
onboarding-img3@2x.png