Mathtutor

Mathtutor is a project at Carnegie Mellon University's Simon Initiative that uses Cognitive Tutor Authoring Tools (CTAT) to help middle school students learn math and fractions. Was an only designer for this intelligent software tutors website that provide step-by-step help and feedback using CTAT, a tool that allows educational researchers to create cognitive tutors to assist students with problem-solving.

Hugbox is a new app that supports the future of mental health by providing a reliable tool to help unlock new forms of emotional support. It offers users a customizable chatbot character that is available 24/7 for anyone who wants to talk to a sister, teacher, friend, or anyone else. Not feeling comfortable sharing personal stories to others is not a problem anymore with Hugbox.

Mathtutor is a project at Carnegie Mellon University's Simon Initiative that uses Cognitive Tutor Authoring Tools (CTAT) to help middle school students learn math and fractions. Was an only designer for this intelligent software tutors website that provide step-by-step help and feedback using CTAT, a tool that allows educational researchers to create cognitive tutors to assist students with problem-solving.

My Role
Web UI Design

Design System

User Research

My Role
Web UI Design

Design System

User Research

Timeline
3-Month

Timeline
3-Month

The Problem

Unclear interfaces made navigation difficult and confusing for users.


Inconsistent design patterns disrupted workflows and reduced usability.

Unclear interfaces made navigation difficult and confusing for users.


Inconsistent design patterns disrupted workflows and reduced usability.

Unclear interfaces made navigation difficult and confusing for users.


Inconsistent design patterns disrupted workflows and reduced usability.

Unclear interfaces made navigation difficult and confusing for users.


Inconsistent design patterns disrupted workflows and reduced usability.

Limited accessibility prevented a smooth experience across different users.


Inefficient data retrieval required too much time to locate specific information.

Limited accessibility prevented a smooth experience across different users.


Inefficient data retrieval required too much time to locate specific information.

Limited accessibility prevented a smooth experience across different users.


Inefficient data retrieval required too much time to locate specific information.

Limited accessibility prevented a smooth experience across different users.


Inefficient data retrieval required too much time to locate specific information.

Design Solutions⭐

Redesigned HTML Web Interface

More intuitive and consistent experience

Four Step-by-Step LLM Step Tabs

Clearer and streamlined workflow

Graph Add/Insert Step Flows

Easier functionality for data manipulation

Feedback Informative System

More intuitive and consistent pathway experience

Accessibility Improvements

Clearer user understanding & notifications

Web Sidebar Navigation Redesign

Directive Icons, Simplified layouts, Improved labeling

Core Design Values⭐

Redesign HTML Web Interface

Redesign HTML Web Interface

More intuitive and consistent experience

More intuitive and consistent experience

Four Step-by-Step LLM Step Tabs

Four Step-by-Step LLM Step Tabs

Clearer and streamlined workflow

Clearer and streamlined workflow

Graph Add/Insert Step Flows

Graph Add/Insert Step Flows

Easier functionality for data manipulation

Easier functionality for data manipulation

Feedback Informative System

Feedback Informative System

More intuitive and consistent pathway experience

More intuitive and consistent pathway experience

Accessibility Improvements

Accessibility Improvements

Clearer user understanding & notifications

Clearer user understanding & notifications

Web Sidebar Navigation Redesign

Web Sidebar Navigation Redesign

Directive Icons, Simplified layouts, Improved labeling

Directive Icons, Simplified layouts, Improved labeling

👉 Design Solution #1

New HTML Web User Interface

Old Design

New Design

Faster Component Management

Significantly upgraded the workspace to improve efficiency and clarity, starting with the Layer Panel, which is now permanently positioned on the left for easier access.

Layer interaction is now more intuitive: we've replaced the unclear 'move' icon and enabled click-to-select and drag-to-reorder functionality. Layers are also far easier to distinguish with clear icons representing the body, div, and text elements. To safeguard user's interface design, added a lock function next to the view/hide button for each layer.

👉 Design Solution #2

Optimized Editing Side-bar

Streamlined Interface

For streamlined organization, the New Components button is now on the top bar, and the rest of the Top panel buttons are simplified. Crucially, the ID is visible at all times. Also optimized your workflow by moving the Style Manager and Settings to vertical options, allowing users to view layers and edit styles simultaneously, which eliminates constant panel switching.

👉 Design Solution #3

LLM Step + Graph Add/Insert Tabs

Old Design

New Design

Intuitive Data Management: A New Interface

The data view has been upgraded to a slide-in table for cleaner presentation. Users can now drag and drop .tsv files directly onto the table to easily toggle between different versions. Also optimized readability by transposing data: Value names are now presented as column headers. Additionally, text display options now include improved text wrapping, and Column A is now sticky (fixed) to enhance a data search and cross-referencing experience.

[NEW] Unified and Intuitive Prompt Creation Tab

Implemented a unified design component system to deliver a more consistent and seamless experience, including unified notification components.

The new 'Edit Prompt' tab has been added specifically to provide directive, simple editing of your prompts. Users can now edit the text directly within the main window and quickly get started by dragging and dropping an existing prompt onto the tab. For faster, guided editing, use the fill-in box options on the right side of the screen. For safety, Redo and Undo functions are available for all text edits, and a refresh button allows to instantly revert to the default text, while users will still be able to see the original text even after making changes.

[NEW] Unified and Intuitive Prompt Creation Tab

Implemented a unified design component system to deliver a more consistent and seamless experience, including unified notification components.

The new 'Edit Prompt' tab has been added specifically to provide directive, simple editing of your prompts. Users can now edit the text directly within the main window and quickly get started by dragging and dropping an existing prompt onto the tab. For faster, guided editing, use the fill-in box options on the right side of the screen. For safety, Redo and Undo functions are available for all text edits, and a refresh button allows to instantly revert to the default text, while users will still be able to see the original text even after making changes.

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.