3-Week Site Redesign

A K–12 math curriculum needed an updated design for their web and print materials

User Research / IA Design / UX Design / Visual Design
Desktop and tablet views of the Illustrative Mathematics web materials

The Gist

In this project we: 

Project Goals

Illustrative Mathematics is a nonprofit organization founded on the belief that all students are capable of learning grade-level mathematics. Their top-rated K–12 curriculum is designed to energize math classrooms and equip students with critical skills, understandings, and practices that last a lifetime. As more courses and features were added to their curriculum, IM needed a redesign of their web materials that would:

Our Process

Research

(~1-2 weeks)
Our research efforts focused mainly on educators as they are the heaviest users of the curriculum and key to its successful adoption. We interviewed teachers with differing levels of experience with the IM curriculum as well as members of the IM support team who facilitate teacher trainings. 

The most consequential findings were:
In auditing the site, we had identified challenges with information hierarchy and navigation, so these findings validated those concerns. One unexpected finding was that while the intent was for teachers to use the materials before teaching the lesson, in practice many teachers were using the materials while teaching the lesson. These teachers needed more in-the-moment support (including better mobile patterns).
The high level audit illustrates the path to a lesson for educators
Figma board showing audit of site navigation
Web and Print Design
(~12 weeks)
Using the information we gathered during discovery, we mapped out the resources needed for each curriculum level and began modeling information architecture and navigation.
Because educators often teach more than one class or grade throughout the day, they need to easily access resources within a single course and also switch between courses (and even grade levels). 
‍
In the old site, navigation was handled with a combination of dropdown menus, tabs, and hyperlinks. We improved navigation with a simpler breadcrumb that drilled down to the lesson level but let teachers easily jump back to any other level they wanted.
Old Lesson Navigation
Previous lesson layout with challenging navigation
Using this pattern hid a lot of important information like a glossary and course guide. Additionally, the tab styling was not recognized as interactive so teachers spent a lot of time trying to locate resources elsewhere.
New Lesson Navigation
Redesigned lesson layout with headers and anchor links
We kept the tab structure within units and lessons, but added visual styling to indicate that they are interactive. We also exposed the resources hidden in the dropdown for easier access.
‍
A question mark icon
When content doesn't fit into a neat box
Navigation was less straightforward in some special cases. The K-5 curriculum included materials called "Centers" that spanned across units and grade levels. During our research, Centers were cited as one of the most confusing and difficult-to-find materials. We addressed this by creating a specific place to access centers within the K-5 landing page and allowing educators to scan by subject or filter by grade. 
Centers page showing ability to filter by grade level
The curriculum is content-heavy and includes both instructional materials and supporting content.

The instructional materials are broken down into multiple levels:
- Grade level
--Unit level
---Lesson level

At each level, there is text to explain the rationale behind what is being taught, how teachers should prepare, what resources are needed, and what to expect during class sessions. This rich supporting content is a key to the curriculum's high rating and adoption - as designers, our goal was not to simplify or shorten the text, but to figure out innovative ways to make it easier to scan and digest.
Site hierarchy mapped out with level resources & sections
Content Hierarchy of IM curriculum with Grade, Unit, and Lesson level materials exposed
Our strategy was to identify content that was primarily used for "planning" vs. content that was used "in the moment". We performed a content inventory and created distinct visual styles for repeated components, making sure that the "planning" content was styled differently from the "in the moment" material. During "planning" moments, teachers had more time to read, while "in the moment" components like core activity text and anticipated student responses needed to stand out in a quick scan of the page.

For primary sections, we used bold colored headings themed for each unit. For secondary sections, we used gray backgrounds to indicate the information that was more for "planning" and could be skipped over "in the moment".
The lesson layout was most complicated so we started there...
Redesigned lesson layout showing scannable components
Same header styles added to the section (K-5), grade, unit, and lesson levels
Grade band, Course, Unit, and Lesson page layouts
For sections that aren’t present in every lesson, but are important when they do appear, we used illustrative icons, lines, and bright IM brand colors.

Examples of section differentiation:
- Access for disabilities image
- Student task statement
- Are you ready for more component (expandable)
- Access for english language learners
- Clear "Logged in" vs. "logged out" states for resources (with CTA to login or create an account if logged out)
‍
Since there was so much text in each lesson, there was a lot of vertical scrolling involved. We created an anchor links panel for each lesson to make it easier to skip directly to specific sections.
‍
While a designer's first instinct is often to cut text, for situations in which the text is necessary, there's a lot to be gained by using clear hierarchy, layout, and consistent visual styling to let people quickly identify the information that are looking for.
A question mark icon
Creating consistency across web and print
One of the last major challenges we faced was keeping these styles consistent across print. Print materials were assumed to be in black and white, so it was important to choose appropriate font sizes and weights rather than relying on color.
‍
Print is more cumbersome to read when spread across multiple pages, so for components which did not need the full-width of the page, we used a two-column layout. This allowed teachers to view instructions and student facing material simultaneously.
‍
We also included tabs with section numbers at the beginning of each section for easier way-finding through the large manuals
Example of print materials showing side-by-side page layout
Testing & Final Improvements
(~4 weeks)
With such a big overhaul, we wanted to make sure the changes we implemented addressed educator’s needs. We conducted validation testing with new designs - teachers found them easier to navigate and scan. The new navigation exposed resources that some teachers had been unaware even existed in the old design.

“

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.

- Illustrative Mathematics Educator

”

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

- Illustrative Mathematics Educator

“

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

- Illustrative Mathematics Educator

Final Takeaway

Redesigns don’t always mean new features and functionality - a lot can be gained just by thoughtful restructuring of existing content. IM continues to be a leader in K-12 mathematics (and was recently adopted by the New York City school system!)

Creating a better hierarchy and design system made a huge impact on this text-heavy site’s usability. Importantly, the design was created to accommodate the addition of new (unanticipated) elements. Between when our UX design was completed and the site itself launched, IM had gone through a company-wide rebrand for a more kid-friendly, modern style. Our design system was easily adaptable to the new gradient-based color scheme - you can see the result here: https://accessim.org/
Purpose UX logo in white
Email
info@purposeux.com
Phone
919 213 9022
Primary Address
201 W. Main St. Durham, NC 27701
Based in
North Carolina, New Jersey, New York
Social Media
Copyright © 2023 Purpose UX, LLC.
Powered by Design with Purpose.
Schedule a discovery call with us to discuss your UX needs.