CTAT
Designing a clearer, more intuitive authoring experience for CTAT’s intelligent math tutoring tool.
Product Design
UX / UI Design
Design Systems
Prototyping
LLM-assisted Workflows
SEP 2024 - DEC 2024
Overview
What is CTAT and what did I do there?
Context
Mathtutor (also called CTAT) is a project at Carnegie Mellon University's Simon Initiative that uses cognitive tutor authoring tools to help middle school students learn math efficiently and impactfully.
Allows educational researchers to create cognitive tutors to assist students with problem-solving.
Project Overview
Balance between prodcut and visual thinking
Throughout my freelance work with CTAT, I led three major design projects that balanced deep product thinking with strong visual execution.
I tackled complex technical UX challenges (such as improving the symbol-renaming workflow and defining the LLM Graph insert interaction) while also elevating the interface through polished visual systems. This included redesigning the toolkit components and refreshing the top & side-panel layers to create a more cohesive and intuitive user experience.
For this case study, I'm only going to walk through the Web Editor Interface.
Web Editor Interface
How can I design an interface that delivers information to instructors more clearly and efficiently?
The Outcome
Revamped Web Editor✨
The core goal was to make the editor feel more intuitive the moment instructors opened it.
I redesigned the workspace so users could view the layer panel and editing tools side-by-side, eliminating the constant switching that slowed down their workflow. From there, I refined the entire interface (removing visual noise, renaming unclear icons, and tightening the hierarchy) to create a cleaner, more approachable experience that made key actions easier to find and significantly faster to use
Problem Framing
What key problem areas indicate the need for a better editor?
Problem Context
Lack of Clarity & Findability
Current interface lacked clarity and consistency, making it difficult for users to understand where key actions lived or how to move through the editor:
Important tools were hidden behind multiple clicks
Icons lacked clear meaning
Labeling did not match users' mental models
Problem Context
Inconsistent Patterns Disrupting Workflow
The workspace suffered from inconsistent design patterns across panels. Layouts shifted from section to section, similar actions behaved differently, and UI elements lacked a unified structure:
Inefficient data retrieval required too much time to locate
specific information.
Interrupting their focus and reducing overall usability.
Design Solution
What are the details, changes, and improvements with the new design?
What Changed?
Allowing for both the simple and the informative
Current interface lacked clarity and consistency, making it difficult for users to understand where key actions lived or how to move through the editor:
Important tools were hidden behind multiple clicks
Icons lacked clear meaning
Labeling did not match users' mental models
👉 Optimized Editing Top-Menu & Side-bar
Core Features
More Robust Functionalities
With the redesigned Interface, I introduced three key improvements:
New Components moved to the top bar for cleaner, faster access
IDs are always visible for instant clarity.
Moved Style Manager + Settings to vertical panels, eliminating constant panel switching.
Process & Reasoning
How did I explore, narrow down, and make certain decisions?
Comparables
Exploring patterns in the screen-editor space
Reviewed patterns from HTML editors and tools like Figma and Webflow to understand how styling and decoration settings are typically surfaced.
Since CTAT is used primarily by educators, not developers, I focused on simplifying complex CSS terms (like justify-content or flex-grow) and reorganizing typography and decoration options into clearer, more intuitive groups.
Iteration
Complex interface into a clearer, focused flow
Through multiple layout and organization explorations, I narrowed the interface down to its core functionalities—removing noise, simplifying terminology, and reorganizing settings for clarity.
These decisions shaped the final two-panel system, allowing users to view layers and edit styles simultaneously for a more intuitive authoring experience.
Contact me to know more about this project!
Reflection 📍
Reflecting on this project, I gained valuable experience in balancing usability improvements with design familiarity to minimize user disruption. Leading the redesign of CTAT’s web editor not only strengthened my ability to manage complex, end-to-end workflows but also challenged me to design step-by-step UI screens to integrate new technologies like LLM capabilities into practical design solutions. Collaborating closely with developers and researchers reinforced the importance of cross-functional teamwork, while managing multiple deliverables taught me how to align design vision with technical milestones. Overall, this project pushed me to think more critically about how design can bridge complexity and accessibility for diverse users.