PUPPET CD4PE PIPELINES
SUMMARY
During my time at Puppet, I was the lead Product Designer overseeing their main SaaS products; Puppet Enterprise and Continuous Delivery. I was given the full responsibility to complete a redesign of Puppet's Pipelines feature within the Continuous Delivery for Puppet Enterprise (CD4PE) product. The Pipelines feature is a critical component that enables users to automate and streamline the deployment of infrastructure code, making it a key focus for improvement and enhancement. This project aimed to enhance the usability, scalability, and overall user experience of the Pipelines feature, enabling organizations to achieve seamless and efficient continuous delivery of Puppet code.
ROLE
Product Designer
CHALLENGES
1. User Interface Complexity:
The existing Pipelines feature in Continuous Delivery for Puppet Enterprise suffers from a complex and unintuitive user interface. Users find it challenging to navigate through the various functionalities and perform actions efficiently. The redesign must address this issue by simplifying the UI, updating the older components, improving the information architecture, and providing clear guidance to users throughout the pipeline management process.
2. Limited Scalability:
The current Pipelines feature lacks the ability to handle large-scale deployments and complex infrastructure environments effectively. As organizations grow and their infrastructure needs expansion, the Pipelines feature struggles to accommodate the increased workload. The redesign must focus on enhancing the scalability of the feature, ensuring it can handle the demands of enterprise-level deployments and accommodate intricate infrastructure configurations.
3. Lack of Flexibility and Customization:
Users face limitations in customizing and configuring their continuous delivery pipelines according to their specific requirements. The existing Pipelines feature lacks flexibility in defining deployment stages, managing dependencies, and incorporating testing and release strategies. The redesign should provide users with a more configurable and flexible framework to tailor the continuous delivery process to their unique needs and preferences.
4. Integration Challenges:
Integrating the Pipelines feature with existing version control systems, deployment tools, and monitoring frameworks can be complex and error-prone. The current integration capabilities may not meet the diverse needs of different organizations and their preferred tools. The redesign should address these challenges by providing seamless integration options, clear documentation, and well-defined APIs to enable easy and efficient integration with a wide range of third-party systems.
GOALS
1. Usability: Improve the user interface (UI) and user experience (UX) of the Pipelines feature to make it more intuitive, accessible, and efficient for users.
2. Scalability: Enhance the Pipelines feature to handle large-scale deployments and accommodate complex infrastructure environments.
3. Flexibility: Provide users with more options and configuration capabilities to customize their continuous delivery pipelines according to their specific needs.
4. Integration: Enable seamless integration with version control systems, deployment tools, and monitoring frameworks to facilitate end-to-end automation.
PROCESS AND TIMELINE
The following visual provides a breakdown of the overall design process used for this redesign, as well as the timeline to complete the project in its entirety.
USER RESEARCH
To ensure a successful redesign of Puppet's Pipelines feature in Continuous Delivery for Puppet Enterprise, conducting comprehensive user research was crucial. I started by conducting user interviews with internal and external users to gain insight, explore challenges, and their needs regarding the existing functionality. I then set up usability testing sessions with representative users to observe how they interact with the current Pipelines feature. Identify pain points, stumbling blocks, and areas of confusion or frustration.
PAIN POINTS
1. Complex User Interface
The existing Pipelines feature has a complex user interface that can be overwhelming for users, especially those new to the product. Navigating through the different stages, configuring pipelines, and understanding dependencies can be challenging, leading to a steep learning curve and potential user frustration.
2. Integration Challenges
Integrating the Pipelines feature with existing version control systems, deployment tools, and monitoring frameworks can be cumbersome. Users often face difficulties in establishing seamless integration, resulting in manual workarounds, complex setups, and potential errors. The lack of standardized integration workflows and documentation adds to the challenge.
3. Performance Bottlenecks
Users have reported performance issues in the Pipelines feature, such as slow execution of pipeline stages, delays in code deployments, or resource-intensive processes. These performance bottlenecks can disrupt the continuous delivery workflow, leading to longer deployment cycles and reduced productivity.
USER PERSONA
Creating a user persona, helped me to better understand the frustrations and challenges Puppet users were facing on a daily basis with the Pipelines feature. It also helped to see the expectations and needs that they were looking for in a more elevated and redesigned experience.
INFORMATION ARCHITECTURE
It was important before completing any UI Design that I stripped out all the visual components and grasped a deep understanding of how Pipelines actually works. This diagram below explains the overall Information architecture of the Pipelines feature.
STYLE GUIDE
For this redesign, I did not want to make any significant changes to the color palette and the typography, since users have built a strong understanding and familiarity with Puppet’s unique visual identity.
Colors
Typography
UI DESIGN
The redesign for the Pipelines feature focused on updating the main layout, the legacy components, the default pipelines interface and the creation of new stages. By doing so, the overall experience and usability of the product greatly increases and makes it easier for users to accomplish large amounts of tasks without previous frustrations.
PIPELINES
This new redesigned overview screen showcases a new sidebar to the right allowing users to choose from an array of options which include: Manage pipelines, Add pipeline, Add default pipeline, Add stage, and an Actions dropdown on the top.
ADD DEFAULT PIPELINE
Once a user clicks on the “Add default pipeline” button, a newly generated pipelines template is created to give a great foundation to build from. The Pipeline template contains a few common validation jobs and an impact analysis task. The user can then customize this pipeline to suit their needs.
ADD A PIPELINE
“Adding a pipeline” has a new modal popup feature, giving a more clear and concise interface letting the user choose first from a single branch or a branch regex. After that, they can select a branch by searching the branch repository and finally adding the pipeline.
MANAGE PIPELINES
The redesigned “Manage pipelines” feature gives more flexibility for the user now being able to configure pipeline specific settings as well as a new trigger dropdown. The automation web hook is also utilizing a new Puppet design system component.
ADD NEW STAGE
Adding a new stage to create a pipeline from scratch is now easier than ever. Once the user is on the Pipelines overview screen, they can click on “Add stage” and a new popup will show up where they can name the stage, select an item (deployment or impact analysis), select a Puppet Enterprise instance, select a node group, select a deployment policy and set parameters.
KEY TAKEAWAYS
By addressing the problems and overcoming the associated challenges that so many internal and external users brought up, the redesigned Pipelines feature in Continuous Delivery for Puppet Enterprise has enhanced the usability, scalability, flexibility, integration capabilities, and performance of the product. After the redesign, organizations like Porsche, New York Stock Exchange (NYSE) and Walmart have been able to better streamline their continuous delivery processes, achieve faster and more reliable infrastructure code deployments, and ultimately more improved software delivery lifecycles.
LINKEDIN
BEHANCE