The EQS Compliance Cockpit is Europe’s leading platform for effective compliance programs, enabling companies to stay ahead of their regulatory requirements. By integrating various product lines into a cohesive cockpit, EQS revolutionizes the procurement process. For 2024, EQS aims to consolidate different product lines into a single, user-centric compliance cockpit with a simplified user journey. This initiative not only focuses on aesthetics but also strategically enhances user experience, boosts developer efficiency, and ensures consistency across all touchpoints. By implementing this streamlined design system, teams can maintain their deliverables while reducing production time.
Since 2023, EQS has undergone significant changes in its business operations. Before my arrival, the company had acquired several other businesses, each with its own brand, style sheets, component libraries, and a host of duplicated assets. This fragmentation was a challenge. Our goal for Q2 2024 was to unify all product lines into a single SaaS offering: the new and improved EQS Compliance Cockpit. To achieve this, we had to address and drastically reduce technical and design debt. The solution was a global design system that provided a common source for all teams, facilitating a seamless refresh and enabling the development of new features that are fresh, accessible, and aligned with EQS's new direction. This transformation was made possible by our innovative design system.
In just two design sprints followed by two development sprints, we built a robust and streamlined design system. This new system enabled us to comprehensively revamp the entire EQS Compliance Cockpit, ensuring a more cohesive, efficient, and visually appealing user experience.
The initiative to revamp the Brezel Design System at EQS was driven by several critical challenges that needed urgent attention to align our digital presence with our pioneering vision.
The redesign of the Brezel Design System was a comprehensive effort, structured to ensure meticulous attention to detail and seamless execution across multiple phases.
The journey began with a comprehensive evaluation of the existing design system to pinpoint shortcomings and areas ripe for enhancement. This in-depth audit extended beyond mere visual elements, delving into workflow processes and overall system efficiency. A critical part of this phase was a meticulous review of all web apps from EQS Group to compile all possible use cases. This ensured that the components we planned to build would be versatile enough to cater to a wide array of needs, enhancing the user experience across our product range.
For example:
A significant aspect of this phase involved studying renowned design systems such as Carbon by IBM, Adobe's design system, Uber, and Atlassian. This research provided invaluable insights into best practices and innovative approaches in design system development.
With a solid foundation in place, the focus shifted to the creation of atoms. These basic UI components, including buttons, alerts, and search bars, were designed to be both reusable and customizable, falling in line with the foundational styles. The design of these atoms followed the principles set out in the previous phase, ensuring that they could be easily integrated across different parts of our applications while maintaining consistency and usability.
For example:
The next step involved the assembly of molecules—more complex components created by combining atoms logically and functionally. Examples include buttons and intricate forms, designed for flexibility to fit into EQS's diverse product ecosystem. These molecules were engineered to be adaptable, and capable of serving multiple functions and scenarios within our apps, thereby streamlining the design process and reinforcing the uniformity of our user interface design across platforms.
For Example
Recognizing the critical role of documentation, together with two fronted developers, we compiled comprehensive guidelines covering the usage, customization, and combination of design elements, nested inside of a custom build component library page and a Component Library Figma file. This documentation serves as a manual for both design and development teams, facilitating better understanding and consistency. Additionally, I established new workflow processes, including design reviews and QA checks, to enhance collaboration between designers and developers and ensure the integrity of the implemented design system.
For example:
With our innovative Brezel Design system, we've slashed the size of our style sheets by a remarkable 90% and cut the number of components by 75%. This overhaul eliminated redundant and unnecessary elements, significantly boosting our products' performance and speeding up production time. Previously, over half of our components were custom-made, but now, we've streamlined and optimized our design process like never before.
Due to our Atomic Design approach and the creation of design variables, this allows us to provide a little extra something that was out of the scope. The first EQS dark theme. By a simple remapping of variables we could smoothly create an additional theme, for our new design system that didn't require additional development effort and could easily be pushed to production. This feature brought 6% more close deals, a massive positive feedback from our users, that were seeing the new EQS's look and feel and overall user experience, much more friendly and modern.