OnePratt Design System
Reshaping a student-centered resource platform
TIMELINE
Feb - May 2025
(14 weeks)
TEAM
3 Product Designers:
Ivory Zhao (me👩🏻💻)
Meng Shi
Chloe Zhang
MY ROLE
Product Research
UX/UI Design
Design System Development & Documentation
Usability Testing
TOOLS
Figma
Zeroheight
BACKGROUND
OnePratt is Pratt Institute’s management platform used by 5k+ students to access academic and administrative resources.
The story began when my team and I, as users of onePratt, recognized significant issues with its usability, accessibility, and scalability. We set out to redesign the platform and make a meaningful impact on our campus major management tool.
SOLUTION
A new design system integrating consistent UI components and detailed instructions for engineers & designers.
Pictograms are misaligned with the features they represent, failing to effectively convey their intended meaning.
Decorative colors are overused as primary colors across subpages and multiple states for interactive elements, resulting in an inconsistent brand identity.
Students: OnePratt end user
Low discoverability and control over commonly used features.
Overwhelmed by excessive colors, text hierarchies and inconsistent visual elements.
Engineers: OnePratt current contributor
Cluttered implementation with inconsistent design and code.
Potential collaboration challenges as the team grows and more designers join.
Product Designers: OnePratt potential contributor
Lack of guidance on design principles and best practices during onboarding.
Low efficiency due to starting new designs from scratch.
Our team decided to focus on redesigning the onePratt home page and contact support page. Since the two pages covers the most frequently used design patterns based on our research, we believe this narrowed design scope can make the most impact with a limited timeline.
There’s no need to manually inspect color codes or copy component values. By creating design tokens and variants, we make sure the updates and maintenance can be made seamlessly by both designers and engineers.
Our system improves efficiency with flexible, easy-to-use components. These reusable elements save time and effort, while still allowing creative freedom through simple customizations, like adjusting templates or swapping content as needed.
We reduced the usage of decorative colors and typography hierarchies. Therefore, students can get a clear understanding of the key features on onePratt and find the information they need.
We created a clear, well-organized documentation to help new designers onboard quickly and understand the reasoning behind key design decisions. It also provides a space to get support, ask questions, and contribute to the system.
We presented the design system as a foundation for building a more student-centered onePratt.
TAKEAWAYS
UI Kit isn’t everything.
This project changed my understanding of what a design system is. Not just as a UI kit, it is a combination of guidelines, principles, best practices and technical documentation. It plays an essential role in how designers and developers collaborate, requiring clear ownership to guide and influence that collaboration effectively.
Treat design system as a UX design project.
Although a design system differs from traditional UX projects in its deliverables and users, I learned that the core principles remain the same. We still need to focus on the user, usability, and refer to the design thinking methods to guide the development process. Usability testing was especially valuable, allowing me to observe how designers interacted with our design system and identify areas for meaningful iteration.
You may also be interested in…
