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.
Problem
Ctrlstack was acquiring their first customers. The product was well-received but struggled with appeal and trustworthiness due to its newness. To address this, the team was looking for help to establish the product's look and feel to improve credibility.
Results
Lean design system and Figma UI kit
Enhanced user interface and user experience
Improved communication with potential customers
Impact
Initially, the product's look and feel lacked cohesion and craft. There was awkward sizing, inconsistent color usage, and odd UI states. I redesigned key screens of the product to create a UI that would help CtrlStack increase it’s appeal to users. All while remaining on brand and distinguishing themselves from competitors.
Visioning
Before designing, I created moodboards to create a vision of the look and feel. This acted as an anchor for the product language. With team approval, we landed on a darker feel that would create emphasis on data, prioritize good typography, and maintain the current brand of the company.
Establishing Basics
Considering it was a seed company, good enough was better than perfection. I established the pieces of the product language like color, text styles, space, icons, etc that would relate to the established moodboard.
Stress and Play
As pieces of the product language were established, I created components and prototyped frequently. It was important to stress test the cohesion and effectiveness of the product language. I made sure to create semantic colors that were repeatable to help engineering build more consistently.
Focusing on Craft
During the redesign of the interface, there was an emphasis to follow more common UI patterns and to ensure elements worked cohesively.