Macmillan Case Study

Converting Complex Flash Based eLearning Courses to HTML5

Macmillan le chateliers interative

My role | 2018

  • UI/UX design
  • Prototypes

Macmillan is a publisher undertaking a multi-year effort to integrate new products and older acquisitions into a consolidated tech platform with a unified design language. On these projects I worked on:

  • Performing user testing
  • Designing high-fidelity mockups

THE PROBLEM

Complex chemistry interactive features were developed using Adobe Flash and modern web browsers do not support Flash assets. Redesigned chemistry interactives needed to be accessible, responsive and integrate into the design of a new Macmillan tech platform.

The challenge with redesigning each interactive features was that they were game based or game-like activities that needed to be redesigned to teach the same concepts in a format that is mobile compatible and meets Web Content Accessibility Guidelines (WCAG) AAA accessibility standards.

Also, these interactive features were embedded into e-learning platform (CMS) that must decide decide how much screen space to give the embedded components or if they should be displayed at all.

Old chemistry interactive

This legacy interactive(above) had color-contrast issues
and insufficient touch target size for controls.

Old chemistry interactive with drag and drop

This interactive (above) uses drag and drop which is a complex accessibility challenge.

Metabolic map image viewer

The visual synthesis map displayed an illustration in an image tile viewer program that was outdated and not touch-friendly or accessible.


THE OPPORTUNITY

We could approach the problem in a reductionist way and redesign each interactive component individually. Or we could approach the problem in a more holistic way and redesign the behavior of the container where these components were embedded.

In the end, we decided to do both. At the component level, I redesigned a chemistry interactive that teaches Le Chatelier’s Principle. At the container level, I designed two different solutions. The first was “Graceful Degradation” adding a warning the user and allowing them to choose how to proceed. The second was creating an alternate text-based experience that would be accessible and mobile friendly. Design, prototype and user tested four prototypes:

  • Le Chatelier’s Principle interactive
  • Metabolic Map interactive
  • “Choose your own adventure” interactive
  • “Graceful degradation” strategy

Exploration and Iteration

Le Catelier's Principle interactive old / new

Le Chatelier’s Principle interactive was redesigned to enhance color contrast and provide tap-frienly buttons and sliders that can be manipulated with screen readers. Aria text allows the states of the interactive to be read to screen reader users as the status changes. I designed three breakpoints for this interactive.

Le Catelier's Principle interactive  showing animation

Motion study (above) showing how particles would animate. The animation would be hidden on the smallest breakpoint.


Conductivity interactive old / new

The choose your own adventure strategy is to provide a link underneath each interactive that provides a text-based version of the game. Each step of the scenario begins with text descriptions of what is pictured in the images and the learner makes choices about how to manipulate the experimental objects by tapping or clicking an option link underneath each step. Text-based experiments are both mobile-friendly and more accessible than the legacy content.


Conductivity interactive old / new

The graceful degradation prototype shows how a semi-transparent overlay with a “simulation button” would float over the legacy content. Tapping on the content on a device that cannot display it would allow the user to choose between trying it anyway or watching a video. For each of the simulations treated in this way, a content expert would create voice-over a screen capture of a user using the virtual experiment. The video could be encoded with closed captions. The voice over would describe what is being shown, how it is changing and why.


New metabolic map

The Metabolic Map was redesigned with a tap-friendly menu and navigation buttons. Menus and sliders are HTML5 based and can be manipulated by screen readers. Color contrast and readability has been increased throughout.


USER RESEARCH

I performed Zoom-based user interviews with college students on each interactive. We would allow each learner to play around with the interactive to observe their organic behaviors, then we would ask them direct questions to assess their understanding. In each test we wanted to know:

  • Can learners find all the controls?
  • Do learners understand the controls?
  • Does the interactive still teach the concept?

After each user test I turned insights into new designs and tested the new designs with new learners.


OUTCOME

Results and what I learned:

  1. It can be difficult to condense college-level science concepts into palatable chunks that can work well on mobile.
  2. Technical and budget constraints were challenging, but I still advocated for what I believed was essential to improving the user experience.

Chemistry interactive prototypes:

Le Chatelier’s Principle Mobile Breakpoint: Invision Prototype
Le Chatelier’s Principle Tablet Breakpoint: Invision Prototype
Metabolic Map Prototype: Invision Prototype

Holistic solution prototypes:

Choose your own adventure prototype: Invision Prototype
“Graceful Degradation” Prototype: Framer.js Prototype


#ui #interaction #accessibility #web_app