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.

ROLE

ROLE

Solo UX/UI Designer responsible for designing the experience end-to-end, working closely with engineering.

TEAM

TEAM

Solo designer, 2 Engineers, 1 SEO CEO, 1 SEO Expert, 2 Copywriters

Solo designer, 2 Engineers, 1 SEO CEO, 1 SEO Expert, 2 Copywriters

TOOLS

TOOLS

Figma, Adobe Creative Suite (Illustrator, Photoshop, After Effects, etc), Wordpress, Jira

Figma, Adobe Creative Suite (Illustrator, Photoshop, After Effects, etc), Wordpress, Jira

COMPANY

COMPANY

Age of Learning

LIVE SITE

LIVE SITE

ABCmouse Games

💌 Get in touch for more details.

💌 Get in touch for more details.

💌 Get in touch for more details.

💌 Get in touch for more details.

💌 Get in touch for more details.

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

📚

Busy parents need a way to try out ABCmouse without signing up for a trial.

Parents with limited time and energy want to evaluate the value of ABCmouse without committing.

📚

Busy parents need a way to try out ABCmouse without signing up for a trial.

Parents with limited time and energy want to evaluate the value of ABCmouse without committing.

📚

Busy parents need a way to try out ABCmouse without signing up for a trial.

Parents with limited time and energy want to evaluate the value of ABCmouse without committing.

📚

Busy parents need a way to try out ABCmouse without signing up for a trial.

Parents with limited time and energy want to evaluate the value of ABCmouse without committing.

🕹️

User expectations changed in an age of Free-to-Play.

Most gamified educational experiences now have a Free-to-Play model. New users expect this more seamless experience without commitment.

🕹️

User expectations changed in an age of Free-to-Play.

Most gamified educational experiences now have a Free-to-Play model. New users expect this more seamless experience without commitment.

🕹️

User expectations changed in an age of Free-to-Play.

Most gamified educational experiences now have a Free-to-Play model. New users expect this more seamless experience without commitment.

🕹️

User expectations changed in an age of Free-to-Play.

Most gamified educational experiences now have a Free-to-Play model. New users expect this more seamless experience without commitment.

🕹️

User expectations changed in an age of Free-to-Play.

Most gamified educational experiences now have a Free-to-Play model. New users expect this more seamless experience without commitment.

💻

Dated User Interface

The original product page experience, mostly unchanged and unbeatable in conversion metrics since launch in 2010, was one long page of info. This created friction for users and a barrier for busy parents evaluating the program.

💻

Dated User Interface

The original product page experience, mostly unchanged and unbeatable in conversion metrics since launch in 2010, was one long page of info. This created friction for users and a barrier for busy parents evaluating the program.

💻

Dated User Interface

The original product page experience, mostly unchanged and unbeatable in conversion metrics since launch in 2010, was one long page of info. This created friction for users and a barrier for busy parents evaluating the program.

💻

Dated User Interface

The original product page experience, mostly unchanged and unbeatable in conversion metrics since launch in 2010, was one long page of info. This created friction for users and a barrier for busy parents evaluating the program.

THE OLD EXPERIENCE

THE OLD EXPERIENCE

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.

📚

Experience ABCmouse outside the paywall

Busy parents can immediately evaluate the experience of ABCmouse through educational games, reducing perceived risk before sign-up.

📚

Experience ABCmouse outside the paywall

Busy parents can immediately evaluate the experience of ABCmouse through educational games, reducing perceived risk before sign-up.

📚

Experience ABCmouse outside the paywall

Busy parents can immediately evaluate the experience of ABCmouse through educational games, reducing perceived risk before sign-up.

📚

Experience ABCmouse outside the paywall

Busy parents can immediately evaluate the experience of ABCmouse through educational games, reducing perceived risk before sign-up.

🕹️

Curated Free-to-Play games

I led UX design and our team curated games through an SEO based approach, targeting the most searched-for kids educational queries.

🕹️

Curated Free-to-Play games

I led UX design and our team curated games through an SEO based approach, targeting the most searched-for kids educational queries.

🕹️

Curated Free-to-Play games

I led UX design and our team curated games through an SEO based approach, targeting the most searched-for kids educational queries.

🕹️

Curated Free-to-Play games

I led UX design and our team curated games through an SEO based approach, targeting the most searched-for kids educational queries.

🕹️

Curated Free-to-Play games

I led UX design and our team curated games through an SEO based approach, targeting the most searched-for kids educational queries.

💻

Pushed design towards modern sensibilities

We created a new user experience aligned with modern design best practices such as mobile first design and accessibility at the forefront.

💻

Pushed design towards modern sensibilities

We created a new user experience aligned with modern design best practices such as mobile first design and accessibility at the forefront.

💻

Pushed design towards modern sensibilities

We created a new user experience aligned with modern design best practices such as mobile first design and accessibility at the forefront.

💻

Pushed design towards modern sensibilities

We created a new user experience aligned with modern design best practices such as mobile first design and accessibility at the forefront.

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

✦ My approach:

✦ My approach:

I adopted a strategy of incremental modernization, slowly introducing evidence-based design elements to build concensus and demonstrate value, ultimately helping pave the way for the broader ABCmouse 2.0 rebrand initiative.

I adopted a strategy of incremental modernization, slowly introducing evidence-based design elements to build concensus and demonstrate value, ultimately helping pave the way for the broader ABCmouse 2.0 rebrand initiative.

I adopted a strategy of incremental modernization, slowly introducing evidence-based design elements to build concensus and demonstrate value, ultimately helping pave the way for the broader ABCmouse 2.0 rebrand initiative.
I adopted a strategy of incremental modernization, slowly introducing evidence-based design elements to build concensus and demonstrate value, ultimately helping pave the way for the broader ABCmouse 2.0 rebrand initiative.

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.

Halfway through the project, the very early conceptualization stages of an updated ABCmouse 2.0 experience began, and we decided to move forward with more modern design changes.

Halfway through the project, the very early conceptualization stages of an updated ABCmouse 2.0 experience began, and we decided to move forward with more modern design changes.

Halfway through the project, the very early conceptualization stages of an updated ABCmouse 2.0 experience began, and we decided to move forward with more modern design changes.

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.

Executing on SEO: Designing for Discoverability

Executing on SEO: Designing for Discoverability

Executing on SEO: Designing for Discoverability

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.
Our strategic approach coupled with a new design brought us to being the first to successfully break through boundaries and beat the conversion rates of the original ABCmouse product page experience.

Our strategic approach coupled with a new design brought us to being the first to successfully break through boundaries and beat the conversion rates of the original ABCmouse product page experience.

Our strategic approach coupled with a new design brought us to being the first to successfully break through boundaries and beat the conversion rates of the original ABCmouse product page experience.

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

Engineering resources were often deprioritized for this project due to lack of staff. Combined with the technical limitations of the legacy infrastructure, this required designing solutions that delivered maximum user impact with minimal engineering lift.

Engineering resources were often deprioritized for this project due to lack of staff. Combined with the technical limitations of the legacy infrastructure, this required designing solutions that delivered maximum user impact with minimal engineering lift.

Limited Access to Direct User Feedback

A significant roadblock was the inability to conduct direct, moderated usability testing.

Our primary validation method became A/B testing through the engineering team's workflow. This forced a rigorous, data-driven approach where every design hypothesis had to be translated into a clear, testable metric. While not ideal, it honed our ability to define success criteria upfront and rely on quantitative data to guide iterations.

A significant roadblock was the inability to conduct direct, moderated usability testing.

Our primary validation method became A/B testing through the engineering team's workflow. This forced a rigorous, data-driven approach where every design hypothesis had to be translated into a clear, testable metric. While not ideal, it honed our ability to define success criteria upfront and rely on quantitative data to guide iterations.

SIGNIFICANT OUTCOMES

SIGNIFICANT OUTCOMES

Key Results from A/B Testing

Key Results from A/B Testing

Key Results from A/B Testing

01

Delivered results that converted 13% better than the optimized ABCmouse product page experience, beating out any other tests done in 10+ years.

Delivered results that converted 13% better than the optimized ABCmouse product page experience, beating out any other tests done in 10+ years.

Delivered results that converted 13% better than the optimized ABCmouse product page experience, beating out any other tests done in 10+ years.

02

The newest design iteration doubled our team's conversion rate.

The newest design iteration doubled our team's conversion rate.

The newest design iteration doubled our team's conversion rate.

03

We successfully acquired more users through an improved experience, demonstrating product value before committing.

We successfully acquired more users through an improved experience, demonstrating product value before committing.

We successfully acquired more users through an improved experience, demonstrating product value before committing.

SOLUTION

Final Outcome: ABCmouse Games

ABCmouse Games is a new experience showcasing free-to-play games, making education engaging while delivering real learning outcomes.

Curated free-to-play educational games.

Curated free-to-play educational games.
Curated free-to-play educational games.
Curated free-to-play educational games.
Curated free-to-play educational games.

GO TO LIVE SITE

ABCmouse Games

LASTING IMPACT

Delivered results that increased conversion rate by 13% more than the optimized ABCmouse product page experience.

Delivered results that increased conversion rate by 13% more than the optimized ABCmouse product page experience.

Delivered results that increased conversion rate by 13% more than the optimized ABCmouse product page experience.

  • 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.