Keys Design System
Task
Building a new Design System from scratch in Figma, to create a scalable, consistent and accessible digital experience.
Since joining Nest as a Product Designer, I have led the development of Keys, our property rental design system built in Figma. This comprehensive system is currently used across multiple digital products within our property management ecosystem, including tenant-facing rental portals, landlord dashboards, and internal property management tools.
The process of building Keys followed a structured double-diamond approach. I began by identifying the core challenges through extensive research into existing design patterns and conducting interviews with product teams across the organization. After gaining a thorough understanding of our needs, I developed an execution plan that outlined the system’s structure and component delivery timeline. As foundational elements, base components, and composite patterns were released incrementally, the team actively gathered feedback and questions to enable continuous iteration and refinement of the system.
Beginning with the discovery stage, my objective was to uncover the precise problems that users of Keys would face, as well as their needs and pain points when working without a cohesive design system.
To accomplish this, I conducted interviews with design and development teams responsible for various property management products, gathering valuable insights from both designers and front-end developers.
Through thorough research of existing practices and workflows, I gained a better understanding of the challenges the team was experiencing:
How listings, data and Customer Relationships were managed.
No established brand guidelines.
Designers can now effortlessly and intuitively configure components within Figma.
For instance, when working with a property card component, designers can readily access desired variations through the variant panel. With Figma’s component properties, designers can conveniently configure all variations—from available to booked states, different property types, and pricing displays—from a centralized location.
Thanks to a meticulously established auto-layout system, all components within the design system are now seamlessly scalable across various viewports. From mobile (375px) to tablet (768px), desktop (1024px), and even ultra-wide screens (1440+px), designers can effortlessly utilize the components to create UIs of any desired screen size.
In order to establish a scalable and consistent visual system for the CMS development, as well as manage visual design attributes in a systematic manner, I developed a design token structure for Nest Keys.
