MindTap Learning Path


eLearning, UX

A Learning Platform for Digital Natives

Problem to Solve

Robust learning management systems have been around for over a decade. Most college instructors find the learning curve for delivering and administering an online or blended course pretty high. Students get lost in the maze of homework to navigate, and passive learners can easily disengage if they lack self-motivation.

From the business perspective, university students have become savvy consumers and most frequently opt to purchase used books. Higher education publishers have recognized that to stay competitive in the market, digital innovation is a necessity.

Constraints

At Cengage Learning, we built a brand new product from the ground up, and the custom UI framework was iteratively built over time. Our design team needed to be closely aligned as patterns were created and altered every day.

It was essential that the platform be usable and enjoyable on tablets as well as laptops. We needed to plan for integrating content from a number of sources: our new ebook readers, third party apps, the internet, and legacy assessment engines currently in use.

Approach

An early version of working code gave us an agile way to test our assumptions with end users on an iterative basis. Central to the vision was the interplay between assignments and apps. The interface should focus attention on the activity, with tools secondary to minimize distraction. We designed an interaction model that used 3 designated panels to display activities, the learning path or course syllabus, and a collection of apps that could be accessed while working on an assignment. The panels animated as they opened or closed, anchored to their respective edges of the screen.

windowing

The Learning Path went through a number of design iterations. We explored and tested multiple ways to structure and sequence the activities without losing a sense of place. We purposefully constrained the organization of course content to 3 levels to keep the navigation simple to use without getting lost. Affordances were provided for instructors to edit the activities, and metadata for students to track their progress and performance.

We wanted to provide instructors with a great starting place from which to customize. Instructional designers curated courses to align to our textbooks. Instructors could then modify and add their own content through a variety of apps including Flickr images, YouTube videos, SlideShare presentations, Blogs, RSS feeds, and Google Docs. See MindTap Builder for more details.

The core Mindtap tools and third party apps were accessed less frequently than activities, and usually in context to an activity. Search, highlighter, grade book, full text reader, notebook, glossary, dictionary, and Google Docs among other apps were placed in the vertical menu on the right.

Learnings

After the initial launch, we iterated on ways to clean up the design of the learning path to include a three-panel dashboard view to focus attention on the current unit and progress to date, while still indicating what’s to come. Notifications inform the student of late assignments and upcoming due dates. We also learned that it was cumbersome to go back to the Learning Path just to move on to the next activity. The proposed solution was to provide visual indicators of progress within the unit, with an expanding menu to move to the next activity with ease.

Credits

Wendy Constantine, senior ux designer

Many thanks to the collaborative design efforts of:
— Michael Hairston, ux architect
— Scott Whitmore, ux manager
— Rob Dumas, executive director of ux
— Tim Brown, ux designer