At LiveRamp, I was hired as the second designer and first UX engineer to establish a scalable design foundation during rapid growth. I created the company’s first official design system, including core UI foundations, component standards, and documentation, and built a governance model that enabled adoption across product teams. I also migrated the org from Sketch to Figma, modernizing workflows and improving engineering alignment.
Role
Senior Designer
Team Size
1
Company
LiveRamp
Year
2017
Overview
At LiveRamp, I helped shape the company’s design foundation from the ground up—joining as the second design hire and evolving from UX Engineer to Senior Product Designer. I launched LiveRamp’s first design system, creating a scalable design and engineering framework that unified the company’s enterprise products. LiveRamp’s docs site is still public, click here to view.
Design System Snapshots
-
![]()
Color System
A unified color system built to stay consistent across themes. Each color token adapts seamlessly between light and dark mode, preserving contrast, accessibility, and brand expression. Designed for clarity, flexibility, and effortless theming—no matter the environment.
-
![]()
Alert Component
A unified alert pattern for inline messaging. Each variant conveys meaning through color and iconography, providing clear, accessible feedback in context while staying consistent across themes and surfaces.
-
![]()
Rich Data Table
A powerful, customizable data table built on top of the Material UI Data Grid. It supports sorting, filtering, pagination, and dense data visualization with ease. Optimized for performance and flexibility, it gives users a smooth way to explore large datasets while maintaining a clean, polished UI.
-
![]()
Side Panel
A flexible, slot-based side panel designed for complex layouts. Mix and match header, body, footer, and action regions to configure exactly what you need—whether it's a simple detail view or a multi-section workflow. Built for adaptability, clarity, and scalable UI patterns.
-
![]()
Composable Card
A flexible, modular card that adapts to any content. Use it to showcase info consistently while mixing and matching elements to create richer, customizable layouts
-
![]()
Tree View Component
A clean, structured way to display nested information. Tree is good for users to explore parent–child relationships. Ideal for organizing complex data into an intuitive, expandable hierarchy.
-
![]()
Filter Composite Component
A simple, intuitive filtering module powered by checkboxes. Let users quickly narrow results by selecting multiple criteria, all while keeping the interface clean, clear, and easy to scan. Perfect for refining lists, catalogs, or any data-heavy experience.
Scaling Design Systems, Not Just Components
I owned creation of a governance and contribution model to scale the Motif Design System across product teams. Defined clear roles, review processes, and adoption workflows to ensure quality, consistency, and shared ownership as the system matured. See a sample of a planning presentation to drive the vision of adoption across orgs.
Highlights
Built the design system from scratch, creating foundational 40+ foundational components and patterns, and design tokens.
Developed a documentation and governance model to support adoption across global design and engineering teams.
Led the migration from Sketch to Figma, modernizing workflows and ensuring cross-team scalability.
Grew and mentored a small design system team, enabling long-term ownership and sustainability.
Reflection
LiveRamp was where I learned to build design systems from the ground up, balancing design craft with engineering rigor and cross-functional alignment. The experience shaped how I think about systems today: as living frameworks that empower teams to build better, faster, and consistently.