Overview

When I was hired on in July 2021, Comply (then RIA in a Box) was on their second iteration of a style guide. At first working solo and then with two other UX designers, I developed the style guide over 4.5 years into a design system with component templates and early page templates.

The visual language underwent many changes as branding continued to shift over the years. However, I accommodated such challenges and maintained overall consistency along the way. We’ll focus on the final design system here, but know that a similar process was applied at each iterative stage.

The Challenge and Objective

After a major merger and acquisition between RIA in a Box and Complysci in 2022, it was clear that the new company’s branding was going to shift. Suddenly, there were two main platforms with completely different visual languages. There were also three other smaller products whose companies were acquired during this time. Ultimately, Comply’s clients were now exposed to any combination of five different platforms each with their own styles and functionality.

Some had used a specific platform for years and were now expected to interact with a completely different offering within the same environment. How could we design under a constantly shifting brand identity? How do we create an interface that’s more intuitive for customers when there is no clear visual language to pull from?

The Design Process

Discover

Much of our discovery came from client feedback about specific components and processes. Whenever we made product enhancements, we also worked in some visual updates as time allowed.

The main reason for changing company branding was to align what were previously multiple products under one shared identity. This single identity was meant to unify the client’s experience and clear any confusion with the ownership behind the products they were familiar with. Furthermore, this new launch would show Comply’s strength in the market, instill trust in the future of the new company, and create a cohesive experience for all clients within the ecosystem.

Before designing, we conducted an extensive service safari of all of the major platforms and their major components. As an example, we took screenshots of all of the tables from each platform and arranged them side by side in figma. This high level view allowed us to analyze the table component across all platforms at once and made it easier to see similarities between them.

For the tables, I saw that they all needed to have an action bar, CTAs, and search bars in roughly the same place. The new table design was quickly adopted as each platform heavily relied on tables to organize complex data sets.

Define

When previously refining the second version of the style, my main issue was bringing the colors used up to compliance with standard best practices. On the next iteration, our focus was to expand on the style guide and make it a foundational design system using Kendo’s Material Design UI kit to create our components. For this third and final iteration, our main goal was integrating the functionality of many different platforms into one.

To guide us along the way, we agreed in a few design principles and continued building off of Kendo’s material design system UI kit in order to save time. The kit helped all three of us designers stay in alignment as we largely worked separately due to the massive size of the product. Reviewing Pendo analytics data, we knew that over 60% of our clients used android devices and Windows PCs in their day to day so we used a Material design based UI kit to help create a more intuitive product.

Defining scope was critically important here and it needed to be communicated to other departments as well. Shifting over to a new design system was going to take time. Although we wanted to change certain components globally, that was impossible with the way the websites had been built.

Almost everything had been done ad hoc over the years, so our main goal was to build the design system as a library of truth, communicate these new tokens to developers, but ultimately we would only make visual design updates as we worked on critical feature updates gradually. At this time, Comply had a large tech dept and there was a never ending backlog of important improvements to make to the platform.

Develop

These updates were never one off changes. I made sure to communicate with our development team that we were building a new and more stable design language. Each new component was meant to replace its older version until we eventually could make sweeping changes across the platform.

hj

hy

j

Deliver

These updates were never one off changes. I made sure to communicate with our development team that we were building a new and more stable design language. Each new component was meant to replace its older version until we eventually could make sweeping changes across the platform.

hj

hy

j

Reflection

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Don’t worry about sounding professional. Sound like you. There are over 1.5 billion websites out there, but your story is what’s going to separate this one from the rest. If you read the words back and don’t hear your own voice in your head, that’s a good sign you still have more work to do.

Be clear, be confident and don’t overthink it. The beauty of your story is that it’s going to continue to evolve and your site can evolve with it. Your goal should be to make it feel right for right now. Later will take care of itself. It always does.