Part I: Design System before Figma

How to ensure consistency in design implementation in digital platform

I had the honor of contributing to the success of the ?CAM enterprise software for the legal industry. CAM was a pivotal product that played a key role in triggering Litera's acquisition of Prosperoware. Today, Prosperoware's solutions for the legal industry are under the umbrella of Litera, an ever-expanding legal tech conglomerate in England and USA, backed by Hg Capital.

Over 3.5 years, I took the lead in shaping CAM platform, which serves as the 'missing layer' for provisioning and governance, ensuring that teams collaborate more efficiently and securely. The existing platform faced technical challenges, an outdated user experience, and difficulties attracting new clients. That's when the Prosperoware board decided to make a significant change by shifting to a SaaS model. We introduced a fresh, cloud-based software platform designed for the digital era and fortified with modern data security measures. With the green light to create brand-new software, we embarked on a journey where we leveraged our knowledge of functionalities, user needs, and the market landscape.

Our main goal was crystal clear to craft an innovative, top-quality tech solution that's easy to maintain and scales effortlessly into the future.?

WHAT IS THE PROBLEM?

Design consistency through the platform

The enterprise platform, a large-scale ecosystem of several distinct applications, has been instrumental in delivering a wide range of services in the law industry. As the platform grew, we encountered a significant challenge in maintaining brand consistency and delivering a seamless user experience across all these applications. Each app was managed by different teams, resulting in variations in design, interactions, and overall user experience. This lack of cohesion not only diluted our brand identity but also led to confusion and frustration among our users. Additionally, from the development side, design implementation by several teams was chaotic and often in different stages, causing difficulties for the design team to manage all deliverables and requests from the development teams.

HOW DID WE SOLVE IT?

Build a separate style layer that will be integrated into all apps

1. GitHub submodule for a Unified Design System

The platform was structured using separate GitHub repositories, each dedicated to a specific app. To address the challenge of maintaining brand consistency and a seamless user experience across all apps, we established a distinct project/repository to manage the platform's style and layout. This Style repository was defined as a GitHub submodule and seamlessly integrated into the other apps’ repositories. Within it, we developed a comprehensive design system that revolved around the framework's functional components, customized in adherence to our brand guidelines. All style-related changes were centralized in this repository, reflecting across all the other apps' projects.

The process of UI development occurred primarily in the style repository. After implementing changes, they were published, resulting in immediate visibility across all the other apps. There was a crucial aspect that demanded attention: the development team needed to strictly adhere to the predefined structure of elements and naming conventions to successfully consume the style and layout.

Clear and well-written documentation became essential to guide the team through this process effectively.

1. A systematic approach to design and maintenance

Enterprise platforms are the backbone of large-scale operations, poised for future growth. To achieve this, a systematic approach to design implementation became the cornerstone of success.

When crafting UI concepts in Adobe Photoshop and UX in Adobe XD, we went beyond just visuals – all intricate details were meticulously crafted in code. The brainchild behind this synergy of design and code was our very own User Interface Developer, a designer with exceptional coding skills, who masterfully established our Library of UI functional components. Collaboration, understanding and trust within the design team were key components of this process.

To streamline the consumption of UI elements from front-end development, we curated comprehensive documentation, featuring code snippets and exemplary use cases with crystal-clear instructions. Embracing industry best practices, we followed the BEM naming convention for better understanding and style organization, or employed the power of CSS preprocessor - SaSS for style optimization and maintenance.

While this systematic approach echoes the creation of frontend frameworks and UI Kits, our unique challenge lay in implementing it for a sophisticated enterprise platform with a complex business model and specific user experience.

WHY IT MATTERS?

Lessons learned

1. Practical design

Effective design should be feasible, avoiding excessive time and resource consumption. Prior to the design process, designers must understand technical possibilities and business value. We practically implemented this by customizing the Cx.JS starter with a predefined UI Kit to match our brand, preserving core interactions and user experience. Usage of this Design system served as a strong foundation, saving time and effort and boosting our productivity and best practices.?

2. The role of UI developers or design system developers?

Delivering a high-quality solution demands a perceptive individual with a keen eye for detail, particularly in areas where design and development intersect seamlessly. This role can be filled by a designer with coding skills or a front-end developer with a passion for precision. To maintain the highest quality of work, it's advisable to consider having a dedicated UI developer(s).

3. Understanding the paradox of a design system

While design is often associated with creativity, in the realm of software development, it should be recognized as an integral part of the creative industry, serving human needs and addressing everyday problems. The output of any design process must be systematic and user-friendly, which, in the context of development, also implies ease of implementation. This practice ensures that the design system aligns with the practical needs of implementation, facilitating the smooth interaction between design and development teams.