Macmillan Case Study

Converting Complex Flash Based eLearning Courses to HTML5

My role | March 2018-July 2018

• UX design
• Prototypes
• Final visual design

Team

• Kelly Lancaster, Product Manager
• Jose Gomez, Developer
• Damien Brockmann, Developer
• Jerry Lee, Developer
• Jeff Sims, Developer
• Quinn Kahus-Saccio, Design
• Erin Randall, Scrum Master

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 Adobe Flash chemistry interactive features would not work once web browsers fully phased out support for Flash. Redesigned chemistry interactives needed to be accessible, responsive, and integrate into the design of a new Macmillan tech platform.

Each interactive feature was a game-based or game-like activity that needed to be adapted to be mobile compatible and meet Web Content Accessibility Guidelines (WCAG) AAA accessibility standards.

Also, Macmillan's e-learning platform (LMS) needed rules for determining how much screen space to allow these interactive features when embedded into other materials or if they should be displayed at all.

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

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

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 solve the problem more holistically and redesign the container's behavior 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 to the learner and allowing them to choose how to proceed. The second was creating an alternate text-based experience that would be accessible and mobile-friendly. I designed, prototyped, and user-tested four prototypes for this project:

• Le Chatelier's Principle interactive
• Metabolic Map interactive
• "Choose your own adventure" interactive
• "Graceful degradation" strategy

Exploration and Iteration

I redesigned Le Chatelier's Principle interactive to enhance color contrast and provide tap-friendly buttons and sliders that learners can manipulate, even with screen readers. Aria text allows the screen reader to read aloud that the experiment's status has changed for learners who cannot readily perceive the visuals. I designed three breakpoints for this interactive.

Motion study (above) showing how particles would animate. CSS breakpoints would hide the animation on the narrowest screens.

The Choose Your Own Adventure strategy provides a link underneath each interactive that offers a text-based version of the game. Each step of the scenario begins with text descriptions of the visual content. The learner chooses 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 was.

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 learner to choose between trying it anyway or watching a video. For each of the simulations treated in this way, a content expert would create a voice-over for a screen capture video of a learner performing the virtual experiment. Macmillan could add closed captions to this video to enhance accessibility. The voice-over would describe the visual content, how it is changing, and why.

I redesigned the Metabolic Map with a tap-friendly menu and navigation buttons. New menus and sliders are HTML5 based, and learners can manipulate the menus and controls using a screen reader. I also increased color contrast and readability to enhance accessibility.

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 UI with new learners.

OUTCOME

Results and what I learned:

1. It can be challenging 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