Farfetch (Curiosity)

From messy documents to easy clicks: toggle on, off, choose — and boom! Standardized Curiosity UI components are ready to use.

Role

Product Intern

Tools

Figma

Date

May. 2022

Status

Launched

Background

Farfetch's B2B product line Curiosity comprises multiple sub-products, including the Curio Eye social media data dashboard, Curio Datahub data management platform, and Curio Eshop e-commerce management platform. To establish a standardized design framework, Farfetch Tech Innovation UED design team developed B2B design specification documents. The goal is to enhance cross-product design and development efficiency through a unified visual language and component system. However, the specification document itself revealed limitations: with numerous product lines and overly complex textual explanations, designers often had to invest significant time reading descriptions and referencing past projects during specific tasks, thereby reducing design efficiency.

Farfetch's B2B product line Curiosity

Farfetch's B2B product line Curiosity

Curiosity Product Line Design Guidelines

Curiosity Product Line Design Guidelines

Solution

We built a configurable UI Kit and usage guide for the Curiosity product line based on the existing design guidelines. Instead of browsing through lengthy design documents, designers can now simply configure component properties directly in Figma. With just a few clicks, they can generate components that are fully aligned with the existing design standards, significantly improving design efficiency when creating new scenarios or products.

We built a configurable UI Kit and usage guide for the Curiosity product line based on the existing design guidelines. Instead of browsing through lengthy design documents, designers can now simply configure component properties directly in Figma. With just a few clicks, they can generate components that are fully aligned with the existing design standards, significantly improving design efficiency when creating new scenarios or products.

  • Simple – Clear and easy to understand, without lengthy descriptions.

  • Efficient – Configurable UI Kits to reduce repetitive edits and adjustments.

  • Consistent – Fully aligned with the existing design guidelines.

  • Simple – Clear and easy to understand, without lengthy descriptions.

  • Efficient – Configurable UI Kits to reduce repetitive edits and adjustments.

  • Consistent – Fully aligned with the existing design guidelines.

UI Kit Usage Guide

UI Kit Usage Guide

Design Process

Usage Example

Easily get a text field style

Easily get a text field style

Add or remove elements? No problem, the container length automatically adapts.

Add or remove elements? No problem, the container length automatically adapts.

Retrospective

  • Designing products for designers is no different from designing any other product. Users expect an intuitive and seamless experience, and so do designers.

  • For B2B products, the primary goal in the design process is to improve efficiency and reduce operational costs, while maintaining compliance with established guidelines.


  • Designing products for designers is no different from designing any other product. Users expect an intuitive and seamless experience, and so do designers.

  • For B2B products, the primary goal in the design process is to improve efficiency and reduce operational costs, while maintaining compliance with established guidelines.


Copyright

© Design and code by Ruzhen Wang 2025

Copyright

© Design and code by Ruzhen Wang 2025

Copyright

© Design and code by Ruzhen Wang 2025

Copyright

© Design and code by Ruzhen Wang 2025