Illustrative Mathematics
In this redesign, I worked on...
-
Establishing an information hierarchy that made large blocks of dense text easier to scan
-
Applying usability patterns to make the material more discoverable
-
Developing a design library that was compatible with print materials in addition to web
-
Accessibility guidance for a font and color palette
Qualitative Research
Information Hierarchy
_edited.png)
Design Library
Project at a Glance
About
Illustrative Mathematics is a nonprofit organization founded on the belief that all students are capable of learning grade-level mathematics. Their innovative problem-based K–12 curriculum is designed to energize math classrooms and equip students with critical skills, understandings, and practices that can benefit them for a lifetime. As more courses and features were added to their curriculum, IM needed a redesign of their web materials.
Research
The research efforts focused mainly on how educators, which are the primary audience, used the curriculum. I developed a research protocol consisting of interviews and remote curriculum walk throughs with a series of educators who regularly use the IM materials.
After the interviews, my colleague and I found that:
-
content was difficult to scan because of its length and lack of visual cues.
-
educators often miss important navigation elements.
Using this information we prioritized information hierarchy and navigation design.
Navigation Design
In the old site, navigation was handled with a combination of dropdown menus, tabs, and hyperlinks. These patterns hid a lot of important information and as a result, teachers spent a lot of time trying to find what they wanted.
​
In the new design, we added a more prominent active state to the tabbed navigation and exposed the resources hidden in the dropdown.
Old Design
The old design with the two column approach, understated tabs, and a complicated navigation pattern
New Design
The new design allows educators to jump to different sections within lessons and reduces the amount of vertical space that the global navigation uses
Information Hierarchy
The content heavy curriculum consists of materials that outline the mathematical pedagogy and the tactical instructional materials.
Instructional materials are divided into three main levels:
-
Grade level
-
Unit level
-
Lesson level
Within each of these levels there is a mountain of text that explains rationale, what you need to look for during a class, and how to address challenges with students.
Hierarchy in Original Design
.png)
The old design does little to separate prioritize and differentiate the text
Since the goal was to help educators quickly find what they need during instruction, we organized the content based on educators' time of use. We used color to signal a primary group or section.
Hierarchy in New Design
.png)
.png)
Headers within the curriculum
Defining distinct but legible headers was a challenge in and of itself! Using a series of font weights, sizes, and icons, we were able to achieve headers that easily translated to print materials.
.png)
Page Design
Putting these elements together without overloading the screen proved to be most difficult for the lesson pages. Each lesson consisted of 4 primary parts:
-
Warm-up
-
Activity (this can be several section types)
-
Synthesis
-
Cool down
In addition to these primary parts, each part could have several subsections with varying degrees of importance - all of which needed to be quickly identified during instruction (think of teaching a class of 23 students and realizing a couple of students are having a difficult time while three other students need extra work to keep from being disruptive and you need to locate both of the sections ASAP) .
​
Other sections, like standards to be addressed, had to be there for planning and educational purposes but aren’t typically used during instruction.
Continuing with our card and color system, we deemphasized any information (like standards) that we knew could be skipped over during instruction, with gray bounding boxes.
Typical lesson on a page
.png)
User Testing & Iterations
With such a big overhaul, we wanted to make sure the changes we implemented addressed the educator’s needs. We took the new designs back to them and found that overall the design was easier to use.
What the educators said
“Navigating is much easier. Quicker to find lesson synthesis, quicker to switch between lessons and units. I think I could get more done in one tab instead of needing multiple tabs open.”
-educator 1
“Feels a lot nicer - more information given to you. The right information is at hand. Previous version you had to do a lot of clicking to get where you wanted to go.”
-educator 2
“I like the setup. I like the different colors. I like the links on the right - pacing guide, scope and sequence I use. I don’t use them all the time, but if I’m quickly looking for standards that helps.”
-educator 3
The End
Redesigns don’t always mean new features and functionality; it can also mean a restructure of existing content. Creating a better hierarchy and design system made a huge impact on this text heavy site’s usability. In fact, NYC just adopted the IM curriculum in their district. The new structure, along with a design library and style guide, was built to accommodate new tweaks and additions. You can checkout the new site too https://illustrativemathematics.org/!