Ryan Xia

Princeton University Class of 2022
Computer Science
Visual Arts

UI/UX Designer
Graphic Designer
UX Engineer
Project Manager

Princeton University Design System

Building Design Systems for large Academic Institutions (UI/UX Design)

UI/UX Designer
Professional Work
Summer 2021 to Present | Princeton, NJ


Students, Faculty, Engineering teams, Design
teams, Accessibility assurance teams

Primary Challenge:

Building an inuitive, compact, and lightweight
design system for users inexperienced in design.


Developing a Container system for easy drag &
drop prototyping supported by an efficient
organizational structure.


The design system is still in the first phase
of development. However, Design Council
meetings and briefings with several departments
have so far expresse their intentions to use
the Design System going forward, signifying
a successful start.

Project Summary

The goal of this project was to build a solid foundation of component heuristics and structures to eventually inform and create an intuive and compact design system for the Princeton University community.

Primary Design Challenge

The Primary Design Challenge for this project is creating a design system that is simple and intuitive to use for users inexperienced with Figma while also satisfying a far broader field of applications than most commercial design systems.


The Container System

Feature 1: Naming & Organizational Conventions
After designing the desktop components, the first issue to address is allowing the user to easily navigate through a vast component library while understanding what each component is. We do this by organizing each component in a library by its purpose, its place in the size hierarchy, and its name.

Feature 2: Nested/Hidden Components
The second issue to address is reducing the complexity of the design system to promote broader and easier use without compromising on convention enforcement. This can be accomplished by building high level components composed of several hidden, lower level components.

Feature 3: Container System
The third and final issue to address is reducing the complexity and variance involved with building full prototypes using the component library. This can be accomplished by using a container component that takes advantage of Auto-Layout to autoformat components dropped in by the user.