Case Study: Modernizing Airkit’s design system and Figma operations to accelerate our product design process and reduce engineering overhead.

Summary

<aside> 👉

The following is the tl:dr, continue below for full case study.

</aside>

Context

Airkit is a low-code app builder that allows customer service teams to build forms, apps, and chat bots to better serve their users. When I joined, Airkit’s design system was outdated, inconsistent with production code, and lacked formal ownership, governance, or documentation.

Role

As head of design, I took responsibility for the neglected design system, with a clear goal: make the system usable again for both designers and engineering. My contributions included:

• Full design system audit, supported by design and engineering, covering Figma libraries, Storybook, and design files
• Rebuilt 1,000s of components using Figma best practices
• Led cross-functional efforts to improve dev/design parity, updated process, and QA
• Consolidated key product designs into a centralized source of truth (Master Files) and implemented branching system for better versioning and quicker project kickoffs

Original overly complex pill component

Key Issues

While auditing our design system, product files, and Figma operations I identified these problems:

• No design system ownership or trackable update process
• Components were overly complex, hard to use, and used outdated production methods
• The live product never reflected the designs in Figma due to lack of parity
• Engineers lacked conviction in design handoff due to poor system management, which led to UI corner cutting