CBRE Design System

In my role as UX Lead, I spearheaded the creation of the CBRE Emerald Design System, a comprehensive toolkit empowering designers to efficiently build new applications. This case study delves into the project's objectives, the design process, and the impact of the Emerald Design System.

View the Design System

Challenge

Prior to the design system, CBRE designers relied on a scattered collection of UI components, leading to inconsistencies and inefficiencies in the user experience across various applications. The development process was also slowed down by the need to recreate common elements for each new project.

Solution

The Emerald Design System project aimed to:

• Establish Consistency: Create a unified visual language for all CBRE applications, ensuring a seamless user experience.
• Enhance Efficiency: Equip designers with a library of reusable UI components, streamlining the design and development process.
• Improve Scalability: Facilitate the rapid creation of new applications by providing a foundation of pre-built elements.

Design Process:

• Research and Analysis: The initial phase involved in-depth research to understand user needs and identify pain points within the existing design landscape. We conducted user interviews and analyzed existing applications to pinpoint areas for improvement.
• Component Library Development: Based on the research findings, we embarked on creating a comprehensive library of UI components. This library encompassed essential elements like buttons, forms, navigation bars, and more.
• Style Guide Creation: We established a meticulous style guide outlining the usage guidelines for each component within the design system. This included specifications for typography, color palettes, and spacing.
• Collaboration and Iteration: Throughout the process, we fostered close collaboration with front-end developers to ensure technical feasibility and seamless integration of the design system into the development workflow. We conducted iterative testing and incorporated feedback to refine the system.

Impact

The CBRE Emerald Design System has had a significant impact on the organization:

• Increased Design Efficiency: Designers can now leverage pre-built components, significantly reducing design time and effort.
• Enhanced User Experience: The design system ensures a consistent and intuitive user experience across all CBRE applications.
• Improved Development Speed: Front-end developers can readily integrate pre-built components, accelerating the development process.
• Scalability and Maintainability: The design system facilitates the rapid creation of new applications while ensuring a consistent user experience.

Conclusion

The CBRE Emerald Design System serves as a successful example of how a well-designed and implemented design system can revolutionize the design and development process within an organization. It empowers designers, streamlines workflows, and fosters a consistent and positive user experience across all CBRE applications.