Designed for the K-12 school market, McGraw-Hill Education’s Open Learning Platform has been designed to be the premiere web-based learning system. Since 2014 I have been involved in many aspects of the platform: from prototyping the interactive learning-components ,designing the visual style of the application, conducting usability heuristic evaluations on new features, refining the user experience of the application for both teachers and students, as well as serving as the lead designer to a team of cross-functional digital interactive designers. In November of 2016 I transitioned to a supervisory role for a team of a dozen Interactive Designers working on individual programs for the Connect2 platform.

User Experience

Player content experience

Lesson landing pages

Interactive Prototypes

K5 Button Concepts (Non-Responsive)

See the Pen Children’s App Buttons – Prototype by Phil Carter (@HandsomePhil) on CodePen.

K5 Drag and Drop Activity (Non-Responsive)

See the Pen Children’s Math App: Drag and Drop Activity by Phil Carter (@HandsomePhil) on CodePen.

Science Drag and Drop activity with “sticky” drop zones (Non-Responsive)

See the Pen D&D Activity Prototype with snapping drop zones by Phil Carter (@HandsomePhil) on CodePen.

Visual Style

Style Guide (Responsive)

Maintaining a style guide that incorporated both code examples as well as examples of interactive content was surfaced early during development for the Open learning platform. Below is a proof of concept of the guide with placeholder variables for the style. Later the project was moved to an internal CMS and refactored to meet the needs of individual programs within.

See the Pen (MHE) MHE New Tech – UI Pattern Library by Phil Carter (@HandsomePhil) on CodePen.

Signaling

The Connect2 platform has dozens of interactive widgets that presented several challenges to our team:

  • Since the interactive components need to serve as ancillary material to both the printed and non-digital materials in the educational course; they need to be both instantly identifiable that they are interactive, and that the interactive itself is clear with support from instruction lines.
  • We could not rely exclusively on color to cue interactivity to students; as this limited options for art creation, and would not be WCAG accessible in all situations.
  • There needs to be a delineation between primary and secondary interactions. Coloring all interactive components a single color would bring equal attention to primary actions like submitting an answer, and destructive actions like clearing a text field.



Table Styles (Non-Responsive)

See the Pen Table style examples by Phil Carter (@HandsomePhil) on CodePen.