Crafting a unified Design System for Actimo

What is Actimo?

Actimo is an Employee Experience platform offering companies the full web and mobile solution to build a custom employee app with communications, training, employee handbooks and much, much more. Actimo was acquired by Kahoot! in September, 2020 during the COVID-19 pandemic.

I worked at Actimo as a Product Designer for a little over a year, before moving on to become Design Lead at Feats. The offer from Feats came at a time, where the acquisition and growing pains of Actimo was starting to impact my job, in a way where I no longer felt like the best match for it.

During my time at Actimo, I designed several major features including an employee directory and a notification center for the employee app. I also redesigned key parts of the platform such as a the entire administration system navigation for desktop and mobile. I conducted research to identify opportunities for improvements or design projects to pursue, informed the product strategy and challenged the product architecture and functionality.

Last but not least, I also created Actimo’s Design System which included full whitelabel theming support.

Since starting at Actimo in February, 2019 I had been pushing very hard for us to create a Design System. Finally, in December 2020, I became lead on the project to do exactly that.

However, having before argued in favor of making Actimo “One Unified Platform” in a previous project, it was agreed that the Design System should be a unified one, that would cover both the customers’ employee apps and the Actimo administration experience.

The challenges of not having a Design System

Designers increasing design inconsistency

Despite only being only two designers who collaborated well, we both still had very different styles. Not having set standards for typography, colors and patterns meant spending a lot of time in Design Reviews discussing the details. And despite not being the intention, we were increasing inconsistency with every design project in a product which was already pretty inconsistent design-wise.

Development spending additional time on coding

With no established rules for design foundations, components and interactions, all designs had to be produced as mockups in very great detail, and front-end developers wrote a lot of custom code, which meant projects took extra time. Also, developers had no where to look for all the states and use cases of a design component, and reusing designs across projects wasn’t easy to do.

Discrepancy between Marketing and Product Design

Our Marketing and Product departments had two different perceptions of Actimo’s brand. The Marketing department supported an overly playful design which us in product felt was a mismatch with the type of product and our customers. A Design System for the Product could also mark the beginning for a common design language with Marketing, shared inside Figma.

Card Sorting our way to a common understanding

Since the Design System was going to be used by us Designers and potentially also our Head of Product, we got together and sorted the components under categories using the Card Sorting method. The Design System was a shared asset, so I felt it was important to get make the process open and collaborative, even though I was the lead designer on it.

Doing this helped us not only get an overview of our design components and the hierarchy we wanted for them, it also helped us decide on our naming convention, what to call the different things, creating a common understanding and design language.

Establishing design foundations

Every good Design System starts with solid design foundations for especially typography, iconography and colors, but also for the “invisible” parts of a design in for example spacing. These foundations form not only the building blocks for all the design components, but are also a key part in communicating the brand behind a product.

When it came to the brand itself, technically that was ruled over by the Marketing department. But as mentioned before, Product Design and Marketing had two different ideas of what Actimo’s brand was or should be. But as Product Designers, we often conducted interviews with customers, new as well as “old.” Because of this, we felt the design needed to be more mature, compared to the existing, very playful look. I attempted to collaborate with marketing in the creation of a redesign, as well as the design system, but with little success. I’m happy to know that I tried.

Supporting the many different brands with theming

Actimo is a whitelabel solution. Working with colors and design in general undeniably meant working with the employee app’s “Theming” options.

Customers can customize the design of their employee app, down to the type of font family. Yep. Designing for the app part of Actimo meant potentially designing for any design combination you could think of.

One of the mockups of a potential new way of doing theming with limited options that gave customers freedom, but in a controlled way

While we would have a Design System in a sort of standard theme with Actimo’s colors and overall look, when designing for the employee apps we needed to be able to support other combinations. At the same time, when creating the theming part of the Design System, I needed to think about ways that we could be limiting these options, to make our lives easier.

But it was important that we would be able to design for a worst case scenario, for example a customer using Comic Sans as their employee app font and yellow as their primary color. The other designer on our team found a Figma plugin, where we would be able to create and switch themes inside our files, to test the interface in different designs.

The Design System supported a light as well as dark theme, with color schemes generated out from the primary brand colors of customers
Contrast checking generated colors

The other designer on the team had the idea to generate all colors in the employee app using the customer’s brand colors. While at first I thought this was a crazy idea, eventually it sold me over. We just needed to make sure that we took control over what was generated and how.

Since the primary color would be a color from the company’s brand, and that color would potentially decide all the colors in the interface, I wanted to make sure the theme would select colors with proper contrast ratios, solved through code. I’d done something similar before while working at Learningbank.

The idea was if a “base” primary color failed a contrast check, the theme would pick a slightly darker color (light theme) or lighter (dark theme) variant untill it didn’t fail the check. Similarly, if a primary color on a button was light, the theme would chose a dark font color, and vice versa.

Taking inventory and creating components

In order to be get an overview of all the components I would need to create in the new Design System, apart from the common ones such as inputs, buttons and modals, I went through the system and noted down any and all components that should be recreated for future use.

In taking inventory, I also got an idea of just how many different versions there were of existing components. In the administration, for example, there were four different ways we displayed information in a table, also with different ways to show thumbnails and settings. Seeing all the different ways a component is used is also important, so you know how much the component needs to be able to support in terms of data and edge cases.

Taking inventory also helps you understand all the different ways a component is used

With the foundations in place, a new file structure in Figma, and an inventory of components I could begin building the components. And at the time Figma had just released their new feature Variants which was perfect timing. Compared to today, some of these screenshots may even be outdated, since they were from 2020 and Figma has made many updates since then.

Apart from having the styles and components that you could use as building blocks in new design files, I also wanted to include details and use cases on more advanced components, for example the Sheets used in the app. We had different Sheets; an “Action” sheet with options, “Dismissible” sheet for descriptions and “Sticky” sheets that were used in the training part of the employee app.

A Design System is not only a library of components – it’s should cover the entire experience with the product; gestures, design patterns, tone of voice and most importantly – the governing principles. I felt it was important that we also zoomed out and asked ourselves – who is the company? What are our values? How does that affect the experience with the product?

Zooming way out: the governing values of a Design System

A Design System is not only a library of components, or at least, it doesn’t have to be. It can cover the entire experience with the product; gestures and animations, design patterns, tone of voice and most importantly: the governing principles. I had experienced first-hand how much different design styles could affect a design. How about different values and beliefs?

Because of this, I felt it was important that we also zoomed out and asked ourselves what are our design values? What are the company values? And how do they affect the experience with the product, or how we design the product?

At this time I had discovered the rising “Humane Tech movement” and it felt like I had finally found the words for the feelings I’d been having up until them, doing design. My ethical questionmarks, especially back when people were worshipping Persuasive Design and how we could trick people to click more.

There is a very helpful website called Humane By Design with a few governing principles and lists on how to keep a design and product human-friendly. And so, I tried influencing design at Actimo to be inspired by such principles, and even found ways in which we were already following some of them.

I didn’t succeed, however, and you could also argue that as a “simple” Product Designer, it wasn’t my job to do so. But it made me realise that this is the way I want to work with design; the bigger picture, and doing design I could personally vouch for, that was made with people’s best interests. And that discovery is worth more than all the prestigious employments in the world.

“We want technology to enhance our sense of agency without dictating the rhythm of our lives.”

Jesse Weaver, It’s Time for Digital Products to Start Empowering Us
In ,