ABCMOUSE GAMES
Making education engaging while delivering real learning outcomes.
UX/UI
End-to-End Design
Responsive Design
Accessibility
OVERVIEW
ABCmouse is the most downloaded kids' education app in the U.S. since launching in 2010. Over time user expectations evolved, particularly among new visitors who are busy parents seeking clearer, more immediate value from the product. As the solo UX designer in collaboration with my team, we launched a new experience showcasing Free-to-Play games, improving conversion rates by 13% over the optimized previous experience through data-driven design iterations.
Solo UX/UI Designer responsible for designing the experience end-to-end, working closely with engineering.
PROBLEM
Over the years more educational app competitors have risen alongside ABCmouse, and the product needed a new modern Free-to-Play approach to bring in organic traffic. The existing product page experience was info heavy and required a free trial to see what the product offered. Busy parents needed a more approachable way to experience the product and evaluate educational value without a paywall.
BREAKDOWN OF THE PROBLEM
For baseline comparison, the ABCmouse product page experience was mostly unchanged since launch in 2010.
Design iteration efforts by many teams over 10+ years could not beat its conversion rate.
ABCmouse Games started as a basic UI that engineers built out to get the backend working.
From here, I was responsible for designing an experience that would improve our conversion rates.
SOLUTION
Through data-driven design iterations we launched a new modern Free-to-Play games experience, outperforming the previously optimized product page, resulting in a 13% increase in conversion rate.
PROCESS & STRATEGIC APPROACH
To kick off the process, I conducted market research and a competitive analysis of leading educational game platforms. This helped identify market standards, design patterns, user expectations, areas where our platform lagged behind, and opportunities to stand out from the competition.
My goal was to ensure our solution was a strategic approach, aligning user needs, product, and marketing into a single cohesive experience.
Synthesizing Insights into Actionable Design Goals
Research insights led to core principles that guided design decisions:
✦ Updating Visual Design & Accessibility
The current pages lacked the engaging, modern design found in competitors.
Pushing the product towards modern visual design was necessary to build trust with new users as a leading product and better reflect the brand's educational value.
Also, it was imperative to build with accessibility from the forefront as an equitable learning platform.
✦ Mobile-First Design
With over 50% of our traffic on mobile, prioritizing a responsive, mobile-first design was critical, not just for usability, but also to align with current best practices in digital product design.
✦ Bridge Marketing & Product gaps:
A critical finding was a disconnect between marketing efforts and the product landing experience. Users arriving from specific search queries were often met with a generic homepage.
NAVIGATING CONSTRAINTS
This project presented a unique set of constraints as a company with a long legacy.
➔ Evolving a Legacy Brand
The existing ABCmouse experience was stagnant for over a decade since newer designs could not beat the original's conversion metrics, which created a natural strict resistance to visual change.
My challenge was to demonstrate that usability and conversion could be improved through an updated design without alienating the existing user base.
➔ Designing in a State of Visual Limbo
The project timeline intersected with the very early conceptualization stages of ABCmouse 2.0, a product refresh without a defined style or direction.
This ABCmouse Games project was a bridge between the older established style and a modern step forward into ABCmouse 2.0.
➔ Technical Limitations
Engineering constraints from the legacy codebase required practical solutions.
I prioritized design iterations that offered the highest user impact for the lowest technical cost, ensuring feasibility and maintaining development speed.
With these constraints, in order to push the boundaries and be the bridge between an older design era and into a modern one, it required a phased approach to design innovation through data-backed design iterations.
DESIGN APPROACH
There was no design system and I had to sort through a huge unorganized design asset database spanning 10+ years.
Due to resistance to change, initial designs were constrained by strict adherence to the dated visual style. I introduced small modern design elements and sensibility to be tested.
The scope of interactive and visual innovations also had to be limited since engineering was constrained by existing legacy code and components.
I would begin with a small scope and present a slightly updated design to test against older experiences.
I saw a broader opportunity to have more collaboration with the core product design team.
I initiated efforts to communicate and align on design exploration and patterns, advocating for a more integrated approach to prevent siloed work and push the design language together.
As part of improving the full user experience, we needed to bridge the product experience with marketing gaps, since users arriving from specific search queries were often met with a generic homepage.
To address the marketing-product gap, I collaborated closely with SEO, marketing, product, and development.
✦ We identified high-intent keywords and I designed modular components that could be dynamically served to users based on their acquisition channel.
This closed the loop, ensuring a seamless journey from search result to a highly relevant on-site experience, effectively addressing critical SEO gaps with design.
This strategic, research-backed foundation ensured design iterations were focused on the highest-impact opportunities, directly leading to the successful outcome.
OVERCOMING DEVELOPMENT & TESTING ROADBLOCKS
While our process was strategically laid out, the path to launch and achieving success was not linear. The project faced significant engineering and testing roadblocks that required constant adaptability.
Resource Constraints and Shifting Priorities
Limited Access to Direct User Feedback
01
02
03
SOLUTION
Final Outcome: ABCmouse Games
ABCmouse Games is a new experience showcasing free-to-play games, making education engaging while delivering real learning outcomes.
LASTING IMPACT
My designs for ABCmouse Games were the first to successfully break through boundaries and beat the conversion rate of the ABCmouse product page experience.
This helped to pave the way for pushing design boundaries and moving ABCmouse towards a more modern design.
REFLECTION:
MY THOUGHTS ON THIS PROJECT + LESSONS LEARNED
Key takeaway: By utilizing iterative data-driven design to show impact, I was able to push "unbeatable" boundaries and move a legacy product forward towards modern design without alienating its user base.
Navigating all the roadblocks throughout this project required stakeholder management, strategic negotiation, and creative problem-solving.
There was a lot of doubt and pushback against moving towards a more modern design, but through data-driven design iterations I was able to achieve significant results that ultimately helped users with their goals and also move the brand forward.
Next steps:
Continued iteration and testing towards a better user experience, pushing more interaction and colorful/eye-catching design.
Integrating animation to align with core product experience and add user delight.