OTTO Design System

Building a scalable and accessible design system in Figma to unify the user experience across five OTT Pay products, improving design and development efficiency.

Company

OTT Pay Inc.

Tool

Figma

Role

UI/UX designer

Deliverables

Design library

Design token

Component guideline

Overview

Since joining OTT Pay as a UI/UX designer in the R&D team, I have had the opportunity of leading the development of the OTT Pay Design system(OTTO). This comprehensive system is currently leveraged by over five digital products within OTT Pay domain, encompassing both merchant-facing SaaS products and customer-facing web applications.​​

Initially, we identified the core problem to solve through extensive research on current practices and conducting one-on-one interviews with various product teams. After achieving a comprehensive understanding of the situation, we devised an execution plan that outlined the structure of the OTTO and the timeline for delivering each component level. 

Discover & Analyze

To precisely identify users' pains and requirements for OTTO, I began by interviewing 4+ design and front-end teams. This process yielded first-hand, qualitative feedback essential for guiding the system's evolution.

"It would be great if the components looked the same across all our products."

UI Designer from C

"The existing design system on Figma is messy and full of unrelated explorations."

New-join Frontend Dev from A

"It would be great if the components looked the same across all our products.Things like default, hover, disabled, etc."

UI Designer from B

"There’s always padding/spacing inconsistency between screens and journeys. We don’t know which one we should follow."

Frontend Dev from C

Here's our pain points:

Through thorough research of existing brand guidelines and design files, I gained a better understanding of the challenges the team was experiencing.

  1. There was a misalignment between design and production, as clear guidelines were lacking for various states, behaviors, interactions, and use cases.

  1. The existing design system was not sufficiently organized, making it challenging to easily search for specific components.

  1. There was confusion among designers as multiple libraries were available simultaneously, making it difficult to determine which components were correct to use.

Here's our solutions:

  1. Deliver a clear guideline to developers so that there will be no misalignment between design and dev.

  1. Structure and organize the design system so that users can easily find out the correct components to use.

  1. Create a design system in Figma applicable for all the products under OTT Pay.

Define & Synthesize

When I first began, I lacked a framework for organizing components. While public design systems from leaders like Shopify, Apple, and Google served as great inspiration, their vast scale made them difficult to apply directly.

The breakthrough came when I adopted Atomic Design principles. This methodology was then put into practice in components like button and input. 

Atoms

Molecules

Organisms

Configurable

Also by leveraging new Figma features such as the post-Config 2022 boolean and text properties, we built a versatile accordion where designers can now conveniently select any variation and configure it from a centralized variant panel.

Accessible

When our design team created OTTO, we treated accessibility as a fundamental part of good design, not an optional add-on. Even when accessibility wasn’t explicitly required, we still followed WCAG best practices—such as maintaining proper color contrast and ensuring minimum touch-target sizes—to deliver a more inclusive and usable experience.

Design Token

In order to establish a scalable and consistent visual system for UI development, as well as manage visual design attributes in a systematic manner, I collaborated with another UI/UX designer and front-end developer to devise a design token structure for OTT.

Base Token

We began by creating base tokens to define all fundamental values, including colors, typography, and spacing.

Component Token

Component token is a design token that stores visual properties specific to a UI component.