Jazz Design System

Duration

2 years

Design Expertise

User interface design, Visual Design, UX research

Tools

Figma, Jira

For Whom?

Software developers across campus.
Users of university websites and applications.
University departments who lack designer and developer access.

Impact

Jazz is Princeton University’s first Design System. The university system benefits from Jazz in the following ways,

Harmonize the interactions, visual design and the overall user experience with university sites and applications.
Systematize UI development approaches in each unit/department, which would save ~35% of development time and costs across schools.
Provide access to designed components that meet usability and accessibility requirements for ~70% of departments who do not have a designer.

Design contribution

I provided consults regarding the design process and management of design files in Figma. I collaborated directly with a developer and a lead developer, design manager, creative lead, and design intern. We held two sets of design review meetings, one specific to the design team we narrowed down design proposals, determined questions for the dev team, and next steps for design, and another one with the entire team to present the revised designs for further feedback from the development team and a creative lead at OIT.

Throughout the course of this project I researched and designed UI components that could be applied to university sites and applications. These UI components include accordions, tabs, buttons, cards, chips, vertical menu, application headers, and steppers. I also explored tints and shades of color for our design system.

I handed off UI components by implementing them in Figma’s auto-layout containers. Auto-layout containers make it easier to create and document consistent padding and margins within each component, allow for easier expansion or revision of the component, and can be inspected by anyone with editor access to the files.

I proposed a new way of managing design work by tracking tasks on the team’s existing product management tool, Jira, in the form of issues written as user scenarios. The issues were broken down by UI components, and by the pieces of a component in the case of complex components, such as cards. Some of the review process with the development team took place through the comments section on each issue which made the revision process faster and enabled us to make more progress during our meetings.

I concluded my contribution to the project by creating page templates that are commonly used in OIT’s projects. The templates are made of a combination of UI components, using auto-layout containers, enabling them to be moved on the page by drop and drag interactions. The templates are accompanied by a documentation on order of content on each page, margins, padding, and vertical spacing.