Mathtutor
The Problem
👉 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.
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.