Math World Problem

Scope and Sequence:

I first started by working closely with the instructional design team (math content experts) to define the learning standards and objectives for each grade, so they are in line with the US Math education standards and guidelines.

Based on the standards, we created lesson standards and objectives for each lesson (see the table below) so we can determine the pedagogical approach for each lesson.

Why is Word Problem so hard to teach?

A lot of teachers have reported that teaching word problem is very hard. Many factors contribute to why students often struggle with word problems. Through our research, here are some of the common reasons:

Problem #1: Reading Comprehension: Students have to be able to fully comprehend what is happening in the problem in order to figure out how to solve it.

Problem #2: Only Looking at the Numbers: Students often don’t actually stop to read the problem, but instead, pull out the numbers and use a random operation.

Problem #3: Tricky Language used in the Story: Many curriculum writers use tricky language to trip students up. Words used such as “more” doesn’t always mean addition and “less” doesn’t always mean subtraction.

Through literature research and interviewing with educators, here are some of the best practices when it comes to teaching word problems:

1. Have the student draw a picture of what’s happening as they read it
2. Use pictures and other visual aids
3. Change the word problem to be more relevant to the student
4. Support and provide explanation for difficult vocabularies
5. Do NOT teach students that certain words indicate any specific operation, focus on the overall context

High-level Approach:

Based on the research result, we decided that each lesson will be consist of three major elements:

#1: Freestyles: Freestyles provide pictures and other visual aids to help students understand the narrative. It also add playfulness and fun into learning.

#2: Toolbox: Toolbox and walkthroughs provide a scaffolding process, and help students to model and abstract the math equation from the word problem.

#3 Complementary gadgets: Complementary gadgets support Freestyles and Toolbox, and provide flexibility to teach a variety of mathematical content.

There are 7 hamsters.
4 hamsters are big. The rest are small.
How many hamsters are small?

There are 8 bottles in a game at the fair.
You knock down 5 bottles.
How many bottles are still standing?

There are 4 bananas.
There are 6 monkeys.
How many monkeys do not get a banana?

You have 24 wheels.
Each robot needs 4 wheels.
How many robots can you make?

Overview:

These digital tools are a simulation of the real physical counters students usually use in the classroom to perform calculations. They save educators from purchasing physical counters for each student, and at the same time, they provide customized guidance and feedback based on each student’s individual answers. The fun interactive elements in these tools can also increase engagement and makes the learning process fun.

Before we started the design process, we researched and observed educators to get an understanding of how these physical tools are used in the classroom and analyzed students’ interaction with these physical counters to inspire the design.

Early Ideas:

The first step was to design the overall flow and user experience of the tool. I mocked up several options to show the general flow and collaborated with developers to build early prototypes. Based on feedback from user-testing, I made several iterations before finalizing the flows, specs and layouts.

The goal is to provide smooth interaction and intuitive design that matches the pedagogical needs at the same time.

I started by working with instructional designers and math experts. We looked at different pedagogical contents together that require using the Counter tool to assist students in solving Math problems. We decided that the following features are necessary:

• Add/remove counters
• Change counter colors
• Delete all counters
• Word problem text
• Input box with answer sentence and number pad

Iteration based on User Testing:

After designing the initial flow, we collaborated with developers to build the first interactive prototype and conducted the first user-testing. Students completed the following POC using the think-aloud method. We found 8 students in total (3 students entering 2nd grade, 5 students entering 1st grade).

Before testing, they did not understand how to solve problems of this type –  i.e. change unknown. In addition, these students had difficulty using physical counters to solve these problems, which suggests that the math was beyond their current level of conceptual understanding.

#1 Issue: Drag and drop interaction was challenging. It was hard for some younger students to use their little hands and fingers to drag and drop counters on the workspace.

#2 Issue: Confusion when removing and changing the color of counters. The popup to change color and remove rarely appeared. Most students tried dragging a counter off the screen. Some students tried dragging the counter to the bin.

#3 Issue: Adding 10+ counters feels very repetitive. When students were required to add 14 counters, they seemed to be annoyed by dragging counters one by one.

Final Screen Layouts:

The link to final screen layouts: https://xd.adobe.com/spec/93235cf0-77a3-46df-5cf0-baaa6eb53421-e512/grid/

UI Design:

After finalizing the screen specification, I collaborated with another UI designer, and conducted extensive studies for the UI elements and animations. The goal of the UI design is to give the Math Toolbox and Counters a look and feel of the overall iReady products. At the same time, we want to increase student engagements and create moments of delight.

“Skinned” Counters:

In order to contextualize the word problem and make the counter tool more fun, I worked with UI designers to design a series of “skinned” counters that can be used inside the toolbox to replace regular counters.

Second tool: Array

Third tool: Ten-Frame

Matching

Equation Builder

Multiple Choice

Glossary

Design Style Guide

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.