Responsive Course Interface

DriversEd.com

DriversEd.com continues to lead the industry during the wireless device boom by redesigning its 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 toolbar 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 AutoPlay 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 the desktop are available. For a narrower resolution, content stacks from top to bottom. Ie. Image of slide stacks on top of the text.

Responsive Course Player on Mobile


From Left to Right: 1. The 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, the mockup demonstrates that the user can pinch to zoom and pan horizontally to navigate through the 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