Crafting a Product Language for DevOps Tools

Crafting a Product Language for DevOps Tools

Crafting a Product Language for DevOps Tools

Crafting a Product Language for DevOps Tools

CtrlStack is seed company offering Change Intelligence for DevOps, helping prevent downtime and identify changes before customers are affected. I helped them design the visual language for their product.

CtrlStack is seed company offering Change Intelligence for DevOps, helping prevent downtime and identify changes before customers are affected. I helped them design the visual language for their product.

CtrlStack is seed company offering Change Intelligence for DevOps, helping prevent downtime and identify changes before customers are affected. I helped them design the visual language for their product.

CtrlStack is seed company offering Change Intelligence for DevOps, helping prevent downtime and identify changes before customers are affected. I helped them design the visual language for their product.

Results

Enhanced UI and user experience

Improved communication with potential customers

Contributions

Prototyping

Visual Design

UI Design

Web

Overview

Ctrlstack was attempting to acquire customers. While the product was well-received, it struggled with appeal and trustworthiness because it was not yet an established product or brand. While helping establish the product's look and feel, I also provided a lean Figma UI kit that could be reused to design quicker and more consistently.

Gaining Context

Initially, the product's look and feel lacked cohesion and finesse. For example there was awkward sizing, inconsistent color usage, and UI states that made a users take a second look.

Envisioning the Future

After gaining context, I quickly created a few moodboards to create a vision of the look and feel. This acted as an anchor for the visual language. We landed on darker feel that would create emphasis on data, prioritize good typography, and maintain the current brand of the company.

A Good Enough Foundation

Considering it’s a seed company, good enough is better than perfection. I established the pieces of the visual language like color, text styles, space, icons, etc that would relate to the established moodboard.

Design, Tweak, and Repeat

With the pieces of the visual language established, I began creating components and prototyping. It was important to stress test the cohesion and effectiveness of the visual language.

During this time, I made sure to create semantic colors that were repeatable. For example, I’d ensure the orange 500 color would be used for certain interactive elements. With these semantic colors, engineering could build with more accuracy.

A New Look and Feel

Near the end, I redesigned key screens in the product. The result was a much improved UI that would help CtrlStack increase it’s appeal and trustworthiness to users.

More detailed information about the process and execution of this project is available on request.

© Javier Jacome 2024

© Javier Jacome 2024

© Javier Jacome 2024