McGraw Hill- K-5 Literacy Platform
Equipping all students with literacy skills mastery
OVERVIEW
McGraw Hill is a global education company with over 130 years of experience shipping exceptional products across grades K-12. In recent years, they have expanded product lines to include digital learning platforms in response to the growing demand for more accessible educational modalities within today's classrooms.
PROBLEM
Since Covid 19, millions of students have faced critical gaps in learning. The most serious delays have been within literacy development. Teachers are struggling to reach learners while also contending with demanding classrooms.
How might we build digital learning experiences that support educators and enable children to rapidly gain literacy skills?
SOLUTION
Introducing, Emerge! a K-5 new literacy platform built for the modern classroom. Rooted in the Science of Reading, Emerge! enables educators to deliver "just in time instruction" through data driven lessons, cross subject integration, and differentiated instruction. Emerge! ignites deep inquiry and rapid literacy skills mastery through engaging digital curriculum.
MY ROLE
I served as a Product Designer in close collaboration with Instructional Designers to ship K-5 digital learning experiences with a focus on Whole Group Instruction and Immersive Reading.
IMPACT
I ensured design quality assurance through detailed visual refinement across 1,000+ screens resulting in improved readability and learnability. I spearheaded key design strategies to enable increased engagement and immersion for published text leading to dynamic literacy skill development for millions of K-12 students.
TOOLS
Figma, Adobe Suite, Microsoft Suite, Gemini, Otter AI, Figma Make, Ceres Authoring Platform (LMS), Jira, Confluence, Paper, Pencil
TIMELINE
18 Months
Initial Product Experience
USER FEEDBACK- GRADES 2 -5
The core MVP lesson sequencing was put to the test within real classrooms to collect user feedback from educators and students. The initial product feedback was less than stellar.
Educators felt that:
Core screens didn’t feel “child facing”
There were too many clicks per lesson
Text and images felt disconnected creating reading barriers
Designs felt "boring" (too much griege)
USABILITY & VISUAL BENCHMARKING
I performed detailed visual and functional analysis of learning sequences to parallel user feedback. I then co-created a template based design system and partnered with diverse teams to bring awareness to critical design discrepancies including text styling, color schemes, content design, and visual layout.
Annotations of Key Template Design Issues
Generating Design Solutions
EXPLORATORY PROTOTYPING
I partnered with Product Designers and Academic Designers to problem solve field test feedback by delivering design iterations that reflect the contextual needs of today's educators and students. I explored screen sequence designs for 4th Grade Whole Group Learning Practice as well as for 2nd Grade Main Reads.
DATA INFORMED DESIGN
I performed an internal literature review of early product and marketing research to gain knowledge of Educator preferences, student learning needs, and market adoption rates.
I learned that today's educators are seeking versatile, accessible, and engaging digital solutions aligned to the Science of Reading.
Customer Preferences
Adoption Insights
INSTRUCTIONAL MODEL INTEGRATION
I did further research into the learning model for Emerge! My aim was to blend instructional pedagogy with visual and functional design for a seamless student and educator experience.
The K-5 Instructional Model featuring Inquiry Based Learning
Designing Frictionless Pathways
USER JOURNEY MAP
I constructed a micro student journey map that starts with a 4th grader entering the classroom and then engaging in both whole group and independent instruction. This enabled me to problem solve for user pain points and moments of friction.
Critical issues might be distracted students or time constraints for lesson implementation. Potential solutions could include dynamic transition screens, learning "hooks" to ignite engagement, and clear lesson sequencing.
USER TASK FLOW
I then brought user insights from journey mapping into more concrete screen design through information architecture and task flow visualization. This served for organizing important components such as screen transitions, directions, and interactive moments.
4th Grade Student Journey Map
Whole group Learning Practice Flow
Exploring Visual Patterns
WIREFRAMES / EDUCATIONAL TEMPLATE DESIGN
I synthesized user insights into mid-fidelity prototypes for the 4th Grade Core Knowledge flow. I balanced design exploration with the constraints of our authoring platform, Ceres, to allow components to be easily built through digital widgets. I also built template design with a focus on classroom accessibility. Students need to access content at multiple viewports from large smart board screens to smaller computer interfaces.
USABILITY TESTING
I ran quick usability testing of key wireframes to gain feedback on screen sequencing (click rate) as well as reading comprehension. Results showcased an 80% improvement in readability and content clarity and a 90% improvement in lesson pacing.
Wireframes - Whole Group Lesson Practice
Perfecting Digital Learning Flows
FULL FIDELITY PROTOTYPES - WHOLE GROUP PRACTICE
I incorporated visual design style guidelines and instructional frameworks into full fidelity template prototypes. I created strong hierarchy by emphasizing main content such as focus questions and directions. I incorporated iconography and visual emphasis to enable engagement and visual clarity for both students and educators.
Opening Screens - Focus Question & Directions
Delivering accessible reading and writing experiences
I utilized strategic UI card design to frame and emphasize text. This is paired with bolded concept words and related imagery to enhance readabilty and reading comprehension.
Reading and Writing Engagement Screens
Fostering independent exploration and engagement
I paired bold headings, clear directions, and colorful interactive elements to ignite student exploration. Students can discover learning content at their own pace through an accessible map and thumbnail card set that reveals a modal window inviting deeper learning through independent practice.
Interactive Learning Screens
Full Learning Sequence
I mapped out key screen explorations for the 4th Grade Whole Group Lesson sequence with a focus on smooth transitions, student centered design, and overall learning engagement.
*The individual kid illustrations are from an in-house illustrator.
4th Grade - Whole Group Learning Sequence
4th Grade - Independent Learning Sequence
Making Reading Immersive
FULL FIDELITY PROTOTYPES - MAIN READS
After re-imagining user centered lesson flows for the Whole Group Learning sequence, I explored more engaging visual design solutions for the Main Read lessons for Grade 2. Key challenges included delivering dynamic designs balanced with accessibility compliance and engineering constraints.
Media Library to Book Cover Screen
Building immersive reading experiences
Students are able to easily navigate book pages, hover over vocabulary words, enter digital text responses, and enjoy dynamic illustrations through accessible reading lessons.
Core Story Pages with Vocabulary Component
Text Entry Screen - Story Page
Annotation Tool - Story Page
Story Pages
Core Main Reads Screens
More to Come
It has been a gratifying experience to partner with Product and Academic Designers to launch a robust platform that empowers every child to learn how to read and write. I have gained success within my role as a Product Designer by fostering strong working relationships with colleagues and by always being willing to learn and push my skills as a designer.