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
Our product fits into 3 areas of the teacher's day:
I shipped several features across 3 core interaction areas:
Feature: Creating Learning Content for Students
Designed a personal library of custom-made content teachers can assign to students
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
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
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