UI/ UX Design Features for Math Mapper

UX Sketches_SM

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 have a daily obligation to ensure the development team has plenty of work while at the same time looking for efficiency gains and visual improvements to the interface and user flows.

A couple times I have been able to assist the Learning Sciences Team in field research. These trips involve travel to local middle schools and observing how teachers present Math Mapper and how the kids are using it. If time allows, we interview kids who have completed their coursework and ask them to walk us through the assessments. These assessments provide the students with a theta score based on their response to problems. I really enjoy these sessions since they give first-hand accounts and interpretations of what the end users see. Sometimes their interpretations match whats intended and other times we miss the mark. These are great opportunities for improving students 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

Misconception_Mockups_SM
Misconception-Map_SM

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.

Student Report Expanded

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.

Item-Analysis02b

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.

Item-Analysis

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

Score Bands

User Onboarding

NCSU Coach Sequencer
NCSU Coach Calendar

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.

ClassProficiency

Compact view showing class as whole

Class-Proficiency_Expanded

An expanded view of class detailing test instances.

Class-Proficiency_Student

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).

Emoji3