Streamlining Course Schedules

A streamlined internal workflow and improved user experience makes a key feature on an EdTech website better for learners and the business alike.

Overview

As a provider of live online courses, Blueprint displays schedules and relevant course information for upcoming classes on their eCommerce site. This project was to standardize and automate the schedules so they wouldn’t require frontend dev work.

Role

As the only UX designer on the eCommerce team, I had ownership over designing a standardized UI that would be used across the site, which included identifying issues with the existing state that informed the design, and delivering full documentation to the dev team.

Results

Users benefited from improved usability, especially for mobile devices, and decrease cognitive load while the business benefited for lower operation costs and increased visibility of a key differentiator of their live courses.

Problem

Course schedules were manually maintained by a front end developer through a cumbersome process of spreadsheets and a game of cross-functional telephone, increasing chance for error. The UI also posed challenges to users with a lack of responsiveness and high cognitive load.

Background

As a provider of live online courses, Blueprint lists upcoming course schedule information on their eCommerce site so users can find a course that works for their schedule before they purchase course access.

Blueprint Prep is an EdTech company that provides various materials and programs for exam preparation for tests like the LSAT and MCAT. One of their most popular product offerings are live courses, which are remote classes, taught by 2 instructors via Zoom and last anywhere from 4 to 16 weeks. In order to communicate available courses to potential learners, Blueprint lists upcoming classes and schedules for students to peruse on their eCommerce website. To enroll in a particular course schedule, the learner must purchase a duration of course access and can enroll in a course schedule with a particular set of instructors during onboarding. Class sizes are not capped and generally range from 150-200 students. This is uncommon in the industry as most providers have users enroll in a certain course schedule at purchase.

The Problem

About the project

An effort to automate live course schedules provided an opportunity to create a new responsive component that better communicates course details.

To keep course schedule up-to-date, a cumbersome, manual workflow crossed between Operations (who determines course schedules, coordinates staffing, and uploads new courses to the LMS) and eCommerce (who was sent this information to update on the site). This workflow was identified as a drain on company resources and potential opportunity for improvement. The current state of the course schedules yielded the following issues:

  • High cost of maintenance across teams

  • Costs exacerbated by different styling of course schedule instances across website

  • Manual updating and clumsy handoff increased chances of human error

  • Delay between course additions and publishing of courses to the site, allowing for lost sales

  • Poor mobile responsiveness and accessibility

The Approach

What We Did & Why

We had some existing user research to draw from and competitor sites were analyzed, but the bulk of the work for this project was understanding how we were constrained by the LMS and how it integrates with the eCommerce site.

  • In collaboration with front- and backend developers, we discovered that because of the way the LMS is set up, enrollment is required to happen after purchase and users can not secure a seat in a class schedule at purchase. We also learned what existing input fields are used by the Operations team to add and update live classes in the LMS that could be pulled in dynamically to the new experience.

  • 5 out of 7 former students interviewed in a 2022 UX study reported that one of the most important parts of their pre-purchase research process is exploring the course schedules and finding a course that fits their busy schedule and desired test date. A couple of users expressed confusion about how the information on the schedule was presented and how to sign up once they found a course that worked with their schedule.

  • We identified common design patterns in direct competitors to understand what kind of experiences users were having during their research process. Most competitors and other online providers of remote courses allow users to purchase off of a schedule component, which suggests that enrollment and purchasing happens at the same time. This is unlike Blueprint, where the product technology dictates that users purchase an access duration SKU and then enroll in a course when they build their study plan within the LMS.

First Iteration

Due to tight technical constraints, wireframing and prototyping were not terribly complicated for this project and only a couple of iterations were required (most discussion surrounded how to represent the instructors and if there should be one or two shown). However, it was important to present and discuss the designs for change management with stakeholders since many people had been consulted about the project. Anyone involved in discovery meetings was given access to the prototype with rationale for design decisions so there were no surprises when the widget went live.

The Solution

We released a site-wide responsive schedule widget with improved usability that syncs twice daily with the LMS for updates and additions to course schedules.

What improved?

Mobile-Friendly

We introduced the first mobile-specific component for the course schedules that vertically stacks the fields to maintain legible font size on smaller screens.

Clearer Time Information

The day and time fields were combined to reduce the cognitive load that was put on users to determine what time went with what day.

Highlighted Differentiator

The new component lists the names, bios, and headshots of both instructors, giving visibility to Blueprint’s unique 2-instructor model.

Afforded Interaction

The chevron icon and a dropshadow afford clicking or tapping so users know that interaction will provide more detail on the course.

Improved Scanning

Test month became the overarching structure for upcoming courses, which naturally “chunked” the classes so users can quickly scan for relevant courses.

Regular Syncing

The new widget was automated to sync all relevant information with the LMS every 12 hours so users are always seeing the most up-to-date information on course schedules.

The Outcome

The project was successful in what it set out to do, but ultimately didn’t solve for the root problem of the experience: enrollment management.

Wins for the business

  • Lower operation costs for schedule management - for Operations in maintaining spreadsheets as well as front end development

  • Stakeholders were pleased with the cleaner aesthetic and attention on the 2-instructor model

Wins for the learner

  • From heatmap data, the schedules are often the area of the page with the most engagement

  • Improved scanning to find relevant courses faster

  • Able to see bios for both instructors, instead of just one.

While there were certainly wins for everyone involved, the course schedule project was mostly lessening symptoms of a more systemic problem: the way the product was set up for purchase is incompatible with the way users want to purchase. This has to do with the crucial factor of enrollment: the product was engineered so users must purchase and then enroll, whereas evidence from user interviews, support chat logs, session recordings, and common industry patterns suggest that users prefer enrollment and purchase to happen at the same time.