Responsive Course Interface

DriversEd.com

During the wireless device boom, DriversEd.com continues to lead the industry by redesigning their courses to have responsive flexibility. Students can take their driving courses anytime on any device. The new UI provides a consistent user experience through multi-devices. Course slides are optimized for best legibility adjusting to screen resolutions.

Redesign includes:

  • Update overall visuals of course interface
  • Replace low resolution course graphics with higher quality images
  • Show and hide tool bar and course titles to maximize slide real estate
  • Only display necessary functions such as previous and next buttons
  • User testing to find what works and what doesn’t

New Responsive Course Interface On Desktop


The new interface has a dark background to help students focus on course material. The control panel gives them options to customize their experience. They can bookmark a slide they find useful, toggle Auto Play on and off, adjust Font Size, and enter Fullscreen mode. Containing slides of the course, the Index panel is expandable when users wish to review a slide. Any slide they haven’t read remains locked.

Responsive Course Player On Tablet


During tablet breakpoints, the same functionalities from desktop are available. For a narrower resolution, content stacks from top to bottom. ie. Image of slide stacks on top of text.

Responsive Course Player on Mobile


From Left to Right: 1. Default layout of player interface | 2. Layout expecting browser navigation header and footer | 3. Settings panel with extra functions | 4. Info panel with information about the course

Car Parts Activity on Desktop


Car Parts is an example of an activity from the driving course. Users click on hotspots to learn about parts of a car. Once a hotspot has been visited, it’ll turn green.

Car Parts Activity On Tablet


On the left, mockup demonstrates that user can pinch to zoom and pan horizontally to navigate through activity.

Car Parts Activity On Mobile


From Left to right: 1. Hot spots are clickable / swipe horizontally to pan | 2. on-click hot spots trigger popup box to open | 3. pinch to zoom

Font and Layout Specifications

Control Panel Icons

Sample Wire Frames

Previous Version of Course Player

Course Player Previous Verison