HMH Science Dimensions

image

HMH Science Dimensions

ℹ️
Project overview
  • Many education products suffer from confusing experiential design
  • HMHSD is a national program for K-12 students and teachers that set out to fix that
  • Challenges industry assumptions about how people learn
  • Comprehensive rework of digital science education, informed by pedagogy and well-suited to the needs of modern students
🙇🏻‍♂️
About my role
  • Design co-lead for the K-2 grade band
  • Heavy emphasis on user research and interaction design
  • Worked closely with cross-func partners and educators

Formalizing in-person research

My team was presented with the opportunity to challenge decades of legacy assumptions about how students interact with digital content. To do so, we established a new in-person testing partnership.

  • We would leverage their tech to conduct moderated prototype testing sessions, and they would achieve their goal of supporting companies in the education space
  • Established a continuous feedback loop
  • Testing directly with the end users—students and educators
  • We conducted interviews and clickable prototype tests with scores of students, using designs at varying levels of fidelity and throughout the full product development lifecycle

Here are a few high-level takeaways that we derived from aggregate data:

Students expect age-appropriate design

Our plan to create uniquely styled interactions per grade band was validated when we discovered students' sensitivity to the UI. Young test subjects frequently shared positive comments about the age-appropriateness of the interface, while older students were sensitive to UI elements that downplayed their grade level by 'feeling' too young.

Many students easily intuit new digital interactions

Young students rarely struggled to understand new interactions in the Science Dimensions application. They repeatedly demonstrated an innate sense of understanding when using our library of interactive patterns. This was an encouraging discovery that pointed to the success of our designs, and helped inform their evolution.

Young students struggle with scrolling

One of the most impactful discoveries of early testing was specific to the K-2 grade band: young users often struggle with scrolling. To address this, we redesigned the flow for this grade band to be more segmented and linear.

Young students struggle with reading

Unsurprisingly, our data revealed notable friction around on-screen text. Science lesson content is complex and often challenges young learners' reading skills. This insight helped shape the audio-centric nature of our experience.

image

Guided user experience

Early in the project's development, testing suggested that K-2 students would respond well to a sequenced, full-screen UI that broke lesson content into three phases—introductory, familiarization, and review. My team built a uniquely linear flow based on this model to support the needs of young learners. This format inspired the creation of a library of interactive patterns designed specifically for highly sequenced lesson content.

image

Age-appropriate user flows

The HMHSD interface prioritizes user focus, allowing students to focus on individual chunks of information. Content is intelligently designed to support the larger lesson. Minimizing distractions and avoiding visual clutter are key to designing for this age group. This flow is highly linear while still allowing students some degree of navigation to revisit previously introduced concepts.

An audio-centric experience

  • Science education introduces plenty of new terminology
  • This is especially challenging for young learners
  • To support them, we designed HMHSD as an audio-centric experience
  • All lesson content is read aloud to students while also presented visually as on-screen text and via closed captioning
  • Every interaction in the pattern library includes auditory guidance and feedback, so students are supported from the time a new concept is introduced, all the way through knowledge consolidation in lesson review

An extensive interaction library

  • A core feature of Science Dimensions is its diverse library of over 100 interactive pattern variations
  • The program's unique user flow enables focused interactions that to avoid overwhelming users
  • Interactions never compete with lesson content—they reinforce it
  • A handful of interactive patterns are detailed here:

Tap to reveal (TR)

A series of static images are presented, with one obscured. Students are prompted to tap to reveal the obscured image. This pattern can help teach groupings and reinforce correlations between elements.

Image hotspot (IH)

This pattern presents a static photograph or illustration with superimposed interactive hotspots. Students select the hotspots to learn more about elements in the scene. Details are provided with written and auditory content.

Drag and drop sorting (DDS)

Students interact with various text or image elements by dragging them into the correct sequence. Students are given multiple attempts to solve, based on the educator's judgment. This pattern allows them to build upon partial success rather than starting from scratch on every attempt.

Paced video or animation (PVPA)

A sequenced gallery of video or animation snippets is used to break a challenging concept into digestible bits. Students are prompted to play each snippet in sequence and are free to navigate back and forth.

Drag and drop matching (DDM)

Students drag images from an image bank to one of several empty labeled slots. This pattern teaches correlation between otherwise unrelated concepts. Multiple attempts allow students to build upon partial success, reinforcing lesson content.

Type to answer (TTA)

Exclusive to lesson review, this pattern presents students with a question about lesson content and prompts them to type their answer in a designated area. It is specially designed for young typists.

Text-based multiple choice

image

Multiple choice questions are one of the most familiar question formats for young students. This question is an example of an instant feedback interaction—meaning users don't need to check it manually. Instead, the software gives them visual and audio feedback instantaneously.

Text-based line matching

image

In this interaction, users tap a word from either column and link it to the correlating word in the opposite column. This is an example of a delayed feedback interaction—students select Check before receiving feedback. Large type, bold colors, and clear interactive mechanics are crucial to the success of these interactions. Too much flourish can be overwhelming for young students.

Image-based multiple choice

image

Throughout the design process, many teachers provided feedback expressing the value of imagery in introducing a new concept. This inspired us to design image-based versions of our most common patterns.

Interaction style guide

image

To help ensure long-term consistency in the design and implementation of HMH Science Dimensions, my team maintained detailed formal design documentation for our library of interactive patterns. The quality and specificity of our design documentation was new to the organization. It helped set a precedent for other teams. Shown here is a surface-level snippet of interactive state details for one pattern.

image

Flows designed for learning

  • The purpose of each lesson is to introduce and reinforce new concepts—speed is not the goal
  • At the interaction level, new concepts are supported by helpful feedback with every correct and incorrect submission

Why it all matters

HMH Science Dimensions represents a complete overhaul of K-12 science education for millions of students in the United States. Since science is a notoriously difficult subject for many students, it was crucial that our new program provide a thoughtful and accessible user experience. Now teachers can teach—and students can learn—without having to grapple with poor design. This was huge, and helped set precedent for how innovative programs are designed in the education space.