Back to Portfolio
Case Study | CLIENT: XiPhi.ai

Scalable Design System for AI-First Events Platform

Established unified design language for Eventz.ai app by building scalable and robust design system.

Design SystemDocumentationDesign-to-Dev
RoleProduct Designer
Duration5 Months (Jun 2025 - Oct 2025)
ToolsFigma, Claude Code
TeamMe (Product Designer), 1 Design Manager, 1 Software Engineer

Overview

As Eventz.ai app scaled, the product team faced design inconsistencies, repetitive workflows, and technical debt. There was no single source of truth for design or engineering, making it hard to deliver cohesive experiences.

To establish a unified design language, I single-handedly spearheaded the end-to-end development of a scalable design system for the AI interface that would accelerate workflows and ensure a cohesive, and accessible user experience.

Design System Process
Design System Process

My Contribution

Competitive Audit, Design Principles, Component and Pattern Libraries, Documentation, Mentoring Team Members

The Outcome

  • Achieved a 3X increase in design efficiency.
  • 60% faster in design-to-tech handoff cycle time.
  • Saved 10 hours per week for the design team.
  • Built a scalable system bridging AI + traditional UX.

Design Process

1. Competitive Audit

I conducted a detailed competitive audit of leading design systems like Google's Material UI 3, Microsoft's Fluent, Uber's Base, and IBM's Carbon. I closely studied the documentation and application of each. I ultimately decided to build our system on top of Google's Material UI 3 for its approachable and accessible foundation.

Design System Competitive Audit
Design System Competitive Audit

2. Design System Foundation

Based on the audit insights and multiple stakeholder POVs and feedback, we established 6 core design principles for Eventz.ai design system.
Consistency, Scalability, Accessibility, Minimalistic, Functional, Efficient

Color System
Color System
Color Design Tokens
Color Design Tokens
Typography Design Tokens
Typography Design Tokens

3. Components Design

Designing custom AI components to seamlessly integrate component usage across traditional UX and AI conversation interface.

Custom Component Design
Custom Component Design
Custom Component Design
Custom Component Design
AI Custom Components
AI Custom Components

4. Empowering and Educating the Team

Empowering the Team: Being the most technically proficient member in the design group, I, through peer-learning approach guided design team, through the entire process from complex component creation in Figma to its final publication in our design system library.

This ensured the team could independently contribute, maintain, and scale our component library, fostering a more collaborative and efficient workflow.

Impact & Learnings

The design system successfully shifted designers and developers behavior from manual tracking of changes to automated publishing of components, resulting in a significantly more efficient and collaborative workflow.

3Xincrease in design efficiency.
60%faster design-to-tech handoff cycle time.
10%saved per week for the design team.

My Learnings: Designing scalable design systems for AI-native products, Peer mentoring, Handoff for the engineering team.