UI/ UX Design Features for Math Mapper

Math Mapper is a complex and continually evolving software that requires devoted coordination with developers, psychometricians, project management, and learning sciences. There are days when "the cart is before the horse" and others where design time is ample. I enjoy these types of development teams where the challenges are ever-changing and the achievement bar is never a simple "this will do". I had a daily obligation to ensure the development team had plenty of work while at the same time looking for efficiency gains and visual improvements to the interface and user flows.
Many times I would assist the Learning Sciences Team with field research. These trips involved travel to local middle schools to observe how teachers presented Math Mapper and how the kids are using it. If time allowed, we interviewed the children who completed their coursework and asked them to walk us through the assessments. These assessments provide the students with a 'theta score' based on their responses to problems. I really enjoyed these sessions since they provided first-hand accounts and interpretations of the software. Sometimes their interpretations matched what was intended and other times we miss the mark. These were great opportunities for improving student's comprehension by analyzing feedback, reorganizing content flow and/or designs.
Some features I designed
Misconceptions
Misconceptions are incorrect beliefs students may have as they move up the learning trajectory levels. When a student answers a problem incorrectly and there is a misconception they will be able to view what that is along with its correct concept. Some instances can have up to 4 different misconceptions.
Misconceptions are displayed in a few key areas of the software. Inside learning trajectories, item analysis, and heatmaps. If the student gets the problem correct they will not trigger the misconception since they understand correct concepts. The user is able to interact with the misconception cards by flipping them over to see the correct concept or selecting the card itself to find all the locations it occurs on the map.
Design stages for Misconceptions


Misconceptions in the software
Student Track Record
Students are able to track their progress on their personal dashboards. The user experience utilizes white space which allows the colors to drive the information to the user quickly.

Item Analysis
Query top 3 responses including correct answer along with any percentage of students that skipped the question altogether. Also, denote correct/incorrect responses for each response.

With the answer key off, the teacher is able to review the top 3 responses with the students. This usually sparks debate, communication, and teamwork within the class to discuss why these respondents are correct/incorrect.

With the answer key on, the teacher is able to view responses and gauge class performance. The key is denoted with blue outlines. This is only one version for many different answer types.
Student Scoring

User Onboarding


Sampling of screens for using the UI
Class Proficiency
Students are represented as tick marks, giving teachers a quick overview of how their classes are performing. When students are scoring at the level an icon appears over the multiple instances along with the number of students. Teachers can also select a student from the pull-down to see where they are in relation to the class or do a deeper dive into testing metrics.

Compact view showing class as whole

An expanded view of class detailing test instances.

Student performance with learning zones (purple line)
Performance Emoji
Educators wanted a visual representation for the students to assess their overall performance. While the student is learning and taking assessments, their progress is recorded and given an assessment score. Visually, this is an emoji based system that reflects their comprehension of the instruction. (from left to right; Getting Started, Showing Understanding, and Showing Proficiency).
