Web Design
ABCmouse Games
Project Vision
ABCmouse is a premier educational resource with a massive reach, drawing 3–6 million visits to its games page monthly. The vision for this redesign was to optimize this high-traffic environment by transforming it into an intuitive, highly navigable hub. We aimed to ensure that young learners can easily find engaging, age-appropriate content while streamlining the conversion path for parents to subscribe to the full ABCmouse experience.
Challenges
1) Content Organization: Develop a robust filtering system that categorizes a vast library—part of a platform providing over 13,000 activities—by grade level, subject, and theme.
2) User-Centric Navigation: Create a balanced interface that is simple enough for children ages 2–8 to navigate independently while remaining informative for parents.
3) Conversion Strategy: Integrate non-intrusive, contextual "sign-up" prompts that encourage trial users to upgrade without disrupting the learning experience.
Objectives
Given the platform's high monthly traffic, we approached this redesign with a focus on usability and scalability. By studying top-tier educational platforms like Education.com, ABCya, and PBS Kids, we identified key patterns in how successful sites handle content discovery. We established our design foundation by addressing the following:
"What is the product and who is it for?"
"What do our primary users need most?"
"How can we simplify navigation to reduce cognitive load for millions of monthly users?"
"What are the most effective ways to highlight educational value while maintaining a fun, safe, and ad-free atmosphere?"
"How can we place conversion touchpoints so they feel like helpful resources rather than barriers?"
Competitive Analysis
To better understand the educational landscape, I audited key competitors to evaluate how they handle content architecture and user conversion. Given the high volume of users, even small improvements in navigation and conversion flow have a significant impact on platform growth.
Creating a Framework
To better understand how we would construct the core experience for Game Landing Page, I designed a user flow. This helped us focus more on the experience and needs of the user and less so on the details that we would solidify later on. It also allowed us to communicate the entries and exits more clearly so we would have a better understanding moving forward.
Wireframe
The biggest focus here was the "Search" architecture. I wanted to make sure that the advanced search didn't scare off users who just wanted a quick, one-click answer. I spent a few iterations moving these elements around, testing the spacing, and making sure the "call to action" for the app sign-up felt like a natural part of the page, not just a disruptive pop-up that people would instinctively close.
Games Landing Page
Games Secondary Page
Search Box - Default
Search Box - Active
CHALLENGE 1
Intelligent Search & Filtering
To address the sheer volume of games, I implemented a dual-layered search system.
-
Advanced Search: For users with specific goals (e.g., "Math, Grade 1, Animal Theme"), I designed a multi-filter interaction that allows for complex, granular querying without requiring multiple page refreshes.
-
Quick-Access Filters: To reduce cognitive load, I introduced three distinct, simplified containers. This allows parents or children to find content by a single, primary dimension—be it subject, grade, or theme—in just one click. This approach prioritizes speed and accessibility for users who don’t want to configure an advanced search.
CHALLENGE 2
Strategic Conversion & Engagement
Given the massive traffic volume, we needed a strategy that bridged the gap between free exploration and app subscription.
-
The Conversion Hook: I integrated a context-aware promotional placement within the game feed. Instead of a generic banner, this ad highlights the value of the full application—emphasizing personalized learning paths and progress tracking—to encourage users to shift from web browsing to the more immersive app experience.
-
Content Balancing: By blending engaging game thumbnails with educational context, the UI design keeps the focus on the learning experience while subtly positioning the full ABCmouse membership as the natural next step to unlock additional, deeper educational value.
CHALLENGE 3
Reflections
Redesigning a page with this level of traffic required a delicate balance between UX freedom and business requirements. By simplifying how users find content, we significantly reduced the time-to-play, while the improved conversion placement successfully turned a high-traffic landing page into a robust lead-generation tool.
High-Fidelity UI
Web Experience
Phone Experience
UX Notes and Assets
