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.

aofl_portfolio.jpg
 

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

teacher.PNG
 

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:

aofl_portfolio6.jpg
aofl_portfolio7.jpg
 

Feature: Creating Learning Content for Students

aofl_portfolio8.jpg
aofl_portfolio8.jpg

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.

aofl_portfolio11.jpg

Final product with UI applied:

aofl_portfolio9.jpg
 

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 .

aofl_portfolio12.jpg
 

Step 2: Ideation & Prototyping

search-standards-5b.gif
 
search-standards-9.gif
 
search-standards-CCSSv3.gif
 
search-standards-CCSSv9-popup.gif

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

TME_search-by-standards_low.gif
 

Feature: Assign Playlists to Students

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

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

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

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

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

assign_10_class.gif
assign_10_group.gif
  • 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

assign1.png
 

Assign Playlists to Students for Mobile

TME_assign_low.gif
 

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.

monitor_scan-dates_low.gif
 
  • 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_drilldown_low.gif
 

Monitor Student Progress for Mobile

TME_monitor_low.gif
 

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

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

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

 
preview-playlist_single_UI.png
  • 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_free.png
 

Class Roster for Mobile

TME_add-student_low.gif
 

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

ABCMFS_library1.png
ABCMFS_library2.png
ABCMFS_library3.png
ABCMFS_library4.png