Ariana White
Product Designer

Digital supports for building math confidence.

Math SEL Supports | UX/UI

What is Amplify Math?

Amplify Math, based on the highly-rated Illustrative Mathematics curriculum IM K–12 Math™️, is designed around the idea that a core math curriculum needs to serve 100 percent of students in accessing grade-level math every day. To that end, the program delivers: 

  • Engaging, discourse-rich math lessons that are easier to teach

  • Flexible, social problem-solving experiences both online and off

  • Real-time insights, data, and reporting that inform instruction 
    ...to build student success.

Math SEL Supports | UX/UI

The main theme of the design process was centered around:

Alleviating math anxiety

Making problem-based learning accessible to all students

Supporting executive function in creating a positive math identity

Math SEL Supports | UX/UI

Problems In Scope

  • Students need a calculator in the digital platform so that they don’t need to use their phone or another application outside of our ecosystem.

  • Students need contextual hints to help them better understand the math problem presented to them.

  • Students need social-emotional learning support throughout the lesson to remind them of strategies to cope and manage their emotions while working on the lesson.

  • Students need easy, contextually specific access to math definitions to better understand the academic language and use of the terms they’re interacting with within the lesson/practices.

  • Students need a digital scratchpad to do computations and solve certain problems that aren't something they want to present to their teacher or other classmates.

  • Students need a way to discreetly ask the teacher for help in the program.

  • Teachers need a way to control access to digital supports.

  • Students should be able to toggle between languages so they can read in the language they’re most comfortable in.

Solutions

  1. Support problem-based learning by giving students helpful digital supports to scaffold the information and allow students to answer problems in multiple ways.

  2. Support different ways of answering problems through digital software. 

  3. Support the Student-Teacher Relationship by giving students a low-risk way to ask for help.

  4. Support Problem-Based Learning by utilizing asset-based pedagogy

  5. Help students reflect both on their feelings around their math ability and on their current progress in mathematics so they can understand both what they know and what they need to improve on.

Math SEL Supports | UX/UI

Goals

  • Support students' understanding and ability to interact with math content in lessons and practice on the digital platform.

  • Support students who have IEPs and might need a different way to respond to questions.

  • Limit the use of other technologies outside of the digital platform so that students can easily access useful tools to solve math problems without losing context and focus.

Math SEL Supports | UX/UI

Student View Wireframes

At the beginning of my design process, I created wireframes navigating interaction and experience within access to a digital support toolbar in Amplify's curriculum.

Featuring

  • Calculator

  • Hints

  • Mathigon Polypad integration

  • Discreetly contacting a teacher

  • Spanish language toggle

  • Guided Lessons

All the tools in the software can be found on the side toolbar. Because the information and tools are interesting and intriguing, the student experience is intuitive and engaging.

Math SEL Supports | UX/UI

Teacher View Wireframes

Once finished with the student supports, I created wireframes aiding Amplify's real-time insights, and data, and driving performance reporting for all learners in their curriculum. This helps build the teacher-student relationship, as teachers can directly target issues, and communicate with their students.

Featuring

  • Message Center

  • Checking Submitted Work

  • Mathigon Polypad integration for teachers

  • Annotations

Design Considerations

Calculator
Providing access to the appropriate calculator (4-function/scientific) when the problem does not call for calculation.

  1. 4-function/scientific calculator toggle by grade level. (K5 - high school, etc.)

  2. Draggable windows/ moveable on screen. This prevents student work from being
    covered.

  3. Horizontal and vertical scrolling allows for checking and viewing past and previous work.

Hints
Contextual hints, contextual strategies, and problem-solving strategies with the use of video, images, and more accessible in the same area where the calculator is located.

Polypad integration
Students can sketch out work on a digital scratchpad in the workspace with manipulatives that can help solve problems (ruler, protractor, etc.)

Discreetly contacting a teacher
Students can privately and confidently message the teacher without disturbing the class.

Spanish language toggle
When clicked, the language of the content should change from one language to another.

  1. This should also change the language of the content in other digital supports.

  2. This should stay the same until they change the content.

    Bilinguals can access math concepts in both of their languages and therefore are not necessarily at a disadvantage relative to their monolingual peers.

Guided Lessons
 Interactive instruction, and activities between the teacher and students.

Teachers should be able to go to settings and turn features on and off based on class/student.

Math SEL Supports | UX/UI

Click to test the prototype!

Student View Prototype

Once I tested out all usability mistakes, I started designing the final prototype in Figma.

Featuring:

  • Draggable Calculator

  • Contextual Hints

  • Mathigon Polypad Workspace

  • Discreetly Message Panel

  • Spanish Language Toggle

  • Moderated Lessons

Teacher Use Cases

Before launching the product, the team did a questioning round in order to reveal possible usability problems.

Guiding Questions

  • Do you use any digital tools or programs to support your teaching? (demos, google classroom, delta math, etc)?

  • Do you let your students use outside resources when doing independent practice?

  • How would you like to practice help and supports to inform and support differentiation?

  • What controls should a teacher have for allowing digital practice support in their program?

  • How does customizing content benefit you?

Click to test the prototype!

Teacher View Prototype

Featuring:

  • Mathigon Polypad Workspace

  • Message Panel

  • Moderated Lessons

  • Checking Submissions & Annotations

Style Guide

To stay consistent with the visual cues throughout the curriculum, I used a primary light-to-dark and blue-based color scheme throughout. The secondary color scheme corresponds with certain inputs throughout the curriculum. (Spanish toggle, Polypad workspace, etc.)

Math SEL Supports | UX/UI

Conclusion

The digital supports were crafted in terms of visual and written content to contribute to the process of users’/students' understanding and learning more about math. The digital supports have been launched for user testing with students and teachers to kick off the 2022 school year.

This project was amazing to work on. I loved working closely with students and teachers to understand their problems and interpret them to create beautiful solutions and build math confidence.