Intro

Knight Frank, a leading global real estate consultancy, had a pressing issue: its brand experience was fundamentally fragmented. Different teams, offices, and even countries were using ad-hoc visuals, leading to a lack of a unified design language and broken global identity.

Recognizing this challenge, I took the initiative to develop a comprehensive, solid, and expandable design system that would serve the global business effectively.

Challenges & Objectives

The main issue was the absence of a unified design language across various platforms and regions, which contributed to a disjointed and inconsistent brand experience:

• Lack of Unified Design Language: Different departments and geographies were using various styles and components, creating visual chaos.

• Broken Global Identity: The absence of a cohesive design approach affected the brand’s global identity, making it appear inconsistent and unreliable.

Objectives

• Create a unified, globally recognized design language

• Develop a design system that is solid, expandable, and easily accessible

• Improve the speed of development cycles by providing a go-to UI element repository

• Enhance user experience through design consistency

Solution & Impact

The introduction of the new design system had an immediate and transformative impact:

• UI Consistency: Achieved a unified look and feel across platforms and regions.

• Ease of Development: Streamlined the development process, enabling faster iterations using Storybook.

• User Experience: Significant improvements in usability and user satisfaction were noted, bolstering Knight Frank's reputation as an industry leader.

Building a comprehensive React design system was a crucial step in unifying Knight Frank's fragmented brand experience. The new design system not only elevated the brand’s identity but also had practical benefits, such as simplifying the development process and enhancing user satisfaction.