Brezel – Design System
EQS
Transforming EQS. Creating a Unified Design System from Scratch
Not long after I joined EQS, the Marketing team had just wrapped up a full rebrand — which meant we now had to bring that new brand into our client-facing product. The problem? The existing design system was outdated, overly customized, and far too messy to support the changes we needed. So, we made the call to build a new design system from scratch.
Together with another designer and two front-end engineers, we designed the new system in just over two months. Development kicked off right after and took about two weeks. For the final push, eight more engineers joined us in a focused two-week sprint to roll it out across all six product areas.
Overview of some DS elements
As a Senior Product Designer at EQS, my first major task was to lead, create, and manage the implementation of EQS's new Design System. The primary challenge was the limited timeline. Before my arrival, stakeholders had set an immovable deadline due to the high demand for features to be delivered by Q4 2024. This constraint left us with only four sprints to encompass both design and development time, including the implementation of the component library and product integration. To tackle this challenge, I conducted an audit of all live and documented components alongside another designer. Together, we refined the components and established a foundational set of styles. This library was designed to empower our design team to create more meaningful and consistent interfaces. I collaborated closely with engineers and other product designers to spearhead the deployment of this project. Our collective efforts focused not only on enhancing visual consistency across products but also on streamlining the design and development workflow, leading to a more efficient and cohesive product output.
Redesign of EQS Compliance Cockpit to unify product lines, simplify user journeys, and boost efficiency across teams. This initiative focused on enhancing UX, streamlining development, and ensuring design consistency.
Why did we need a new design system?
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.
Consistency Issues: Despite stakeholder approvals, final products often suffered from inconsistencies in spacing, grids, and typography. This lack of uniformity undermined user experience and diluted our brand identity.
Guidelines Adherence: A review of our design elements revealed failures in meeting essential guidelines, particularly in accessibility and readability, emphasizing the need for stricter adherence to design standards.
Project Overhaul: As we prepared for a complete revamp of the EQS Compliance Cockpit, it became clear that implementing the Brezel Design System was essential. This new system would ensure smooth integration across teams, foster better collaboration, and maintain design integrity throughout the extensive redesign process.
Quality Assurance & Component Redundancy: Discrepancies between design intentions and developed outputs highlighted weaknesses in our QA process. Additionally, the use of locally created, unpublished components led to unnecessary duplication and confusion, necessitating a centralized, reusable component library.
Change Log Maintenance: There was a clear necessity for a system to maintain a change log, ensuring all team members could track updates, fostering transparency, and supporting the system's evolution.
The redesign of the Brezel Design System was a comprehensive effort, structured to ensure meticulous attention to detail and seamless execution across multiple phases.
Assessment and Requirement Gathering
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:
Secondary Research
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.
Creating Atoms
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:
Creating Molecules
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:
Documentation and Process Implementation
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:
Light and Dark mode using our DS variables
Impact and Results
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.
