2020_HMHSD_banner

HMH Science Dimensions

Project overview

Too often, educational experiences suffer from low-quality UX. My team at HMH designed this program completely from scratch to better serve the needs of modern-day students. Science Dimensions is a national science program for K-12 students and teachers. It offers innovative solutions for digital instruction. The program empowers students and educators with unique digital experiences that are explicitly designed for learning about science, so every grade's experience feels intuitive and uniquely tailored to users' needs.

About my role

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.

HMH Science Dimensions

2020_HMHSD_banner

Project overview

Too often, educational experiences suffer from low-quality UX. My team at HMH designed this program completely from scratch to better serve the needs of modern-day students. Science Dimensions is a national science program for K-12 students and teachers. It offers innovative solutions for digital instruction. The program empowers students and educators with unique digital experiences that are explicitly designed for learning about science, so every grade's experience feels intuitive and uniquely tailored to users' needs.

About my role

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.

2020_HMHSD_lesson_flow

Kid-friendly user flow

Early in this project's development, user testing suggested that K-2 students would respond well to sequenced, full-screen lesson content that doesn't require scrolling. My team and I designed and implemented a unique horizontal user flow 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.

An audio-centric experience

At any level, science education introduces a plethora of new terminology. This is especially challenging for young learners, who are still forming their reading skills. To support them, my team designed Science Dimensions 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 consolidation in lesson review. This focus on audio results in a much more user-friendly, accessible experience for young learners.

Testing against assumptions

At the outset of this initiative, I helped pioneer a brand new user testing process at HMH. It was crucial that we test Science Dimensions prototypes early and often—with actual students. Through scientific test moderation, data collection, and analysis, we garnered insights that informed the long-term design strategy of this and future projects. Here are a few things we learned:

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.

Young students struggle with scrolling

One of the most crucial discoveries of early testing was specific to the K-2 grade band: young users often struggle with scrolling. To address this, we redesigned the UX specifically for the K-2 grade band to be built around a completely unique user flow, unlike anything we'd previously created.

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 reading

Unsurprisingly, our qualitative data revealed notable friction around the on-screen text. Science content is complex and often outpaces young learners' reading abilities. This information helped shape the audio-centric nature of the Science Dimensions UX.

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

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—users don't need to check it manually. Instead, the software gives them visual and audio feedback instantaneously.

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

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.

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 as text and audio.

Drag and drop matching (DDM)

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

Drag and drop sorting (DDS)

Students interact with various text or image elements by dragging them into the correct sequence. Students have multiple attempts to solve, and the pattern allows them to build upon partial success.

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.

Creating the style guide

To help ensure long-term consistency in the design and user experience of Science Dimensions, I created a detailed style guide for our library of over 100 unique interactive patterns. This was an in-depth document featuring detailed interaction specs and design logic. Some interactive state details are shown here.

Who I worked with

Great products are not built alone. Throughout the course of my design work for this program, I worked with other talented designers, a large international team of engineers, project managers, instructional experts, and many teachers and students (via user testing). As with any project, strong team communication was key to our 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 provides a stellar user experience. Now teachers can teach—and students can learn—without having to worry about poor UX. This was the mission, and I'm proud to have helped bring it to fruition!

© Joseph Brueggen 2020