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.
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.
(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
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
Our product fits into 3 areas of the teacher's day:
Our product has 3 core interaction areas and several secondary features I designed for:
Users can browse and search through all of ABCmouse's 9,000 learning activities and save selected activities to a playlist.
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.
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.
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.
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.
This led to a second concept combining the class and group views, with class selection affecting group selection, and vice versa.
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?