Case Study · Education · Multi-Platform

Designing a Multi-Platform NGSS Science Experience for Grades 3–5

A four-year collaboration with Houghton Mifflin Harcourt to build an inquiry-based science ecosystem across web, tablet, mobile, and print — supporting students, teachers, and three state adoptions.

🧪 Grade 3
🌿 Grade 4
🔭 Grade 5
🇪🇸 Español
OK · TX · CA
RoleLead UX/UI Designer & Visual Direction
Timeline4 years · Multi-phase
PlatformsWeb · Tablet · Mobile · Print
🔬
⚛️
Physical Science
⚗️
Chemistry
🦠
Life Science
🌱
Earth Science
🚀
Space Science
🌍
Earth Systems
🐛
Life Cycles
🧲
Forces & Motion
📅 4 Years Multi-phase engagement as core design partner across the full program lifecycle
📱 4 Platforms Web, tablet, mobile, and print — coherent experience across every format students and teachers use
📊 Significant Classroom studies showed statistically significant gains in student science performance with medium-to-large effect sizes
🗺️ 3 States Adapted for state adoption requirements in Oklahoma, Texas, and California — plus Spanish-language translations
My Role

Lead UX/UI, visual direction, and multi-platform integration — all four years.

As a core design partner on this program, I owned UX and UI design for the digital experience, directed visual development across illustration and animation, laid out the print textbooks in parallel, and collaborated with editors, engineers, animators, and curriculum specialists to keep everything coherent across every format and grade.

💻

UX & UI Design

Led UX/UI for web, tablet, and mobile across Grades 3–5 — user flows, wireframes, low- and high-fidelity prototypes, and final visual design for the complete digital lesson experience.

🎨

Visual & Animation Direction

Reviewed illustrator sketches, shaped animation storyboards, guided asset creation, and approved final art for all three grade levels — ensuring visual consistency across a massive content library.

📖

Print Textbook Design

Designed and laid out the print textbook versions of the curriculum in parallel with digital — mirroring the same instructional flow so teachers and students could move between formats seamlessly.

⚙️

CMS & Front-End

Optimized assets and updated front-end code in the CMS to ensure designs could be implemented at scale — reducing production friction and maintaining design quality across hundreds of lesson pages.

NGSS Framework

Three dimensions, one coherent experience.

The Next Generation Science Standards organize learning around three interlocking dimensions. Every design decision — layout, interaction, content hierarchy — was made in service of all three. Click each pillar to explore.

🔬
Disciplinary Core Ideas
DCI

The fundamental scientific concepts students build across K–12. In Grades 3–5, this means life science, earth science, physical science, and engineering design — each requiring distinct visual languages and interaction patterns to make abstract ideas concrete.

Ecosystems & food webs (Grade 3)
Energy transfer (Grade 4)
Earth's systems (Grade 5)
Tap to explore
🛠️
Science & Engineering Practices
SEP

The eight practices scientists and engineers use — asking questions, planning investigations, analyzing data, constructing explanations. The digital UX had to scaffold these practices at age-appropriate levels without over-directing students or under-supporting teachers.

Investigation flows with step-by-step scaffolding
Science notebook interactions for recording data
Claim-Evidence-Reasoning patterns
Tap to explore
🔗
Crosscutting Concepts
CCC

Seven ideas that bridge scientific disciplines — patterns, cause and effect, structure and function, systems and models. These had to surface consistently across all content without feeling redundant — a pattern library challenge as much as a pedagogical one.

Visual pattern cards used across units
Consistent CCC icons in lesson headers
Cross-unit connection callouts
Tap to explore
Interactive Demo

Experience the real HMH lesson interface.

This simulator is built using the actual HMH Science Dimensions design system — authentic RPL-643 activity containers, RPL-614 button specs, RPL-652 color palette, and real interaction patterns (MCQ, DDD, FTQ) from the NGSS 3–12 Styleguide I designed and documented.

Engage
Explore
Hands On
Elaborate
Evaluate
Engage · Step 1 of 5
Lesson Opener Engage
Explore & Explain Explore
Hands-On Lab Lab
Make Sense Elaborate
Lesson Check Evaluate
ENGAGE · Anchoring Phenomenon
What is Energy?
This energy station uses Earth itself to generate electricity. How does heat from underground become the electricity that powers your school?
Watch: Where Does Energy Come From?

Can You Explain It?

Engage
Look carefully at this house. Even though it's not close to any town, it still has electricity. It's using the heating and cooling systems, lights. By heating and cooling water and other steam sources, it makes the power that goes from the water to the steam to the generator.
The house gets electricity from a nearby geothermal station. How does the Earth's heat make electricity? Record what you think in your notebook.
Evidence Notebook
Record your ideas — you'll revisit this at the end of the lesson

Where Does the Energy Go?

Explore & Explain
Look at the photos of a cell phone with a full battery and one with an almost dead battery. How does the energy that comes into your phone from a charger get used?
📱
Full battery — 100%
📵
Almost dead — 5%

Explore First

When the phone battery drains from 100% to almost empty, where did all that energy go? Select the best answer.
A. The energy disappeared when the battery got low
B. The energy was transferred to light, sound, heat, and motion
C. The energy went back into the power outlet
D. The energy was stored in the phone screen

Simple Circuit Lab

Hands-On Lab
Label each part of the circuit below. Drag the correct label from the panel at the bottom to each target area on the diagram.
+ drop here drop here drop here drop here
Drag labels to the diagram above
Battery
Light Bulb
Switch
Wire

Making Connections

Elaborate
Think about what you learned in the Explore section about energy transfer. Now apply your understanding to a new situation.
A hair dryer uses electrical energy. List the different forms of energy the hair dryer transfers electrical energy into. Give an example of each.
Evidence Notebook — Transfer Times Two

Lesson Check

Evaluate
Answer the following questions to show what you've learned about energy transfer.
1. Which statement best describes what happens to energy?
A. Energy is used up and disappears
B. Energy can be created from nothing
C. Energy changes from one form to another but is not created or destroyed
D. Energy only exists inside batteries
2. A toaster converts electrical energy into which forms of energy?
A. Light and motion only
B. Heat and light
C. Sound and chemical energy
D. Motion and gravitational energy
🎉

Lesson Complete!

You just experienced a full HMH Science Dimensions lesson — built using the exact design system from the real product. RPL-643 activity containers, RPL-614 buttons with 7px radius, RPL-652 aqua/orange color palette, Evidence Notebook FTQ pattern, MCQ with radio feedback, and DDD drag-drop interaction.

Designed by Jennifer Turner · HMH Science Dimensions · Gr 3–5
Platform Design

One curriculum. Four surfaces. Zero seams.

Every design decision had to work across four very different contexts. Hover each card to see what made each platform unique.

🖥️
Web
Desktop-first · Student & Teacher views
Hover to see details
🖥️ Web Platform
  • Full lesson player with multimedia
  • Teacher dashboard & pacing guides
  • Interactive investigations & simulations
  • Science notebook with typed responses
  • Accessibility-first (WCAG AA)
📱
Tablet
Touch-optimized · Classroom primary
Hover to see details
📱 Tablet Platform
  • Large touch targets for young hands
  • Drag-and-drop investigation activities
  • Offline-capable lesson content
  • Simplified nav for independent use
  • Stylus-friendly science notebook
📲
Mobile
Responsive · Take-home & review
Hover to see details
📲 Mobile Platform
  • Stacked single-column lesson flow
  • Simplified interactions for small screens
  • Photo-based investigation capture
  • Family-friendly reading modes
  • Data-lite media loading
📚
Print
Textbook layout · Mirrors digital flow
Hover to see details
📚 Print Textbooks
  • Mirrored lesson flow from digital
  • CMYK color management throughout
  • Spanish-language translation workflow
  • State-specific content inserts
  • Teacher edition annotations
Design Process

How we built it — lesson by lesson.

Four years meant four phases. Each phase built on the last — refining the system, expanding to new grades, and adapting for new contexts.

01
Curriculum Analysis & IA

Worked with editors and curriculum specialists to map NGSS standards to digital lesson structures. Defined the 5-step pedagogical flow — Phenomenon, Wonder, Investigate, Make Sense, Apply — that became the backbone of the entire program.

02
UX Flows & Wireframes

Created user flows and low-fidelity wireframes for Grade 3, establishing the interaction patterns and component library that would scale to Grades 4 and 5. Teacher and student views designed in parallel from day one.

03
Visual Design & Direction

Led visual design for the digital experience while directing a team of illustrators and animators — reviewing sketch rounds, shaping storyboards, and approving final assets. Simultaneously designed print layouts for the same content.

04
Scale, Adapt & QA

Supported state adoptions for Oklahoma, Texas, and California — adapting content, imagery, and standards alignment for each. Optimized front-end assets in the CMS and conducted UX consistency reviews across all grades and formats.

State Adoptions

Built for the classroom. Adapted for every state.

State science adoption requirements aren't suggestions — they determine whether a program can be purchased by districts. I supported the adaptation process for three states, plus a complete Spanish-language translation.

🌪️
Oklahoma
Oklahoma Academic Standards for Science
State-specific science phenomena and contexts
Oklahoma-focused photography and illustration
Digital + print adaptation
Texas
Texas Essential Knowledge and Skills (TEKS)
Texas-specific science content and contexts
State adoption review and compliance
Bilingual content support
🇪🇸 Spanish Version Included
🌉
California
California NGSS full adoption standards
CA-specific environmental science content
Diversity and inclusion content review
Most comprehensive state adaptation
🇪🇸 Spanish Version Included
Outcomes

A program that moved the needle in real classrooms.

The HMH NGSS program delivered both instructional and operational impact — measurable learning gains in student studies, successful multi-state adoptions, and a design system that let large editorial and engineering teams produce content at scale without losing quality.

Building a coherent experience across four platforms, three grade levels, three states, and two languages required the same kind of system-level UX thinking that scales to any complex enterprise product.

📊
Statistically Significant
Classroom studies showed significant gains in student science performance with medium-to-large effect sizes across grade levels
🗺️
3 State Adoptions
Successfully adapted for Oklahoma, Texas, and California state adoption requirements — each with unique standards alignment
🌐
Multi-Format Coherence
Seamless experience across digital, print, and Spanish-language versions — same instructional flow, every surface
Scalable Design System
Pattern library used by editorial, art, and engineering teams to produce hundreds of lesson pages consistently at scale
Reflection

What this project demonstrates

HMH demonstrates my ability to lead UX and visual design at scale across an extraordinarily complex product ecosystem — four platforms, four years, three grades, three states, two languages, and dozens of collaborators — without losing coherence or quality at any layer.

The system-level thinking required to build and maintain a multi-platform design system for K–5 education is directly transferable to any enterprise product that needs to scale across surfaces, teams, and markets. The craft is the same. The stakes are just different.

UX/UI Design Visual Direction Multi-Platform Systems Print Design Animation Direction Design Systems CMS & Front-End Accessibility Localization Cross-Functional Leadership Instructional Design NGSS Alignment