Instapro, a leading home services platform, is rapidly expanding its reach across multiple brands and countries. This growth, while exciting, presented a challenge: maintaining a consistent and high-quality user experience across diverse products. Recognizing the need for a unified approach, I spearheaded the development and implementation of a comprehensive design system to streamline design and development, improve user satisfaction, and position Instapro for continued success.
Jun 2022 — Jul 2024
Instapro, MyBuilder, MyHammer, Werkspot, Travaux
Product Designer · Design System Lead
Figma · Figma plugin development
Design Systems · Atomic Design · Usability Testing · Stakeholder Interviews · Adoption Measurement
TypeScript (Figma plugin API) · Design tokens
Upon joining the Instapro team, I quickly identified that the existing design system, while in place for two years, suffered from several issues that hindered its effectiveness.
These challenges were creating fragmented user experiences and slowing down the development process. This was especially problematic given Instapro's rapid expansion and the need for agility and scalability.
As the Lead Designer of the Design System, I worked closely with UX designers, developers, and product managers to revamp and implement a cohesive system. My contributions included:
We conducted in-depth interviews with designers, developers, and product managers to identify pain points and prioritize improvements. This alignment ensured buy-in from key stakeholders, laying the foundation for successful implementation.
Our approach focused on addressing the core challenges through the following key initiatives:
One of the first things that I did after joining the team was stakeholder interviews. I started talking with most of the UX designers, UX researchers, content designers, UX managers, some of the product managers and developers. It helped me to have a better understanding about their knowledge and expectation from the design system.
As a product designer working in the design system team, it is very important to have a holistic view of the product to understand the scope of the work, the common patterns, and the potential opportunities to be addressed. With the collaboration of the product manager of the team and the UX design guild, I could gather screenshots of most of the pages and categorize them by flow.
Usability testing is a common approach among the product designer to test the product. I brought this approach to the design system team to test the usability of our components and spot the hidden flaws in the library.
As I explained earlier, we had no way to measure the adoption of the design system in different teams. I led this topic and shared it with different stakeholder to set some adoption metrics such as Figma statistics (by upgrading the Figma subscription to the organization plan), number of feature request, number of contributions, NPS score from the users (product designers).
We had a regular UX design guild weekly meetings and I took some of this time every week to present the new enhancements that we made in the design system team and the ways to use them. In this way we ensured that the designers get the updates even they don't read the channels or the release notes. Also it increased their adoption, engagement, and contribution to the design system.
With a rebrand on the horizon, we needed it to land smoothly. I emphasized token structure as one of the most fundamental building blocks of the design system, presented the benefits of a centralized multi-layered token structure to different stakeholders, and started shifting to that structure over time.
Designers were typing FontAwesome class names into text layers because we hadn't packaged 1,500+ icons as Figma components — manual creation was a non-starter. Looking up the font name every time, pasting it as a glyph, no size or style variants, no semantic component to swap on rebrand. The right fix wasn't "ask the design-system team to create 1,500 components by hand" — it was code.
I wrote a Figma plugin that pulled the FontAwesome catalogue and auto-generated every icon as a Figma component, with size and style variants per icon. One afternoon of plugin code replaced what would have been months of manual work. The plugin is the proof that I solve design-team problems with code when code is the right tool.
Why this matters for the rebrand: the work that's hardest to fake on a portfolio is the moment a designer reaches for code instead of asking for it. The icon plugin is one of those moments.
To bring consistency to the design system documentation, I led the discussion to create a structured template that gave everyone the opportunity to contribute. We observed a marked increase in contributions to the documentation after introducing it.
The company launched a new podcast initiative, which was a good opportunity to raise awareness across the organization. I joined one of the episodes to explain the design system — you can find it on Instapro Show on Spotify.
If I were building Instapro's design system today, here's where I'd lean on AI:
