Designing a Clearer Learning Journey for Hooked on Phonics
Redesigned navigation and information architecture to improve content discoverability and reduce friction for parents.
EdTech
Information Arch
Website Redesign
MY ROLE
UX Designer Project Manager
TEAM
Gloria Yang (Me) Aayushi Baharadwaj Anvita Shah Conor Mack
CLIENT
Hooked on Phonics
TIMELINE
3 months, Sep - Dec 2025
OVERVIEW
Hooked on Phonics had recently completed a major website redesign, but the Learning Resources section was deprioritized and left structurally fragmented. Parents struggled to discover materials and understand how resources supported their child’s learning journey.
I led two rounds of user interviews and usability testing to uncover breakdowns in navigation and content discoverability. Based on these insights, I redesigned the navigation flow and homepage experience, restructuring the information architecture to create a clearer, more exploration-driven learning path.
The final solution clarified content hierarchy, strengthened connections between free and paid offerings, and improved confidence in navigating the platform.
Introducing Hooked on Phonics
Hooked on Phonics is a learn-to-read program designed to help children ages 3-8 develop foundational literacy skills. The platform offers a combination of physical learning kits (workbooks, storybooks, and hands-on materials) and digital resources (a mobile app with interactive games and activities).
Their website serves as both a marketing platform and a resource hub, offering:
Free Learning Resources: Worksheets, videos, and educational games organized by grade level (Preschool through 2nd Grade)
Paid Subscription: Access to the full Hooked on Phonics app and physical learning kits delivered monthly
Educational Content: Articles and guides for parents on reading fundamentals and learning strategies
Gif of the Current HoP Learning Resources Hub
What's the problem our client is facing?
Hooked on Phonics recently underwent a major website redesign, but the Learning Resources section was deprioritized and fell out of scope. As a result, this critical area, meant to support parent discovery and ongoing learning, became difficult to navigate and underutilized.
Our team focused on redesigning the information architecture (IA) and user experience of the Learning Resources to address low discoverability, unclear navigation, and weak connections between free resources and paid offerings. Over three months, we focused on creating a continuous, exploration-based experience that helps parents confidently guide their child’s learning journey.
Screenshot of the Kick-Off Meeting
Uncovering where the experience breaks
To understand why Learning Resources underperformed, I led exploratory research across stakeholders, competitors, and parents.
Our goal was to uncover not just usability issues, but structural misalignment between how the product was organized and how parents think about learning.
Insights from Client & Stakeholder Conversations
Through client and internal conversations, we identified early assumptions:
Learning Resources lacked visibility
Navigation hierarchy felt unclear
Filters and breadcrumbs were inconsistent
The core product offering wasn’t clearly articulated
These conversations helped define initial hypotheses, but they did not yet explain why parents struggled.
Research Questions
Through our research, we wanted to understand:
How do users navigate to and within the learning resources section?
How does the current information architecture support or disrupt users’ finding the resources they need?
What We Learned from Competitors
We analyzed four leading educational platforms to understand best practices in educational content navigation: Mindly Games, Education.com, SplashLearn, and K5 Learning.
Educational IA Principles
Our literature review revealed four core principles that educational sites must follow to serve parents effectively:
Navigation must account for multiple user goals – Parents come with different needs and mental models
Multiple entry points improve discovery – Give users different ways to find what they need
Structure resources around learning progression – Help parents understand what’s relevant to their child’s stage
Labels must be clear and intuitive – Content organization needs to be easy to understand and navigate
Three Critical Insights that informed our Design
After synthesizing our research, three major problems emerged that were preventing parents from successfully using the Learning Resources section.
Learning resources are hard to find
Top navigation lacks clarity & hierarchy: with lack of clear entry points, unclear language, and overlapping labels
Search functionality goes unnoticed and there is inconsistency in how the search functionality works across the site
Filters are unpredictable: content filters resemble a side nav, the filter results aren’t properly communicated with the user
Individual resource pages limit continued engagement and learning progression
Breadcrumb structure is inconsistent & doesn’t allow easy backtracking
Users miss links while scrolling
Users misunderstand sneak peak videos of the app as playable games on the website
Users expect guidance to the next relevant resource
Users do not know what the core product is
Users don’t know the overall product offering
The homepage does not define the product
“Get Started for $1” creates confusion rather than entice users to pay
Users want to experience the product before subscribing
From fixing pages to designing a learning journey
Based on these key insights, we established following strategic direction to guide our design decisions.
Design a continuous, exploration-based user experience that helps parents guide their children’s learning journey, while clearly communicating the extent of free and paid product offerings.
Build a continuous, exploration-based experience
Supporting users in navigating the site through multiple entry points to find the resource they need.
Support a guided learning journey
Providing clear direction on what resources to use next to support child's learning progress
Communicating free & paid product offerings
Connect free and paid resources, making it easy for the users to understand the breath of offerings.
Translating insights into structural design decisions
After synthesizing research, I focused on redesigning three critical touchpoints that directly addressed our insights:
Resource Hub
Resource Detail Page
Homepage
Each redesign targeted a specific structural breakdown identified during research.
Resource Hub
Parents struggled with unclear hierarchy, inconsistent filtering, and overlapping labels.
Design Decisions
We redesigned the hub to:
Restructure filters to behave like filters, not side navigation
Introduce filter chips and result counts for clarity
Add subtopics as structured filtering options
Improve card layout spacing and scan-ability
Add sort functionality
The goal was not to add more features, but to make discovery feel predictable. Instead of forcing exploration through guesswork, the hub now supports intentional browsing.
Resource Detail Page
Users had difficulty backtracking and lacked guidance toward the next relevant resource.
Design Decisions
We redesigned the detailed page to:
Clarify breadcrumb hierarchy for easy backtracking
Introduce clickable grade and topic tags
Surface related resources aligned with the current topic
Reframe sneak peek content to clarify paid vs free experiences
This transformed isolated pages into connected nodes within a learning pathway. The experience now supports progression instead of one-off visits.
Homepage
The homepage did not clearly define the product or differentiate free and paid offerings.
Design Decisions
I redesigned the homepage to:
A clear value statement defining the product at the top
A visual carousel to demonstrate what the product includes
A direct entry point into Learning Resources
Clearer communication of subscription value
The homepage now establishes context before asking for commitment.
Testing the redesign with parents
After refining the high-fidelity designs, I conducted 5 moderated usability sessions with parents of preschool and early-elementary children. Each session lasted 30–45 minutes and focused on evaluating whether our redesigned navigation, IA, and resource-discovery patterns aligned with parents’ mental models.
Assess whether parents can intuitively navigate the redesigned site
Validate whether the improved filtering system reduces the friction
Assess if the redesign clearly communicates the Hop product offering
Evaluate whether the redesign provides clear guidance on what to use next
What Improved?
Filters, Breadcrumbs & Hierarchy Supported Quick Discovery
In the original experience, parents hesitated. They hovered. They clicked, backtracked, and tried again.
In the redesigned version, something changed. Participants immediately used filters to narrow by grade and skill focus. Breadcrumbs helped them confirm where they were. No one asked, “Where am I?”
"Everything was where I expected it to be. This feels really intuitive."
The new structure reduced cognitive load. Parents no longer explored through trial and error. They navigated with intention.
Clickable Tags & Related Resources Built Stronger Learning Pathways
Previously, resource pages felt like dead ends. We redesigned them to surface related resources and clickable topic tags. During testing, parents didn’t just view one worksheet and stop. They clicked into related materials, explored tags, and verbalized how resources fit into their child’s progression.
“The tags and related resources are super helpful. I immediately get if this fits my child, and what are next ones to use.”
The experience moved from static content browsing to guided learning.
But we hadn’t solved everything
Confusing Navigation Labels Led to Misrouting
Testing also revealed subtle but important friction.
3 out of 5 participants clicked “Learn Concepts” expecting worksheets or practice materials. The label activated the wrong mental model. The structure worked, but the language did not.
“I thought Learn Concepts was where the worksheets would be. It sounds like the place where kids learn.”
So we changed “Learn Concepts” to “Curriculum Guide.”
In follow-up conversations, parents immediately understood it as informational rather than downloadable materials. The problem was not navigation anymore.
Inconsistent CTA messaging created confusion about the product offering
On the homepage, parents interpreted “Start for $1” as access to the full bundle—app + physical materials. However, on the resource page, the same offer felt like app-only access.
This inconsistency caused hesitations around value, expectations, and trust.
We unified the copy across pages to clearly communicate that the offer included both interactive app content and hands-on materials.
After the change, parents expressed clearer understanding of what they were paying for.
What this validation proved?
The redesign did more than improve the visuals. It also aligned the structure with parent mental models.
100% task completion
All participants successfully located grade-specific materials using the redesigned filtering system.
Reduced navigation hesitation
Participants moved directly to filters and breadcrumbs without backtracking or verbal confusion.
Clearer product understanding
Parents consistently described the $1 offer as including both app and physical materials after copy refinement.
Stronger learning progression
Participants used related resources and tags to explore next-step materials without prompting.
Bringing Clarity to Learning Discovery
The final designs present a clearer, more intuitive Learning Resources experience for parents.
Repositioning Learning Resources as a core business growth lever
The redesigned Learning Resources experience reframed this section from a peripheral content library to a strategic entry point within the Hooked on Phonics ecosystem.
Through research-backed IA restructuring and validation testing, we demonstrated that:
Parents navigated more confidently and efficiently
Product offerings were more clearly understood
Learning resources supported progressive engagement rather than isolated browsing
“The redesign opens up a lot of opportunities and really helps us think through what we should prioritize next.”
— Our Client, Tatum
"Once again, thank you all for a splendid presentation. It’s obvious you understood our site and our various needs. I’m so impressed by the depth of your suggested solutions. I know we’ll be spending a lot of time poring over your IA diagram."
— HoP Stakeholder, Donna
The client shared that the redesigned information architecture and navigation made the Learning Resources section feel more intentional and easier to understand, especially in how free content, paid offerings, and next steps were communicated to parents. The team expressed interest in using our recommendations to guide their next round of updates and noted plans to share the work with additional internal stakeholders.
Throughout the final discussion, client questions focused on implementation priorities, content strategy, and how the redesigned experience could scale across future product updates—demonstrating strong engagement and alignment with the proposed direction.
Overall, the project helped reframe the Learning Resources section as a core part of the Hooked on Phonics ecosystem, reinforcing its role in both parent discovery and long-term engagement.
What's next for GT?
To continue strengthening the user experience, we recommend the following next steps to ensure the redesigned Learning Resources experience scales effectively, remains intuitive for parents, and clearly communicates Hooked on Phonics’ product offerings.
Continue iterative user validation
Conduct additional usability testing with a broader group of parents to further validate information architecture clarity, filtering pathways, and understanding of what to explore next for different learning stages.
Technical enablement & backend configuration
Implement backend logic to support enhanced filtering and sorting. Establish database relationships that enable “related resources” recommendations on individual resource detail pages to encourage continued exploration.
Strengthen the product narrative
Redesign the subscription page to align visually and structurally with the updated site experience. Ensure consistent messaging around the $1 trial, bundles, and value proposition across all relevant touchpoints.