Establishing a unified design language with robust, cohesive and scalable Eventz.ai Design System

My Role: Sr. Product Designer, XiPhi.ai

Team: Me (Design Systems Lead), 1 Sr. Designer, 1 Design Manager, 1 Data Expert, 1 Software Engineer, 1 ML Engineer

Timeline: Jun - Aug 2025

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

Project Overview

CHAPTER 0: 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. Process involved,

Competitive Audit & Base System: 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.

CHAPTER 1: COMPETITIVE AUDITS

Core principles for designing Eventz.ai Design System: Consistency, Scalability, Accessibility, Minimalistic, Functional, Efficient

I designed and documented core components, including color palettes, typography, and design tokens, ensuring every design decision had a single source of truth. I specifically designed AI interface components from scratch to work seamlessly with the broader Material Design system.

CHAPTER 2: DESIGN SYSTEM FOUNDATIONS

Color system for futuristic, minimalistic, accessible look & feel, with Light/Dark modes

(Click on image to enlarge)

Typography design tokens for responsive web

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

CHAPTER 3: COMPONENT DESIGN

This served as a solid foundation for in-depth idea discussions, critique, and analysis of effective & ineffective elements.

Advantages of AI-prototyping

Using FigmaMake to efficiently translate ideas into designs.
Note: Relying solely on AI did not yield optimal outcomes; providing precise instructions aligned with my design principles and aesthetics was the key.

Decide Custom Comp 1.png
Decide Custom Comp 2.png
Decide Custom Comp 3.png

Color scheme iterations (Click on image to enlarge)

Chat mode interface iterations (Click on image to enlarge)

Talk mode interface iterations (Click on image to enlarge)

Final Designs

AI Talking

User Talking

Implemented Google's PAIR (People + AI Research) guidelines for effective conversation design. Our AI Conversation should be functional, transparent, trusting, context-aware, adaptive and handle errors gracefully.

CHAPTER 4: CONVERSATIONAL DESIGN

Pre-event conversational flow for Recommendation

Click on image to enlarge

CHAPTER 5: ENGG. HANDOFF & USABILITY TESTING

Engineering Handoff

Progressive handoff for design and development to work simultaneously.

  1. Figma Dev Mode for annotations and interaction

  2. Informing Design Updates

  3. Functional Testing & Accessibility Testing for interfaces in production.

A/B Testing Process: Group A (Control) will receive a generic, non-personalized list of popular sessions and speakers. Group B (Test) interacts with the conversational AI to generate personalized recommendations based on their stated interests (e.g., job title, industry, topics they select).
Track the number of sessions, speakers, and contacts each user adds to their personal agenda for pre-event stage.

To know more on this connect at zealsheth13@gmail.com

CHAPTER 6: IMPACT & REFLECTION

Impact

  1. Achieved a 3X increase in the speed of ideation and prototyping by integrating AI-powered workflows.

  2. Reduced the AI conversation length by 50%, ensuring users receive their first recommendation with minimal friction.

  3. Streamlined the user journey, requiring users to answer only 3-4 questions on average before receiving personalized recommendations.

  4. Ensured the application fully adheres to WCAG 2.0 accessibility standards, creating a more inclusive user experience.

My Learnings

  1. Designing multimodal, responsible, context-aware and adaptive AI interface.

  2. Designing humans and probabilistic AI to work together.

  3. End-to-end product design strategy.

Eventz.ai Design System >>