CircleCI Next Generation 

Role: Lead Product Designer and Manager. In addition to manager and mentoring two other product designs on the work, I am a heavy individual 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.

Therefore the task was quite simply, bring CircleCI to the next generation. Some requirements were to be user-centered, incorporate a design language, update brand vision, and create a domain model that is VCS agnostic.

 
 

User Research

An important, and arguable non-negotiable part of the user experience design process. I prioritize this at the beginning of any project, but it is injected throughout to gather qualitative and quantitative data.

 
user-research-image.jpg

user interviews

Our primary mode of research is 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, propose 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 current product had and has many areas that could improve tremendously. However, as previously noted, making changes were met with relentless headwinds. It’s worth noting fundamental shifts from the old product to where we wanted to go with the new product.

 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 We’re 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 among other things.

 

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