Cloud CICD
Continuous Integration Continuous Delivery Automation
Client
- Lawrence Music Ltd.
Date
- 2019 - 2020
My Role
- Lead Product Designer
Target Audience
- Internal Visa Employees, Developers, DevOps, Engineers
Business Summary
Visa’s CloudView CI/CD is a cloud application that automatically build and test codes. A continuous integration and continuous deployment CICD pipeline is a series of steps that must be performed in order to deliver a new version of software. CI/CD pipelines is a process focused on improving software delivery throughout the software development life cycle using automation.
Using CI/CD helps automate the development, testing, production, and monitoring phases of the software development lifecycle. Businesses develop higher quality code, collaborate and deploy faster. Automation is what makes CI/CD pipelines valuable.
The pipelines combines continuous integration (CI) and continuous delivery (CD) to constantly and consistently test and build codes. CloudView CI/CD is used to build and test software projects, making it easier for developers to integrate changes to the project, and deploy code to the server.
It is ongoing automation and continuous monitoring throughout the lifecycle of apps, from integration and testing phases to delivery and deployment.
Business Problem
Redesign the current CICD application. The application felt incomplete. Some parts of the application weren’t completed and not useable, it was missing features and functionality.
The application was not user friendly. Had a ton of problems. It was too complex and confusing to use. Needed tribal knowledge to use. There was no demo videos, no user guides, no help system, and no contextual help. The complex language didn’t help either.
CICD application was hidden on the CloudView platform and was hard to find. There was many layers of complexity and tons of steps and forms that needed to be filled out to use the CICD pipeline. The UI was confusing and very hard to understand. Just understanding how to create a new project or pipeline is very confusing. I needed assistance to understand where to start. There was a lot of restrictions and layers of needing access. The application itself was hidden and needed to be surface to the top of CloudView Cloud Platform itself.
Business Solution
Redesign CICD from the ground up. UI designs driven and validated by user research data. Interview users and create surveys to understand the users needs and find current pain points.
Make new CICD application user friendly. Understand the users goals, and break down the complexity of the UI and application. Create a friendly UI that is easily understood.
The new application should be easy to understand for a new user. Onboarding, user guide and contextual help to guide the users through the application. Give the user as much help as possible. Break down complex language to human language.
Easy to use navigate and move around in the application. Navigation assist system. Demo videos to show users how to use the application. Users should be able to use the application and launch their projects, quick and easy.
Result
Full redesign of the CICD pipeline editing experience. Worked with Developers, Technical Project Manager and Product Owner to build and release a full production CI/CD framework.
Increased user satisfaction, users found CI/CD easier to use and more intuitive. Improved container developer experience by identifying & designing 20+ new features. Help add designed user guides to make it easier for users to understand. Less clicks, less clutter, easy to understand navigation, help navigation assist system and tool tip help.
The onboarding help new users understand the framework and how to use the new CICD. There’s also demo videos and other help features to guide the users. Worked with product owner to help accelerate container platform adoption through presentations
The new help system, help users understand terminologies and breaks it down into human language. The new project listing page, help made it easier to find projects and pipelines. It was easier to create a project, build, test, and deploy.
For FY22 (Q1-Q4) Visa Cloud Platform – By the Numbers
84.84k Containers Builds
656.85k Deployments Completed
Design DevOps Process
Continuous Integration
Continuous integration is the process of automating the integration of code changes into the code base. It allows developers to frequently merge code changes into a central repository where builds and automated testing are executed. This helps DevOps teams identify integration issues, bugs quicker, improve software quality, reduce the time it takes to validate, release new software updates and helps avoid problems at the final merge for the release. Continuous integration helps streamline the build process, delivery schedules and resulting in higher-quality software.
Continuous Delivery
Continuous delivery expands upon continuous integration by automatically deploying code changes to a testing/production environment. A pillar of modern application development, continuous delivery expands upon continuous integration by deploying all code changes to a testing environment and/or a production environment after the build stage. It follows a continuous delivery pipeline, where automated builds, tests, and deployments are orchestrated as one release workflow.
Automation
Automation simplifies the development, delivery and management of software solutions and reduce the risk of change through software. The result is faster delivery of reliable software. Automation is important to DevOps process, it enables teams to move much more quickly through the process of developing and deploying high-quality software. With automation the simple act of pushing code changes to a source code repository can trigger a build, test, and deployment process that significantly reduces the time these steps take.
Infrastructure as Code
Infrastructure as Code (IaC) automates the provisioning of infrastructure, enabling your organization to develop, deploy, and scale cloud applications with greater speed, less risk, and reduced cost. Infrastructure as Code (IaC) uses a high-level descriptive coding language to automate the provisioning of IT infrastructure. This automation eliminates the need for developers to manually provision and manage servers, operating systems, database connections, storage, and other infrastructure elements every time they want to develop, test, or deploy a software application.
User Research
Competitive Analysis
Deep Dive Analysis – Codefresh, Azure DevOps, Electric Flow
Highlights
Intuitive UI, Pipeline as Code, Terraform & Helmsupport, Approval Support, Plugin Market, Serverless Support, Cloud 1st + On-Prem, Commit to Prod Traceability, SDK, CLI, & API, 1 Stop Shop, Strong Deployment Capabilities, Pipeline & Env Management, Broad Suite of Tools, Advanced Pipeline Support, 3rd Party Tool Integration, Advanced Analytics, High Reliability and Scalability, Strong Support for multiple deployment technologies (containers, VMs, mainframes)
Strengths
CI Companies – Atlassian Bamboo, CircleCI & CloudBees
Build & Packaging, Automated Test
CD Companies – Electric Cloud, IBM UrbanCode, Octopus Deploy, XebiaLabs
Advanced Deployment Strategies, Support Declarative Modeling, Best Security
Config Mgmt – Chef & Puppet
Infrastructure as a Code, Best for Deployment Simple Release Management
Market Trends
Release flows across multiple pipelines
The more granular the model the better
Application, Middleware, Network, Infrastructure, Configuration, Dependency Management, Drift Tracking & Rollback Support
Terraform is becoming Industry Standard
Cloud Integration now Standard
Release Packaging include BOM with install order
AI features are coming
Release readiness, Risk Assessment, Leveraging Data from Version Control, Monitoring Tools, Service Management
Recommendations
Decide up front if you want integration between best of breed or fully integrated toolchain
Manage your pipelines, preferably as-code. Artifacts can be stored in source control tools and can reduce vendor lock-in
Drive release automation as an application of business process management
Tracking task workflows, decision points, concurrent execution, approvals, escalations, and similar concerns
BPM-influenced tools use a graphical canvas and commonly recognized flowchart symbols to model release automation workflows
Key Capabilities
Modeling & Orchestration, Continuous Build & Integration, Continuous Testing, Deployment & Release Orchestration, Monitoring & Day 2 Ops, 3rd party tool integration, Reporting & Project Management, UI/UX, CLI, SDK, APIs
Release Orchestration
A workflow engine that documents, automates, coordinates, tracks, and orchestrates human and machine activities and tasks associated with application releases
Prebuilt metrics, visualizations, reports, and other analytical capabilities designed to track, measure and optimize release activities, while satisfying audit requirements
Pipeline & Environment Management
Ability to create/define, use, maintain/curate/version, visualize, share, monitor and govern:
Multiple delivery pipelines
Existing/planned environments composed of multiple application and infrastructure resource
Automated creation/update/decom and governance of multiple environments for Dev/QA/Prod
Deployment Capabilities
A set of customizable automation content (e.g., tasks, runbooks, models, templates, code artifacts, components, and functions) to reduce dependence & eliminate manual effort.
User Testing
User Testing to understand if new and existing users can understand how to use CIoud CICD using prototypes. There was 10 new users and 10 current users for this test.
Abstract
In this user study, we’ll have you create a project for your service before creating and configuring a pipeline for your development environment.
Phases of the User Test
1. Create a new project for your application (start)
2. First you are going to create a dev pipeline
3. Next I would like you to configure each of the stages in your pipeline
4. Great now that you’ve configured each of the stages, I’d like you to add a stage to auto deploy your application
5. Now imagine that you’ve done a couple of deployments with your pipeline and want to enable auto deployment for your environments. Does this screen make sense? Would you be able to complete the task?
6. Now we are going to update your build stage with 2 additional steps. First add a step to send build notifications then add a custom shell script.
7. Finally can you add new configurations to your pipeline.
Issues
Critical for user study
1. Add wizard stepper. Adjust to be placed at the top of the experience.
2. Add help slideout with help content. Consolidate help icons to one at the top right and consolidate content in the slideout rather than several collapsible elements through the experience.
3. Leverage newly designed stage picker (iconography, layout, etc.) Please add detail view for each card.
4. Propose solution to reduce scrolling & optimize screen real estate for stage & step configuration. The proposal in the design hasn’t quite nailed this as the order of stages & the steps in each stage isn’t obvious. A re-layout or tweaks we can use to improve the current experience (maybe anchoring the stage & steps to help users keep context?)
Nice to have for user study
1. Updated step iconography
2. Updated graph visuals
3. Video Tutorials
4. User content store where users can author and publish automation content
Bigger changes for V2
1. Project /Pipelines /Run /Artifacts navigation framework with tab nesting needs further work. The model we have currently is production ready from design standpoint. The newly suggested framework needs real work to align to CloudView & CI/CD navigation needs.
2. Pipeline Runs page – great visual direction here (the relationship between runs & pipelines & projects in your flow needs some work). Given the time & resource constraint. Review & align the visual direction established
@Hoang Dang has been recognized by @Gbenga Badipe for“Transform Technology”
❝Working with Hoang on the Cloud CI/CD UI Redesign has been enjoyable. His ability to solve tricky UI layout and information visual hierarchy problems is impressive. His work has been greatly impactful to the team – even causing one team member to reconsider their grad school plans after seeing Hoang’s new mocks! I look forward to taking on new challenges with Hoang and consider him not just an asset to our team but an asset to Visa.❞
Tells you where you are in the wizard configuration. You can add a parallel stage when you click on the + button above. Progress bar of how much % you completed so far in the wizard. You can drag and drop the stages around to move them in the order you want them display. In the pipeline editor, click the + icon to the right of the stage you created to create a new stage. Predefined stage templates. Everything is ready to go!
Pipeline
The above pipeline will show how the code will move along each stage and the steps within it. A pipeline is made up of one or more stages. A pipeline can
deploy to one or more environments.
Stage
A stage is a way of organizing jobs in a pipeline and each stage can have one or more jobs. A stage contains all the job that needs to be carried out. The job is specified in the form of stages. Each stage performs a specific task.
Step
A step can be a task or script and is the smallest building block of a pipeline
A series of steps can be defined within a stage. They are carried out in sequence to execute a stage. A step is one way to specify what will happen. There must be at least one step within a stage.
Key Insight
The visual above represents a pipeline. You can drag and drop the stage around.
The progress bar above indicates your progress so far in putting together a pipeline.
Video tutorial at the bottom that shows step by step instruction on how to put together a pipeline.
The bottom bar tells what the process is, it explains, the pipeline, stage and step.
The biggest thing to this UI interface is the collapse and expand bar. It will be used throughout the UI. The design is made this way because there is a ton of information being displayed. When you click add a stage, you can select stages from the right hand side or you can expand it. The templates button on the top right, is pre defined pipeline stages.
The stages below are single stages, they have preset steps and actions built into them. Click into the stage if you wish to modify, add or edit the steps or actions within it. Create your own custom stage. Add steps and actions to your custom stage and name it. Test codes for other browsers.
Key Insight
Expanding the stage, will open the complete Stage Library. The Stage Library, has pre defined stages, with steps built into them. or you an add more steps or actions. You can also build your own custom stage. In this example we will be clicking into Build Stage.
If you want to go back to the previous menu, you can either go back using breadcrumbs. Or you can go back using the collapse bar and closing it. There is no back button on the navigation on top to save space. The design is built to 1440 x 1080 pixels. Most screen size run this resolution.
Click into the stage if you wish to modify the actions within it. Create your own custom step. Clicking here you can add your own custom step or action
Steps and Actions
The possibilities are endless here. You can add many different actions from many different platforms and services. You can add AWS, Google Cloud Platform, Microsoft Azure Platform, Different Build Actions, Build Tools, Downloads, Dockers, Kubernetes, Android, Setup, DevsOps, Delivery to Version Control, Code Quality and Review, Notifications, Performance and App Monitoring, uptime monitoring and gist hosting services. There’s a lot of flexibility to build a world class application. We can build a library, organized them by functionality and actions. Steps and actions can be combined.
Key Insight
Clicking into the stage will open the Steps and Actions Library. The steps above are predefined. The designed was built this way so you can add more steps and actions. It will help with the lifecycle of the application and have everyone invested.
Clicking add will add the steps to the stage. The add button will take you back to the previous screen and the Built stage will be either updated with more step and actions instructions or added to the previous screen.
How it works
The stage is made of up of steps and actions, that it performs and executes. Below is a diagram of how it operates.
Key Insight
The above is a visual representation of what is happening. It illustrates the relationship between Stage and Steps / Actions. Think of Stage as a block, and there are instructions place within it. The stage will perform the task given.
The stage is a logical boundary in the pipeline. It can be used to mark separation of concerns like Build, QA, and production. Each stage contains one or more jobs. A step can also be a script or a task. A task is simply a pre-created script. A task is a building block for defining automation in a pipeline. A task is packaged script.
In the pipeline editor, click the + icon to the right of the stage you created to create a new stage.
Build
The Build stage is typically where source code is assembled, compiled and packaged. The source code is combine and it’s dependencies to build a runnable instance.
Checkmarx
An application security testing and static code analysis solution. It scans source code, identifies security vulnerabilities within it, and provides remediation with sample code.
Trigger
A trigger tells a pipeline to run.
Run
A run represents one execution of a pipeline. It collects logs associated with running the steps and the results of running test.
Artifact
An Artifact is a collection of files or packages published by run.
Configuration
The configuration of a pipeline used to handle a web service request is specified in an XML document, known as a pipeline configuration file.
Deploy
The Deploy stage is where you deploy it into a staging or a test server. Here you can view the code or you can view the app in a simulator.
Key Insight
The first thing you noticed about this page, it loaded with a lot of help tips. The help tips can be collapse or expanded as need.
The help tip the far top right has vocabulary words of what the predefine stages mean. The bottom right help tip has vocabulary words pertaining to the steps. The add new stage button can also be selected here. It will take you to the stage library.
Using the sliding icon will give you more real estate space on the screen and more options will appear. Each page will be loaded to a pre default view. You can save the view you wish to see it in.
A run represents one execution of a pipeline. It collects the logs associated with running the steps and the results of running tests. Run will appear blue, when progress bar is 100% and you can execute it. Or you can select save, which will take you to the pipelines landing page for project.
Key Insight
In this screen, both help tips are collapsed. You can clearly see more options in the UI. The progress guide pops up on the top and tells you where you’re at in the wizard pipeline. You can also see the run’s button. It is currently grey out. The run’s button will appear only when the progress bar hits 100%.
The step configuration can currently be edited. There is a navigation bar on top of the step. That bar is related to the step configuration. There is a lot of navigation. The design is set up in a way to handle multiple levels of navigation.
Key Insight
This page shows the run’s button in blue and you can click on it. If you select the drop down, you can save it. Selecting save will takes you the Pipelines Landing page for project. Clicking on run will takes you to the Run’s Visualize pipeline page and the run’s will be executed.
Key Insight
If you collapse the top visualize pipeline. The step configuration page will have more real estate space. A new option that opens up is add a new step. Clicking on that will take you to the steps and action library. If you hover to the far right on the step navigation, you can drag and move the steps around. So the order
of the execution will be different for the stage.
Select all pipelines when you click on box. This takes you to your git hosting provider, you can refresh repository, change repository connection or browse repository. This page displays all your execution. You can see all your activities, source and executions. The visualize pipeline button here will take you to the runs visualize pipeline. The run button here will run all pipelines below. Running the pipeline will run the pipeline here and show you how the status progress to the right side. If you want to see the visualize version, go to branch and click on branch to see it. What is happening for your clear understanding, it is starting a run from that branch. Open details of failed execution, this link will only appear if there is a fail run. When you click on branch it will take you to the run’s execution page.
Key Insight
If you click save on the previous page, you will land on this page. Pipeline will be selected and 3 sub navigation will appear. My pipelines will be selected.
It will display a list of your pipelines related to your project. The code will let you change your code repository. Activities will displayed a list of run’s activity. You can also create a new pipeline here, click create new pipeline top right. You do not have to go to the Visual Run’s Pipeline to see your execution and can do run here.
Clicking the blue play button on the top left of the list, will run the pipeline and execute it. The status bar next to it will display how long it’s taking to execute the pipeline. If there’s a failure to the pipeline, The View Link will appear under resolve. You can go into it and see the details of the fail run’s execution and resolve it. There’s 2 ways to go to the Visualize Run’s Pipeline, the first way is to click on the branch and it will take you there, the second way is to click on the Visualize Pipeline on top and it will take you there. To run all pipeline’s, click on the box on the far left hand side and click on the run’s button on the top right.
The breadcrumb will also take you back to the previous Pipeline’s running page. Shows you all changes made to the pipeline and codes. Shows you failure log, error logs and succeeded logs from run executions. An Artifact is a collection of files or packages published by run. A place to download pipeline log. This will stop the run but it will change into the play button after execution. It can be re-run. The info icon displays the info of the pipeline below or it can hide the information below. The steps below are executing the
the actions for the stage above. in this example it is executing the steps inside the build stage.
How it works
The UI is interactive, when you click on a stage, the steps below will be displayed. The line indicates the relationship between the stage and the step. The green check mark means the action has been completed. The blue yellow
spinning circle means the step is executing the action and is in progress. You can click the arrow to open up the step and take a look at the information in a really cool display. If there’s an error, an error will be display.
Run Execution
A run represents one execution of a pipeline. It collects the logs associated with running the steps and the results of running tests.
Run Summary
A summary view of your run execution. You can see whether the run fails or succeeds. If it fails, you can also see the error displayed, edit that action that failed or retry the execution.
Key Insight
There’s 2 ways to get to this page, you can get here from the Pipeline’s Landing Page Project or when you finished configuring your pipeline, you can click run and it takes you here. There’s 3 top level navigation in this page. To stop the run’s execution click stop on the top right. Change shows you all the changes and edits made to pipeline. Test shows the fail, succeeded and error runs. Artifact will display the pipeline log. The run’s execution will also displayed that it’s progress on the top left hand appearing in yellow, it is also an instant indicating that it’s in progress.
The icon will be displayed in the circle. Associated with the stage. When it succeeds, a green checkmark will appear. If it’s in progress it will be blue and and has the progress indicator. Selecting the stage will populate the steps in the bottom. In case case, we will select build, and the steps for build will be displayed. It will show you where the run’s execution currently is for steps and actions. If two steps are together, it means the step is completed successfully and highlighted in green. The above line shows the relationship between the two. The time will also be displayed on the right hand side. It is not clutter with navigation.
An Artifact is a collection of files or packages published by run. A place to download pipeline log. The exit icon is to leave runs execution page and head back to pipelines landing page.
Key Insight
The progress bar on top indicates that the run has failed. In the steps below, you can clearly see where the run’s execution failed in the step and actions. Clicking on the arrow to the left, you can open the log. The log will display where the code execution failed.
You can download the raw logs or you can click into full screen and see the logs. Or you can directly go to edit this action button and reconfigure the pipeline. The log will show exactly where you and failed and what to fix, taking you directly to the source of the problem and solving it. You can also retry the execution to see if the problem is fixed.