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

Many students easily intuit new digital interactions

Young students struggle with scrolling

Young students struggle with reading

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)

Image hotspot (IH)

Drag and drop sorting (DDS)

Paced video or animation (PVPA)

Drag and drop matching (DDM)

Type to answer (TTA)

Text-based multiple choice

Text-based line matching

Image-based multiple choice

Interaction style guide

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.