Jazz Design System
Project Impact
Since the release of the first version in 2023, design equity across 5+ departments was improved and ~35% of development time and costs were saved.
Since 2023 developers across 7 departments have adopted the design system. The adoption rate is projected to be doubled by end of 2025.
7/7 departments are now compliant with WCAG accessibility standards compared to 2/7 in 2022.
Data from projections by OIT, Princeton University.
Duration
2 years
Design Expertise
User interface design, Visual Design, Information architecture, UX research
Tools
Figma, Adobe Illustrator, Jira
For whom and why?
1
Enable software developers across the campus to save time and efforts by utilizing a responsive and accessible component library and style guides tailored to the needs of university websites and applications. (especially targeted for teams that do not have dedicated designers on their teams).
2
Improve the experience of users of university websites and applications (prospective and current students, faculty, staff, and alumni) by providing consistent designs that are usable, intuitive, accessible, and memorable across devices.
3
Enable schools and departments that do not have dedicated designers and developers so they can improve the user experience and accessibility of their websites for a low cost by providing them the vital components in the default Drupal editor.
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.
