Kaseya Design System

Kaseya Design System

Overview
Kaseya has preached its IT Complete platform for many years as the only fully comprehensive suite of products in the IT space that allows businesses to effectively manage all of their IT operations. It integrates endpoint and network management, service desk, unified backup and recovery, and compliance with products that are tightly integrated.

Having nine very different products, some coming from acquisitions and some that were born and bred in house, it became clear that the user experience wasn’t as “complete” as we would have liked. We needed to bring consistency, clarity and a way to collaborate more closely across platforms and teams.

During my first year these problems became extremely evident

• Multiple different products with drastically different design languages

• 20 year old legacy code and UI that made it incredibly difficult to update and manage.

• No design documentation and poor dev documentation

• Cross product teams had poor communication, when it came to creating a unified experience

Being Kaseya’s first product designer hire proved to be quite a hurdle in a culture that situated itself on a PM to Dev pipeline. My first challenge was how do I convince hundreds of people that we needed to invest in a design system and set up a culture of design thinking. I worked on internal presentations and workshops to educate stakeholders. Showcasing the benefits design can have on a product and how design systems specifically could greatly improve the quality, consistency, and provide a single source of truth to our internal stakeholders.

Education alone was not going to get us where we needed to be. Along with that I needed all the teams around me to become design advocates to elevate the need for a design system. After gaining the support of the CTO I was presented with an opportunity to start moving the engineering team in the design system direction.

Working on a new initiative to revitalize VSA the companies flagship, and one of their oldest products, I jumped at the opportunity to start the design system process. The original initiative was to start the process of redesigning VSA completely into a modern and more useable product.

This first challenge was with the infrastructure itself, being a product that was 20 years old had plenty of issue. In order to do any kind of UI work the engineering team needed to untangle the current infrastructure that fused the front end and back end code together making it difficult to move quickly.

We had to pivit in order to start making headway. In order to provide real value quickly we decided to approach it in components. The first of which was to redesign the top and side menu of the product to provide better clarity and clean up duplicate functionality. I broke down the different areas to their basic functions and used data to determine what was being used and what needed to be deprecated.

I worked closely with the development team to componentize the sections and code in a way that allowed for flexibility and reusability. The result was very well received amongst our user base but more importantly helped the team take ownership and become advocates within the company that fueled the design initiative.

The biggest challenge here was in education and process with a team that was not use to having design QA sessions and working in a very detail oriented way. I was able to introduce tools such as zeplin to gather asset information, and clickable prototypes in invision to help communicate the interactions I was looking to implement.

Bringing The Family Together

After the successful roll out of the new VSA top and side menu, the company started to invest more on redesigning the whole product lineup holistically and defining what it truly meant to be ITComple . In early 2019 the ITCompete task force was created that consisted of myself, another designer from one of our acquisitions, ITGlue, and two managers from another business unit called Rapid Fire Tools.

Just like designing a product we took an iterative lean approach to making the system. Being a design team of two we needed a way to balance ongoing work and also slowly rolling out and updating the design system over time. This process allowed us to divide up the work that needed to be done and release it in small increments.

But first we needed to define the visual style of our platform. We started by experimenting among three core products to establish a style that would then be inherited cross product.

Choosing A Color Pallet

Being a product that is incredibly data heavy with varying density it was important to keep the interface as clean as possible as to not distract from the content. The majority of the interface has a clean white theme with grays and black. Color is used very sparsely to communicate focus, action, and brand.

We settled on IBM Plex, an open source typeface by IBM. I wanted a bold, and flexible typeface that wasn’t the standard Helvetica, Arial, or Open Sans. IBM Plex being specifically developed with high density of data in mind, while being distinct, modern and bold. Being the first redesign the platform has seen in over a decade, we wanted the typeface to match the bold new direction we were heading into.

Brining Common Elements Together

Once the color pallet and typeface were defined, we started to compile the design kit. We used sketch as our platform of choice becuase of its flexibility and the ability to create design system like componenet libraries for the design team. Iconography, Input fields, drop downs, tables, and other commonly used components were were made into reusable sketch symbols. Colors styles and Font styles were also defined and organized into a “design kit” that could be used as the source of truth among the design team.

With the recent introduction of the smart layout feature in mid 2019 in sketch, this allowed us to make sure our components worked responsively to accommodate different screen sizes. Another benefit of sketch was, whenever a color, typeface style, or symbol was updated in the design kit, whatever sketch file used those components would be automatically updated, making it easy to manage.

At the same time there was also a big engineering effort to standardize with the react framework moving. Any new common component that was designed would be written in this new framework. To start documenting this process we chose to go with storybook because of its open source nature and integration with tools we already used.

Test IT

Now that we had a bit of a foundation going it was time to test it and see how we did! Our first victim was creating a unified login experience and also starting to implement the reusable top navigation bar used in VSA across all our products. We gathered together an inventory of the current colors and the different top navigation bars. We parsed out which elements of the top bar were interchangeable and which elements were going to be standard. We also standardize on placement of commonly used icons such as how a user gets to their user settings or seeing notifications.

A challenge we ran into was specifically around the ability to brand the platforms. Some of the platforms charged a fee to their customers in order to completely white label their application while others allowed for extensive color variations. We originally did not have completely white labeling the login and application experience in mind, but after getting some user feedback we knew we needed to also include the ability to completely strip any kind of branded elements.

We settled on having three different theme variations between the different applications. An original, light, and dark theme were developed to satisfy those customers who wanted to white label the application.

Results & Learnings

The system is still evolving and growing as we continue down the path of a fully fledged design system. They don't build themselves and everyone needs to be fully invested in order for it to work. Here are some of the benefits so far.

• Designing has become a lot faster and over all more consistent.

• Engineering now has a direct relationship with design, and we work more closely.

• What we deliver has become more consistent, and fixing bugs easier.

Things we are still working on

• Building better processes around documentation, updating, and adding to the system. How do we not bottle neck outselves?

• Brining in more standards to the system, such as voice and tone, illustration, etc.

• Having internal retrospective on whats working and what/how we can improve the process.