Designing a new feature for the DevOps tool

UX Designer
1 PM
3 Developers
Jan-Mar 2021
image of the codegiant website


Codegiant’s propose is to remove any friction in the development process and streamline the developer experience. We were continually building new features for the users in order for them to fulfill the DevOps processes in one simple experience. After evaluating the technical constraints and the business strategy, we decided to go for the "Serverless" feature.

(Serverless workflow: It’s a cloud-native development model that allows developers to build and run applications without having to manage servers. Once deployed, serverless apps respond to demand and automatically scale up and down as needed. Serverless offerings from public cloud providers are usually metered on-demand through an event-driven execution model. As a result, when a serverless function is sitting idle, it doesn’t cost anything.)


As a product designer, I’ve done research and grasped some solid technical knowledge of the feature and was responsible for the design that fulfills the scope which was created by the team. The serverless workflow allows developers to run code without provisioning a server. Create, version, and run sequences of functions with the built-in serverless IDE.


We worked as an agile team where I was the only designer, we were operating in a 2 weeks sprint and having daily scrums to see if we encountered any design flaws or technical issues.
Most of the time the design needs to be presented in a short period of time, the hand-off process was always abrupt. Multiple iterations can be expected after the UIs were in the development process, there were lots of overlaps for designing and developing in the same time so the faster and more precise the iterations can be, the smoother the development process is.

image of the timelinw


The user experiences are very diverse when it comes to different features in the platform. (The existing features are issue tracker, git repositories, ci/cd and documentation. you can see them in the image below) That being said, how to make the user experience of the new feature consistent with other existing features was one of the biggest design challenges.

image of the screenshots


Following the principle: the product’s goal is to simplify the complex actions in the development process so in order to make the new experience consistent, the design needs to be as minimal and clean as possible.

Apply the design system: other than applying the basic foundations in the design, I also defined and applied the page hierarchy here in order to make it consistent and accessible.

Avoid action overload: although there are multiple actions in this page, we kept 2 of the most important actions as the main and secondary CTA and made them clear and obvious in this page.

image of the approches


The serverless feature

As an early stage, growing rapidly start-up, we wanted to deliver as many accessible and high quality features in the platform as possible. By having the Serverless feature, the users can not only write and run Functions-as-a-service with zero configuration, they can also view the metrics and test it in the serverless workflows. Here are some benefits for the users by having the new feature:

  • Operational costs are reduced in a serverless model because the developers can pay for cloud-based compute time as it’s needed, instead of running and managing their own servers all the time.
  • By offloading the routine tasks of provisioning and managing servers, developers have more time to focus on their apps.
  • It helps enable DevOps adoption by reducing the need for developers to explicitly describe the infrastructure they need to provision for them.