Creating a design system for Cutover

Produce a SaaS design system for a cloud-based work orchestration platform.

SaaS design system cover image

The original product was created by Cutovers' developers. This meant that without design and UX input, the interface was highly complex and lacked a clear action.
 

Cutover are a work orchestration and observability platform. They needed a design system to improve the usability and experience of their online product. I was contacted by their Lead Designer to work alongside in creating a functional and intuitive system.

There were several requirements of the design system; they needed to facilitate an efficient and harmonious working methodology amongst the Design and Development teams. They needed a cloud-based solution which would enable remote collaboration. They were also very keen to improve the design and usability of their current product - it had been constructed at speed, which had made it necessary to forego UX and Design input. This meant the interface was highly complex and confusing with many screens lacking a clear action.

The problem

This project would require an evaluation of Cutover’s current product, with the purpose of identifying opportunities for improvement. Additionally, it would assist the in-house design and development teams by providing templates, design patterns and component libraries.

Cutover’s Lead Designer recognised the need for the design system. With an awareness of the limitations of their current product, he initiated a project of producing a definitive design system, The intention being to recreate Cutovers product from the ground up with a much greater emphasis on usability and user experience.

The users of the design system - Cutover’s Designers and Developers, needed a solution to that permitted collaboration on projects. It was concluded that Figma - a web-based design tool, was the best option for the task. It would permit the main users of the system to remain productive and efficient during lockdown and beyond.

SaaS design system: buttons

The image above shows a snapshot of Cutover's original assets. It was my responsibility to analyse and arrange these assets into categories.

By working closely with Cutover’s Lead Designer, I determine the scope of the project and the correct aesthetic for the content. We regularly discussed ideas and options for improving the accessibility and user experience of both the interface components and design patterns.

A range of assets of the current product had been collected and added to a Figma artboard. It was my responsibility to analyse and arrange these assets into categories, and then divide them into smaller groups and variations before scaling out the different states (default, active, disabled and error) for each item.

To create an intuitive design system for Cutover, I researched other design systems such as Material Design, Tailwind UI and Ant Design. By comparing these well known systems, I was able to identify patterns and themes for common user interface problems. I then used these styles as a basis for Cutover’s new design system.

SaaS design system: buttons

I reviewed well-known design systems to identify common themes and patterns. Viewing the content also helped to inform me how I could improve upon the grouping and naming conventions for Cutover’s design system.

At the beginning of the project I had focused on very simple and basic components. Once Cutover’s Lead Designer and I were satisfied with the design we moved to increasing complex elements such as data tables, timelines and graphs. Each of these elements required rethinking and redesigning to reduce their cognitive load. We cut the amount of content they displayed down the most essential details and used a traffic-light colour system to help communicate status.

Using Figma helped me to construct the design system for its ability to create a library of components, colours and typographic rules. It pulled the pre-existing library assets from Cutovers current designs and allowed me to update them, having a knock-on effect to every component created within the project. I created new responsive components by fixing elements of the design to different sides of their parent frame. This meant mobile, tablet and desktop designs could be created quickly from a single, responsive component.

Encountered challenges

Working on the project under lockdown conditions made creating a functional design system quite challenging. It put limitations on the amount of time the Lead Designer and I could spend discussing the project.

At the beginning of each week, the Lead Designer and I met through Zoom to discuss the current step of the project and agree on requirements. I would then spend several days executing the actions which had been agreed, before reviewing the designs in a follow-up Zoom meeting and planning the next steps of the project.

Towards the end of the two-month span, the project underwent a final review and templates were set up using variations of the components. These templates were constructed to enable the designers to swap out the assets quickly and accurately within the layout.

SaaS design system: templates

Responsive graph and chart components were created within Figma. This would enable Cutovers designs to have access to premade components necessary in constructing new data page layouts.

What was accomplished

Having solely used Figma to construct the system I learned a lot about its capabilities and collaborative features. It was really simple using the software to build a scalable design system, whilst being accessible to multiple people at the same time.

Upon reaching the deadline, the project was handed over and I received very positive feedback. It was a great accomplishment to have concluded the project in the time allocated and during lockdown conditions. The system will be utilised to relaunch the Cutover product in the near future, and will enable a greater degree of harmony between people and work orchestration.

SaaS design system: templates