HMH Science Dimensions

image

HMH Science Dimensions

ℹ️

Project overview

Products in the education space suffer from an unfortunate reputation of confusing experiential design. During my time at HMH, I worked to turn this perception around through thoughtful, user-centric design. My team built this program from scratch to challenge industry assumptions about how people learn. The result is a comprehensive rework of digital science education tooling, informed by intelligent pedagogy and well-suited to the needs of modern-day students. HMHSD is a national science program for K-12 students and teachers. It offers innovative solutions that empower students and educators with interactions explicitly designed for their learning needs.

🙇🏻‍♂️

About my role I served as a co-lead for the K-2 grade band. My role had a heavy emphasis on user research and interface design. I worked closely with cross-functional collaborators and education industry professionals to shape a wholly new 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 engage more effectively with individual tasks and pieces of lesson content. Users focus on the task at hand. Content is written to tie that task to the context of the larger lesson flow. 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. This balanced experience helps them focus while also empowering them to dig deeper into lesson material that they find particularly interesting.

🎧 An audio-centric experience

At any level, science education introduces abundant new terminology. This is especially challenging for young learners, who are still learning to read. To support them, we designed HMHSD as an audio-centric experience. All lesson content is read aloud to students while simultaneously being presented as on-screen text 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. This focus on audio results in a much more accessible experience.

Testing against assumptions

At the outset of this project, my team pioneered a new user testing process at HMH. It was crucial that we test this product early and often—with the specific intended user group. Through scientific test moderation and analysis, we garnered insights that informed the long-term design strategy of this and future projects at HMH. Here are a few highlights from our research:

🧒🏻

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.

🧠

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

💻 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 rich, focused interactions that comprise an engaging learning experience without overwhelming users. Interactions never compete with lesson content—they reinforce it. Some select interactive patterns are detailed below.

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, Science Dimensions guides users through new concepts by providing insightful feedback with every correct and incorrect submission.

image

Text-based multiple choice

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.

image

Text-based line matching

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

Image-based multiple choice

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.

👆

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.

As a lead digital designer for the K-2 grade band, my focus was on designing immersive interactive patterns to make lesson content exciting and approachable for young learners.

image

Creating the style guide

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.

🤝 Who I worked with

Great experiences are not built in isolation. To ship HMHSD, I worked with many talented designers, a large international team of engineers, project managers, instructional experts, and many teachers and students (via user testing). Every function lent unique insight into a project that posed significant challenege for the organization, but ultimately was a resounding success.

🤔 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 underconsidered design implications. This was huge, and helped set precedent for how innovative programs are designed in the education space.