Revamping the design system at Azibo
Azibo, a property management platform, had a design system in place for over two years. As the product grew, the system needed to evolve — for consistency across surfaces, faster design–dev handoff, and a library teams could trust at scale.
The existing system was a solid foundation, but increasing product complexity exposed gaps: detached components, inconsistent patterns, and friction when designers and developers searched for the right assets. I partnered with product design, product management, and front-end engineering to align on a vision built around flexible, scalable components.
Drawing on input from the design team and audits of live product screens, we defined a phased rollout — rapid design exploration followed by iterative implementation across the platform.
Ensure a unified look and feel across landlord, renter, and internal tools — reducing one-off UI and detached components.
Allow quicker adaptation to new flows and user needs with variants, tokens, and patterns that scale with the product.
Streamline design and development so teams spend less time rebuilding UI and more time on experience quality.
“How did you do that so fast?”— Lead of Product Management, watching designers adjust flows with system components in Figma
Built a library of reusable elements — buttons, forms, modals, navigation, and status treatments — each flexible enough for multiple product contexts.
Documented interaction patterns: drawers, navigation models, lockout flows, and repeatable paths from point A to point B across the platform.
01 — Output
Ensured that designers and developers can quickly find and use the right assets without friction — from tokenized color pills and status labels to annotated component specs in Dev Mode.
02 — Output
Established a well-structured component library with reusable UI elements — buttons, inputs, modals, and account flows — so product screens share the same visual language and behavior.
03 — Output
Created a design-to-development handoff process with Figma Dev Mode, written specs, and walkthrough videos — so engineers and PMs could ship with confidence.
Audited the existing library and live product UI. Mapped inconsistencies, redundant variants, and components that lacked scalability.
Prototyped updated components and patterns. Gathered feedback from designers, PMs, and engineers through internal reviews and usability sessions.
Shipped detailed usage guidelines, Dev Mode specs, and video walkthroughs. Partnered with engineering on token migration and component adoption.
Detached component instances dropped to nearly zero. Landlord, renter, and growth surfaces now share a cohesive visual system.
20%
Faster assembly of new flows let the team focus on UX strategy instead of rebuilding UI from scratch.
Global token and variant updates roll out across hundreds of frames in source-of-truth files — a change that once took days now takes hours.