UT Sage
Improve the user experience and user interface of the AI tutor platform for students and professors using a design system.
Project Overview
The Problem
When I joined UT Sage as the sole designer, the platform had just launched its beta to faculty and students across UT Austin. While UT Sage's core features were functional, the user interface felt fragmented and lacked visual cohesion. Inconsistent design elements, gaps in accessibility, and missed UI details made faculty and students confused and frustrated.
The challenge: How could I elevate UT Sage's design quality and accessibility to create a polished, professional experience worthy of a college-level learning platform?
The Goal
My goal was to overhaul the platform to provide a unified, accessible experience for both students and faculty, while ensuring the new design would be sustainable for future development and growth. Oh, and make it look nice too!
Design Process
1. Where do I start?
As the sole designer joining UT Sage, I started by testing the platform and quickly found inconsistent icons, font sizes, and styles across pages, along with major accessibility issues like poor contrast, small text, and lack of keyboard navigation. That is when I decided to rebuild a new design system from scratch.
2. Get feedback from the users and stakeholders
Before diving into solutions, I learned the existing design language and gathered context. I reached out to the previous designer to learn her design rationale, and requested lo-fi sketch-ups from my manager to understand the product's evolution. Besides learning on my own, I regularly gathered feedback from my manager, who summarized insights from users and researchers.
3. Rebuild the design system
After gathering insights, I created a new design system consisting of 25+ standardized components, ensuring web accessibility (WCAG 2.2 Level AA) on the component level, and consistency with Figma tokens from the start, making sure the new design system is scalable and future-proof.
4. Create new pages
Using the new design system, I quickly iterated on each page and updated components as needed. My background as a design engineer helped a lot here. I worked closely with the lead front-end engineer, understanding technical constraints upfront and designing solutions that were both user-friendly and technically sustainable.
- Toggle redesign
- Edit page
- Home screen
- Help center
- Example Sharing flow with redlines
Updated sharing flow with more accessible font sizes and colors.
5. Validation and results
After four months, I delivered a more accessible, unified UT Sage prototype. The engineering team used my design system to quickly rebuild pages with improved consistency and accessibility.
Disclaimer: We're currently testing with more users
to gather feedback for the next iteration and further improvements.
- Home screen
- Edit screen
- Chat screen
6. Outcomes
This redesign transformed UT Sage from a half-finished beta into a coherent, accessible educational platform:
Accessibility
Aiming for WCAG 2.2 Level AA compliance across all components, addressing color contrast, font sizing, and keyboard navigation
Consistency
Established a 25+ component design system with Figma tokens, ensuring consistent design across the platform
Developer efficiency
Engineering team can now build pages significantly faster using the systematized design system
Design sustainability
If new features are added, the new pages can be designed quickly using the robust design system
7. Reflection and next steps
This project showed that a solid design system is essential for
scalable, high-quality results. My design engineering skills
helped bridge design and development for a more practical,
polished solution.
However, I would have asked for more detailed feedback from the users
and stakeholders, which could have helped me rethink some of the design
decisions and user flows.
Next steps:
- Dark mode (yay!) implementation to improve accessibility and user choice
- Broader user testing to gather feedback from diverse faculty and student populations
- Iterative improvements based on testing insights to continuously refine the experience