Problem Framing

How can UX enhance instruction in higher mathematics?

Background

Learning mathematics can be difficult, because most concepts are inherently abstract. For even the most dedicated student, learning a new area of mathematics can be hampered by the effort of translating vague concepts into a workable mental image or model.

Leaning outcomes can be improved via student-centered design and development of static images, linear animations and interactive pieces for trigonometry, calculus and statistics.

My Roles

• Client-side developer
• Interaction and visual designer
• Animation and art director

Methodologies

• Instructional design
• Software development
• Usability studies

Artifacts

• Sketches
• Animation specs
• Design library
• Pattern library
• Code libraries
• Interactive computational visualizations

Overview

Under broad direction from the real-life mentor of Stand and Deliver protagonist Jaime Escalante, my projects were led by math education researchers from across the world. Working from rough instructional narratives, I created detailed animation specs. I directed visual designers to produce static artwork and linear animations. I created and maintained a design system including visual style guide and code libraries. I developed rich, interactive pieces. Instructional reviews were held with a panel of other math education researchers. Usability studies were conducted in students' classrooms.

Design System for Plots

Findings

• Working Against Constraints: The use of standard symbol-color pairing to address variations in color vision is not feasible in this context. The interactive nature of the pieces does assist in meaning discernment.
• Classroom Context: Use of these pieces in constrained environments — e.g. projection in a brightly-lit classroom — relies on careful palette choices. Further in-situ assessment of the palette's effectiveness in more varied settings is recommended.

Guidance for Avoiding Calculation Errors

Outcome

• Hundreds of interactive computational visualizations

Reflection

• Balanced presentation: Be mindful of tradeoffs between real-time interaction and numeric / visual precision.

Interactive animations: Chain rule, null hypothesis, least squares regression, volume between rotated functions.

Bits

• Organizations: University of Texas at Austin and Agile Mind
• Stack: Canvas, SVG
• Project Type: Math curricula