top of page

Jazz Design System

Duration

2 years

Design Expertise

User interface design, Visual Design, UX research

Tools

Figma, Jira

Impact

Jazz is Princeton University’s first Design System. The value of Jazz for the university lies in: 

  1. Harmonizing the interactions and the visual design of university sites and applications. 

  2. Systematizing development approaches in each unit/department, which would save a lot of development time and efforts for design components that are frequently used in university sites and applications. 

  3. Providing access to designed components that meet usability and accessibility requirements, because many departments 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.

page-templates.png
bottom of page