ABCmouse for Schools is a consumer-facing SaaS product for classroom management and individualized learning.

It’s a tool for educators to leverage child-facing, educational apps.


Top Level Goals

  • Increase User Engagement: educators who use ABCmouse = parents who buy ABCmouse

  • Ensure features align with educators needs and universal truths


Educator Universal Truths

  • Teachers are starved for time

  • Differentiation (teaching students with different learning abilities) is the hardest thing to do

  • No matter how shiny the product, teachers will not use it if it doesn't make their life easier

    *Consideration: many using our product on outdated devices


The Context

Our product fits into 3 areas of the teacher's day:

"Center time" - students use the app in class individually, in 15 - 30 min sessions

"Center time" - students use the app in class individually, in 15 - 30 min sessions

"Whole group instruction" - the teacher is in front of the class

"Whole group instruction" - the teacher is in front of the class

"At-home use" - students use the app at home, individually or with a parent

"At-home use" - students use the app at home, individually or with a parent


The Product

I shipped several features across 3 core interaction areas:


Feature: Creating Learning Content for Students


My Playlists

  • Designed a personal library of custom-made content teachers can assign to students

  • Filtering capabilities

  • Includes flows for creating/editing playlists

Wireframes for searching activities and reviewing/re-ordering activities.


Final product with UI applied:


Feature: Search Content by State Mandated Standards

State standards are the measuring stick of teacher performance. Implementing their dense, hierarchical outline of educational concepts was a complex challenge for our product.


Step 1: Understanding the Content
Standards are written as outlined documents for each subject, hardly user-friendly. I had to digest these documents and think how to present them as a compact search filter .


Step 2: Ideation & Prototyping


Step 4: Validation

  • This iteration combining the compact filter area and separate window proved best for dispensing the right information in different stages.

  • It received pushback from stakeholders with its less traditional pattern but after validating with user-testing, I was able to make a case that while requiring more clicks and seeming more complex, teachers preferred the way it segments the information, “zooming in” for the task of reading standards, and “zooming out” when they’re ready to shift focus to activities.


Search by Standards for Mobile


Feature: Assign Playlists to Students

  • This feature covers assigning content to students for learning

  • Content will populate the student devices

  • Users should be able to assign by class, group, or individual student

Step 1: Ideation

Concept 1: Chronologically requiring class selection first.

  • The initial sparseness of the page was jarring and unimpressive; default state looks like the page hasn’t loaded.

  • If users switch to another class, would they expect their initial selection to clear? This makes the Selected Students summary on the right necessary, which creates redundancy for users with only 1 class.

  • Is it intuitive to switch between classes via dropdown menu?

  • What about class Groups?


Concept 2: Putting all classes on one page, adding group buttons that act as filters.

  • Listing all classes makes for a better empty state.

  • Design maintains simplicity by collapsing the class’s students; users can easily select an entire class to assign

  • User will see their created groups as buttons, which act as filters. This allows users to select groups and individual students simultaneously.

  • In testing, the buttons proved to be confusing


Concept 3: Split assigning into 3 separate paths

  • Above: Concept 3, assign by class

  • Splitting the flows meant more clicks but felt more simplistic.

  • This design worked well for multi-class users but felt odd and redundant for single class users.

  • Above: Concept 3, assign by group

  • It was important to find a UX pattern that fit all 3 flows: assigning to classes, groups, individuals. I wanted to avoid having users learn 2 different patterns

  • The separate interactions of checking which students were in a group vs selecting the group proved confusing; the expectation was that selecting a group meant assigning it.


Concept 4: The final solution

  • Above: Concept 4, assigning by class and groups

  • Users must commit chronologically how they wanted to assign: by class, group, or individual student

  • This first choice allows the following flows to be simplified.

  • I went for the simplest layout - a single scrolling list, with students listed alphabetically

  • Similar to the Search by Standards feature, the method of parsing information in chronological, simplified steps proved to be the right approach for our users.

Below: Final UI


Assign Playlists to Students for Mobile


Feature: Monitor Student Progress

  • Once teachers assign learning content, the Monitor feature lets teachers check which assignments have been completed at the class and individual level

  • Colorful information graphics inform teachers at a glance.

  • Documentation of student progress in the classroom is a time-consuming chore.

  • The monitor feature automatically tracks student progress, rendering a detailed report of time and educational content consumed, that teachers can print with a single click


Monitor Student Progress for Mobile


Feature: Collections

  • In addition to users creating their own content, users can search through libraries of premade content

  • Quick-assign to an entire class, group, or individual student

  • Above: Final UI design for Collections Landing Page. Each box represents a content a library.

  • Designed each library item to work with a back-end management system that automatically populates the icon, color, and library name

  • It was important to design the Collections feature with localization in mind; design had to be open-ended enough to work with multiple types of content but still look robust in content

  • Above: Final UI design for a Collection Library, with example lesson content

  • Designed to work with back-end management system that automatically populates the content and search filters.

  • Below: see design for individual lessons

  • Above: individual lesson from a Collection

  • Designed to work with back-end management system, populating the title, description, activity types, and activity item


Feature: Class Roster

  • Add, edit, delete students

  • Edit and filter student information

  • Set individualized learning levels


Class Roster for Mobile


Feature: Manage Student Groups

  • Users can build students of groups

  • Built from user behavior of using groups for individualized learning

Manage Groups - group created.png

UX/UI Pattern Library

  • For every new feature, I was responsible for re-using or adding additional UX/UI patterns to the Style Guide and UX/UI pattern library file

  • This style guide was shared/maintained with 2 other staff designers