The following is my work as a UX/UI designer for Age of Learning's schools product, ABCmouse for Teachers. ABCmouse for Teachers is a web-based application allowing teachers to utilize Age of Learning's educational content, an expansive 9,000+ e-books, puzzles, videos, and games accessible by desktop or mobile.

aofl_portfolio.jpg
 

My team's high-level goals were to:

A. Acquire teacher signups - expand user base

B. Increase Teacher Engagement - we want teachers actively using our product in their teaching methods

C. Target Parent Communication - our business model is to provide the teacher product for free, giving students access to a "light" version of the product. When parents see what their child is doing, they end up subscribing to the premium version.

 

My Responsibilities

  • (First and foremost) Make sure all features align with the teacher's goals and needs

  • Brainstorm ideas with product owner (flow diagrams, wireframes, prototypes, mockups)

  • Shape the brand; establish usability patterns

  • Handoff designs to development team

  • Follow up with QA team and developers to ensure design standards

 

 
 

The User

Teachers are complex users - their subject matter, methods of teaching, level of tech-savvy, and classroom resources all vary, but there are a set of 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

 
aofl_portfolio2.jpg
 

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

Our product has 3 core interaction areas and several secondary features I designed for:

aofl_portfolio6.jpg
 
aofl_portfolio7.jpg
 

Plan

aofl_portfolio8.jpg
aofl_portfolio9.jpg

 

 

Build Playlist

Users can browse and search through all of ABCmouse's 9,000 learning activities and save selected activities to a playlist.

aofl_portfolio8.jpg

 

My Playlists

The dedicated spot for user-curated content; this is where teachers build, edit, or assign playlists for center time, whole group instruction, or at-home use.

Build Playlist iterations

When searching for activities, the required filter sets were expansive outlines of information that opened in a flyout pattern (Age of Learning Taxonomy.) In the future, more filters would be added. Coupled with an added timeline area to drag and drop activities, It was a struggle to keep the page clean and not overwhelming for users.

 

Ultimately, I split the flow into 2 steps: searching for activities, and reviewing/re-ordering activities. Users can navigate between the 2 steps as needed.

aofl_portfolio11.jpg
 

Search by State-mandated Standards
The most challenging part of the search feature was adding the ability to filter by state-mandated standards, a dense hierarchical outline of educational concepts. Further complicating matters, certain states share the same standards system while others adopt their own, requiring the design to have flexibility.

Teachers are held accountable for teaching students standards, making the ability to search by standards a key feature for our product.

 

The Content
Standards are written as outlined documents for each subject. Digesting the information alone proved a monumental task, let alone fitting the data into the compact search filter area.

aofl_portfolio12.jpg
 

Prototypes

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

Assign Playlists

Once a user has created a playlist, they can assign it to their students as a lesson.

Students will see lessons pushed to their interface.

Assign Playlist - Concept 1

Users can assign in 3 ways: by class, group, or individual student. My first concept was a modal with a view for each type. Considering multi-class support, there was a concern that the user would not know which group belonged to which class, or which individual student belonged to each group or class.

aofl_portfolio12.jpg
 

This led to a second concept combining the class and group views, with class selection affecting group selection, and vice versa.

aofl_portfolio13.jpg

I struggled to make an elegant solution that allowed users to see which students were in each group or class without feeling crowded and redundant in listing the class name. The class was both a label and a selectable item. I tried a second concept

 

Assign Playlist - Concept 2

My second concept navigated to a separate page, requiring the class selection first. The initial sparseness of the page was jarring and unimpressive. It also raised several questions about assigning to multiple classes.

  • If they switch classes mid flow, would they expect their initial selection to clear?

  • Was it intuitive to switch through classes via dropdown menu?

  • Would users want to see a summary of their selection from multiple classes?

aofl_portfolio14.jpg

Assign Playlist - Concept 3

The final solution was a modal that forced the users to commit to how they wanted to assign: by class, group, or individual student. Having the choice first simplified the selection layout for all 3 flows.

assign1.png
 
 

Search Content Libraries - search through a library of ABCmouse-curated playlists

Plan_UI_filled.png
 
collection_default_UI.png
 
preview-playlist_single_UI.png
 

Class Roster - add, edit, delete students, set app learning levels

class-roster_free.png
 

Manage Groups - create groups of students for assigning

Manage Groups - group created.png