sgy-nav@2x (2).jpeg

Schoology Navigation

Schoology Navigation

As Schoology grew in features, the original navigation structure and information architecture could not sustain the growth, resulting in a cumbersome experience lacking hierarchy, focus and any discernible order. Global links were presented in the top navigation, left homepage navigation and other unexpected areas. Menu items with low, seasonal usage had prominent placements on the interface. Links irrelevant to specific user groups were prominently displayed.

Additionally, the experience had become dated, and not accessible, and for an LMS (Learning Management System) that focuses on K-12 (Kindergarten to 12th Grade) audiences, not emotionally appealing.

The Opportunity

  • Improve overall satisfaction for existing customers by prioritizing high usage items and reprioritizing items with less priority.

  • Improve internal efficiency through implementation and roll-out of fully responsive navigation/footer and scaling/site performance improvements.

  • Simplify and improve site navigation for users of all ages by re-grouping and simplifying the architecture and information.

  • Update visuals to match Schoology's new branding and become fully accessible.

  • Introduce and promote Schoology's "New visual Experience" to prospects and existing customers.

sgy-navigation-2.png

Process

First we identified the specific navigational items that were relevant to each of our user segments (Administrators, teachers, students, and parents). We knew that each of our user segments had different needs and we needed a way to simplify the navigational items for all of them. In the current navigation, all our users had access to most of the same links and flows.

sgy-navigation-3.png

We wanted to break them up, and give our users a more direct and personable experience that better aligned with their workflows.

We conducted research by pulling data from our analytics tool (Pendo.io) and learned that our users only interacted with a handful of options in their workflows. Admins mostly used setup flows, school settings and user settings. Teachers were only interested in items like Gradebook, and user management but all of these options were intertwined with each other in the current interface.

sgy-navigation-7.png

We used that information to design an updated interface with new workflows that aligned more with how our users were actually using the product.  Using this updated design, we held 25 user interviews and ran unmoderated tests with the information architecture. We also used analytics again to answer some remaining questions about new flows like ”where do admins go for important tools and settings?” and “where do you go if you wanted to add a course?”.

sgy-navigation-4.png

Once we validated our concept and information architecture, we started designing the user interface with a mobile first approach, since this is how the majority of our students access the site.

sgy-navigation-5.png
sgy-navigation-13.png
sgy-navigation-1.png

What We Learned

  • Not all users with admin access actually used the admin pages. Many users had access to admin tools in any given organization, however only a small number of users may be using the other tools. The limitation on permissioning forces districts to add system admin privileges to users who may only need access to one tool or a page.

  • Items such as “add a course”, “reorder course” and “join a course” were not needed in the forefront of the navigation. These items linked to features that had seasonal usage patterns, and were not relevant to a large subset of the user base (Enterprise users)

  • Students were drawn to the new interface and were happy to see the change. They compared the updated visuals to application trends like Facebook’s notifications and messaging features, and Pinterest style cards.

sgy-navigation-7.png

After final designs and implementation, we did a final round of usability tests with a live version of the developed site navigation for validation. We wanted to make sure that teachers and students were able to use the new navigation with a set of tasks before releasing to the general public for the new school year.

sgy-navigation-11.png

What We Accomplished

  • Improved user experience and information hierarchy.

  • Usable across all form factors.

  • Updated user interfaces that were designed within the framework of our Design System (Backpack).

  • The learning curve for interacting with the new navigation was minimal. Users were happy with the changes and mentioned that they were confident they would be able to find what they needed when using it.

sgy-navigation-10.png
sgy-navigation-8.png
sgy-navigation-9.png

Next Steps

  • An intuitive experience for parents who use Schoology. Currently the experience is outdated and confusing to the parents. They don’t know if they are seeing what their children are seeing, or if it’s a custom experience.

  • Updated experience for how a student/ instructor would use the calendar in the navigation.

  • A way for customizing visual branding for school districts (currently this is done manually through customer support).

  • Design and build an experience that will work for elementary students.

  • Options for sorting cards in courses/ groups (re-ordering).

  • Native apps experiences - What will this look like with our native apps? (iOS and Android).

sgy-nativeapp.png