Schoology Navigation Redesign

Schoology | 2018
UX Team: Tina Musich and Hana Tran

Schoology is a learning management system that facilitates the learning process for students, teachers, and administrators from k-12 schools and colleges.

When I joined schoology I jumped on the project to redesign the navigation on the website. The effort aimed to simplify and organize the many sections of the website. With the initial research and ideation already completed by previous UXers I worked with a partner to nail down the details of the information architecture, user experience, and visual design.

The Goals

1. Students, Teachers, School Administrators, and Parents all use Schoology. Different motivations and goals meant that a one-size-fits-all approach wouldn't provide the best experience for our users

2. Our students, teachers, and administrators are using all kinds of devices in all different places. Students use their smartphones to do homework while teachers use laptops to grade assignments. As we worked to make pages responsive the navigation needed to support the different screen sizes as well.

3. Make Schoology useful to all learners and educators by ensuring an accessbile navigation.

Data-Informed Design

Using behavioral data from the application, Pendo, we determined the most used elements of the website. I made an inventory of all of the pages and created a document to keep track of the information architecture decisions.

A heat map view of current site useage that helped us prioritize and structure the new site navigation.

User Research

While some user research had been conducted before I joined this project, we still needed to investigate the rest of our open questions. The biggest one I had was how to structure our system admin tools that used to exist on the left hand menu. I started by understanding how often they use the different pages and when in their workflow they perform different activities. Next we showed some concepts.

Information Architecture

The combination of user research and usage data helped me to build the information architecture for the new Schoology navigation.

I broke out the different navigation elements like the calendar, resources, and apps for each user type and all screen breakpoints. As the screen size gets smaller the least utilized elements get hidden into a deeper menu.

Final Solution

After the research and strategic information architecture decisions, we started on the interaction and visual design work

The new, responsive navigation optimized usability on all form factors.

The new, responsive navigation optimized usability on all form factors.

Live Testing

After most of the development was completed, I conducted 8 usability testing sessions with a mix of participants ranging from System Admins to Teacher to Students. The entire team including developers, QA, and product managers were invited to watch as users navigated around the site using our new system. The most prominent feedback was the notion that it wasn't much different than it was today. For us that was a definite win. We were not looking to disrupt our users, but to open the doors to more site functionality - like an optimized experience across breakpoints. Our solution

Screenshots of some user sessions we had to evaluate the implemented solution

Successes

  • Jumping in to the middle of the project and delivering it in time for the new school year with a cross-fuctional team.
  • Achieving our goals of accessibility and supporting views across breakpoints.

Challenges

  • Working with a budding design system - some new developers were unfamiliar with the design system which lead to creating duplicate components.
  • Working quickly in a new industry at a fast-paced startup. Having come from larger companies the speed of working was something I had to get used to but ended up being extremely rewarding.

Other Projects

Diabetes: What is it?

The Sunday New York Times

One Week

Surgical Scheduling and Inventory