I initiated and crafted GRESB's first-ever design system. This involved collaborating with business stakeholders, data science, and developers.

In developing the new design system, I created the Figma library by identifying patterns, while the team simultaneously front-end components and used them to construct new reports.

Driving Factors for Creating the Design System

1. Consistency: A single design system would essentially guarantee design harmony throughout all reports, as it would be difficult to replicate identical features with even the smallest variations repeatedly.
2. Efficiency: A structured design system would eliminate the need to reinvent the wheel, consequently reducing the Time to Market (TTM) for new reports.
3. Quality Control: A standardised approach would naturally reduce the bug rate, as consistent design components would have predictable behaviours.
4. User Experience: A cohesive design system translates to an intuitive user experience, which could significantly improve the Net Promoter Score (NPS) by enhancing user satisfaction.

Let's dive into the real impact of the new design system at GRESB. These numbers and metrics show how our changes made a significant difference in our development process and user experience.

Discovery and Analysis

• Component Inventory in Figma: To begin, I conducted an inventory of all the components used in past reports. I first cataloged each component trying to keep them organized in groups. This step ensured that we had a visual understanding of every individual element we had used in the past.
• Adoption of the Atomic Design Concept: While inventorying, I adopted the Atomic design concept. This allowed for a structured and hierarchical categorization, starting from the smallest components (atoms) to templates.
• Problem Identification: It became evident that there were challenges from inconsistencies in design components. This inconsistency was not just affecting the aesthetics, but also the productivity of the design and development team.

Organization and Standardization

After mapping out all the pieces, I saw we needed to make everything look more unified. The first big task was to find ways to link all these design pieces together.

Optimizing Colors
The first step was tackling our color scheme. We had to maintain two separate color sets to distinguish between different types of products. This was challenging but necessary for clarity. So, we established 'base' colors that were consistent across all designs and 'theme' colors that varied depending on the specific product line. This approach kept our designs distinct yet harmonious.

Standardizing Typography
I then addressed the typography, ensuring we had consistent text sizes and selecting an easy-to-read font. These changes were aimed at creating a uniform appearance and improving readability.

Guidelines for Tokens
Rules for spacing, border, sizes and other design elements were also set. Proper definitions is crucial for clear, uncluttered visuals. This part of the process was about making our designs look good and work well.

Incorporating Accessibility
It was important to factor in accessibility during this stage, ensuring our designs were usable by everyone, including people with disabilities. To do that I looked specially on color contrasts and text sizing, making sure we had a inclusive design.

Implementation and Integration

Standardizing Components:
Once we had the foundations ready, I began refining our components. This wasn't just about aligning with our new standards; it also involved merging similar components and simplifying others to eliminate any redundancy. This optimization ensured each component was purposeful, unique, and contributed to a more efficient design system.

Classifying Components:
Finally, I sorted our components based on their purpose, such as forms and graphs. This categorization process was essential to understand the frequency of use and the standardization of components. It helped create a comprehensive library that was intuitive and free from redundancies, facilitating a smoother design process.

Integrating Bootstrap:
Bootstrap was chosen for its adaptability and familiarity. Customization were made to align it with our new design system.

Teaming Up with Developers:
With the design guide ready, I collaborated with developers, assisting them in translating designs into functional elements and build the documentation around the usage.

This project was more than just the creation of a design system; it was a journey that sharpened my skills, expanded my perspective, and taught me the value of continuous learning and adaptation in the field of design.

Balancing Flexibility and Consistency
It was vital to learn how to strike a balance between the demands of consistency and flexibility. The ability to adjust to various product categories with distinct theme colors taught me the skill of adaptable design inside a structured framework, even if maintaining a consistent appearance and feel was still crucial.

Adherence Challenges
The design system adoption was very successful in terms of report construction and new product development. However, although we achieved full adoption of the Figma library for components and tokens in the design aspect, the development side faced challenges with older systems. Due to being built on older solutions, the developers were reluctant to adopt the new library in these cases. Nonetheless, we are still implementing the design system in these older systems, but they lack the simplicity in reusing components.

Value of Simplification
Simplifying components and removing redundancies was a significant learning curve. It taught me that less is often more in design. This approach not only made our design system more efficient but also easier for other team members to understand and use.

Documentation and Knowledge Sharing
Though I documented the design process, more detailed documentation, particularly around the rationale behind certain decisions, would be beneficial. It could serve as a valuable resource for new team members and help in maintaining consistency in the long term.