McGraw Hill- K-5 Literacy Platform
Equipping diverse learners 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 across the K-5 New Literacy Platform. I delivered visual benchmarking across 1,000+ screens as well as exploratory prototyping for the Grade 4 Whole Group Learning Practice and the Main Reads sequence.
IMPACT
I fostered cross-functional team collaboration through design education and work flow innovation. I spearheaded exploratory design solutions as well as visual benchmarking across grades 2-5, improving student engagement, readability, and accessibility within the first product launch.
TOOLS
Figma, Adobe Suite, Microsoft Suite, Ceres Authoring Platform, Lucid, Jira, Confluence, Paper, Pencil
TIMELINE
18 Months
Initial Product Experience
FIELD TEST - GRADES 2 -5
When I first joined the design team, the Whole Group Learning Practice sequence had been built and was currently undergoing field testing within elementary classrooms. Educator feedback was less than stellar particularly targeting contextual classroom needs.
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)
VISUAL BENCHMARKING
I captured detailed annotations across core screens to coincide with field test feedback. Key issues identified were cumbersome text box design (contents spilling from the staging space), lackluster navigation design, and accessibility issues.
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.
PRODUCT RESEARCH
I did an internal literature review of early product and marketing research to gain knowledge of Educator preferences, student learning needs, and market adoption rates to inform my designs.
I learned that today's educators are seeking versatile and accessible digital learning platforms that utilize inquiry based approaches to learning.
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 visual design solutions for the Main Read lessons for Grade 2. Key challenges included delivering engaging and 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.