Designing and testing the design system for a student & faculty facing website for Pratt Institute.
Design System
SAAS
2025
My Team:
Chloe
Meng
Ivory
Tools:
Figma
Zeroheight
Timeline:
Jan 2025 - May 2025
Overview
OnePratt design system is built for the OnePratt website, to help, support and unify the online experience for students at Pratt Institute. It includes a UI Kit, documentation site and a pitch deck.
Problem Space
What is OnePratt Website?
OnePratt is Pratt Institute’s centralized digital portal that gives students, faculty, and staff access to essential campus services, tools, and resources. It includes:
Course registration and class schedules
Financial aid and billing
Campus announcements
Academic advising tools
Our first question:
Should we start this project off by redesigning the OnePratt website or not? Redesigning it means stretching the project scope.
Problem Space
We asked around the students of Pratt Institute to see how the students truly feel about this website, and we received many negative feedback on the current design.
Current UI Audit
To make sure we can make an informed decision about whether to redesign or not, we did a UI audit across every UI elements, from the smallest atom, molecule to complicated organisms following the Atomic Design Framework.
We checked for inconsistencies, repetitions, usability issues and accessibility. The audit showed clear inconsistencies and usability gaps—prime material for a re-design and design system intervention.
See full UI element audit on Figma
Redesign
Therefore, we decided to do a re-design for OnePratt before starting on the actual design system. For the re-design, we aimed for a light-weight style that adheres to the Pratt Institute Visual Design Guidelines, and showcases a dashboard aesthetic to communicate OnePratt's nature.
Tokens
To have a good design system foundation, we wanted to make sure we have an intuitive Token System so that both designers can make global changes across the design, and developers can use tokens to ship products faster.
Our tokens apply to color, spacing and typography.
Our token structure uses a 3 tier pyramid structure, with Brand as the base level, alias in the middle and mapped as the top level.
Using color as an example, the Brand level includes the hexcode, the Alias level is the name we associate the color with, and the Mapped level is how the color is used.
The Mapped Token breakdown of a primary button.
The Mapped Token breakdown of a secondary button.
Once we embraced tokens, everything started clicking—from alignment to accessibility. They became the building blocks of our entire design system.
Our team figuring our how to give our Token intuitive names.
We used Figma variables to store Tokens, so that users can easily call out any tokens as they design.
UI Kit
We assembled a drag-and-drop UI kit that’s developer-friendly and design-approved. Each component is reusable, accessible, and styled with care.
All stages of buttons
All stages of cards
Customisable templates
Banners & pagination
Pre-built card templates
Navigation
Header bar
User Test
To make sure our UI Kit actually worked, we put it in users’ hands. We asked 6 users to design the Home Page and Support Page (our re-designed version) using our Figma UI Kit. While they design, we asked them to think-out-loud.
Our user testing in progress…
6/6 participants successfully recreated the designated pages:
3/6 participants expressed confusion when finding the "Panel" components:
6/6 participants thinks our Token systems are easy to use:
Iteration
After hearing user's thoughts in the testing process, we teaked our design! We got feedback specifically on two things:
Iteration 1
Re-naming "Panel" to "Cards"
Since users have troouble finding our Panel component, we changed the name to Cards, so this is universally recognized by designers.
Iteration 2
Create a component with multiple cards to recreate sections easily.
For the ease of designing and developing, we added a new section template just for cards, so that users can simply replace website copy instead creating sections from scratch.
Before iterating, we only have the drag and drop section template.
After iterating, we added this new card section template for users.
Documentation of Design System
Design systems are cultural changes disguised as UI Kits. Design system is more than just the UI Kit - the documentation is equally important on making our system usable and scalable.
We organized everything clearly in Zeroheight so devs and designers can actually understand what to do with the design system.
Get started
Spoon-feeding users on how to set-up the design system.
Tokens & foundations
How we created tokens and how to use them.
Components & Usage
What are the components and how to use them.
Accessibility
How to design with accessibility using the design system.
Get help & Social
How to reach out to us if users have feedback.
Resources
For developers and/or first time dersign system users
Pitch Deck
We stepped into our sales shoes to pitch the OnePratt Design System to an audience of developers and (potential) designers, because the current IT Team maintaining the OnePratt website does not have a designer. Our goal: show them that adopting a design system is really beneficial to their team, and the end-users (students) in the long run.
Our team of 3 on the day of pitching our design system.
What we learned
We learned that building a design system isn’t just about UI Kits — Never underestimate the power of documentation.
Intuitive component naming is so important.
Information architecture for a documentation site is also essential for usability, as users need to find and locate what to do with the UI Kit.
Back to Top
© 2024 Chloe. Made with love and cups of oatmilk latte.