Previous: UJET.cx

Next: Fintech

UJET Design System

Design system for UJET's consumer-facing products.

View Case Study

UJET Design System

Design system for UJET's consumer-facing products.

View Case Study

UJET Design System

Design system for UJET's consumer-facing products.

View Case Study

Company

UJET.cx

Industry

Customer Support / CX SaaS

Project Type

Design System

Responsibilities

UI / UX
Design Tokens
Component Library
Accessibility (WCAG 2.1)
Cross-Platform Consistency
Engineering Collaboration

Team

Emma J. - Director
Crystal P. - Designer
Patrick K. - Engineer (Web)
Jaesung K. - Engineer (iOS)
Ali M. - Engineer (Android)
Ben K. - Designer

About UJET

About UJET

UJET is a modern contact center platform that helps enterprises deliver seamless customer support experiences across web, mobile, and voice channels.

Problem

UJET’s SDKs, which powers in-app and web chat and support experiences, had accumulated seven years of design debt. The UI was outdated, inconsistent across platforms, and difficult for clients to customize. Without a cohesive design system, each new feature introduced further fragmentation.

I was tasked with leading the creation of a unified SDK design system. One that would modernize the interface, enforce accessibility standards, and expand our token system to include the SDKs.

Audience

Enterprise clients integrating UJET’s SDK into their apps, as well as their end-users seeking seamless in-app support. The design system also served internal audiences, engineering teams and future designers, by standardizing implementation and accelerating delivery.

My Role

My Role

System Foundations

At UJET, each platform had been designed independently, with unique requirements tailored to its specific needs. Although a shared design foundation existed, the SDKs hadn’t followed these guidelines for over seven years and had fallen out of alignment with the broader platform.

To create the new design system for the mobile and web support interfaces, I built on foundational elements and brand standards established by my colleagues (text styles, color treatments, spacing, and button patterns). These building blocks proved crucial in restoring consistency between the SDKs and the broader platform.

Core Components

Once the foundation was in place, my focus shifted to designing and thoroughly documenting the core SDK-specific components, such as the chat/call UI, dialogs, and quick reply buttons. Modernizing these elements established the groundwork for a scalable system.

Token System

A major aspect of this project was the expansion of the token system to support SDK theming across light, dark, and Google styles. I documented all tokens in Figma and a shared excel doc to ensure alignment between design and engineering.

The expanded token system was connected to Figma variables and styles, ensuring components were properly linked. This allowed us to quickly switch designs to any desired style or theme.

Key Improvements

Key Improvements

Consistency Across the Platform

Visual and functional discrepancies between the Web and Mobile SDKs were significantly reduced. By standardizing components, design patterns, and leveraging a flexible token system, we ensured a cohesive user experience across platforms while maintaining adaptability for each SDK.

Scalability and Efficiency

Modular UI components, newly documented motion guidelines, and responsive Figma assets enabled rapid prototyping and iteration. Using the motion guidelines I developed, animations and transitions were applied consistently, allowing faster updates and supporting scalable growth.

Key Takeaways

Key Takeaways

Established a clear source of truth, delivering consistent UI/UX across the Web and Mobile SDKs, achieving WCAG AA compliance, reducing developer support, speeding up feature delivery, and improving stakeholder alignment.

This experience deepened my understanding of enterprise-level design systems and highlighted the importance of governance. Learning from this project, I look forward to building even more consistent, flexible, and scalable design systems in the future.

Previous: UJET.cx

Previous: UJET.cx

Previous: UJET.cx

Next: Fintech

Next: Fintech

Next: Fintech

BK

LinkedIn

LinkedIn

LinkedIn

Email

Email

Email