Reflecting

Over the last couple years at SmartRent, I spearheaded a significant design system transformation.

3 Min Read • May 9, 2025 

I’ve significantly evolved and refined our Design System, SmartKit, at SmartRent. I enhanced user experiences and fostered team growth through knowledge sharing, all while boosting the consistency and speed of product development. My work reflects a commitment to exceeding objectives and pushing design and usability boundaries.

Elevating the Design System

A primary focus has been the continuous improvement and maintenance of the design system. This involved a wide array of tasks, from optimizing Figma files and refining documentation to refactoring existing components in Figma. A key achievement was leading a comprehensive rebrand of the design system, which included defining a new color palette and implementing it in Figma using variables. This strategic move significantly reduced the design system’s footprint by 75% by cutting down on light and dark mode variants and multi-branding for each component. The introduction of color variables also streamlined the process of switching between light and dark modes in Figma, ensuring alignment with JS code and effortless transitions.

Light and Dark Mode

The design system website, SmartKit.dev, has also seen considerable enhancements, with new UX writing and accessibility content, alongside improved filters for tokens, colors, and icons, making it easier for users to navigate and find what they need. The component library was substantially upgraded with 23 existing components updated and 22 new features introduced in one year alone. Nearly half of the existing components in Figma were refactored, improving organization and structure while ensuring consistency with JS code. Major strides were also made in aligning Figma styles and JS code, particularly in typography, shadows, colors, and spacing. 

Figma Color Variables and Tokens

Spearheading Innovative Design Projects

Beyond system maintenance, there was active contribution to the system’s growth through the creation of new components, styles, and icons. A notable project was the design of the new Data Grid (Table 2.0) component and its companion Modular Filter component, set to launch later in 2025. This Data Grid is designed to empower both designers with extensive layout control in Figma and users with dynamic features like customizable columns and display densities. It will also render on smaller screens using cards for a seamless experience across devices. 

Another significant undertaking was the redesign of the entire icon library, revamping over 400 existing icons and introducing bold counterparts for each, resulting in a collection of over 800 icons. These new icons utilize grid and keyline templates for greater consistency and will feature alias names for easier searching in Figma and on the SmartKit website. In a previous year, 52 new icons and 137 new color tokens were added to the Mid Range colors palette. A suite of 18 device and sensor cards was also successfully launched after transitioning from beta. 

Fostering Collaboration and Knowledge Sharing

A strong emphasis was placed on knowledge sharing and team development. This was achieved by leading Figma and design system workshops on topics such as “Advanced Component Building,” “Color and Spacing Variables,” and “Icon Design.” These workshops empowered designers, improved their skills, and fostered a collaborative environment. Peer reviews were another key activity, providing constructive feedback and guidance to fellow designers, helping to identify and reassess component errors, detachments, and poor Figma file hygiene.

Driving Efficiency and Transparency

Efforts were made to boost team efficiency and transparency by assisting with the transition to Jira and making the Kanban board available to the entire Product team. This improved team coordination, morale, and the tracking of large projects. Incorporating design system requests into Kanban tickets streamlined management and execution, saving time and elevating work quality. Initiating a preliminary survey on the design system and its processes helped establish a baseline understanding and identify areas for future improvement.

Summary

My time at SmartRent as Lead User Interface Designer has been characterized by a relentless drive for innovation, a commitment to quality, and a passion for empowering the design team. The accomplishments achieved underscore a dedication to advancing the company’s design capabilities and delivering exceptional user experiences.

Contact Me

I would love to connect with you!