Course Player Redesign

With smart devices, users can now do everything on their mobile or ipad. To catch up with the industry, DriversEd.com would like their students to have the same ability. That is to take their courses anytime anywhere on their wireless devices.

Project Objectives:
Redesign DriversEd.com course player to responsive framework.

Deliverable:
Provide art direction. Mockup layouts of design with responsive breaking points. Specify details for developers. Work along side with them to come up with solutions. Make sure functionality is smooth for users.

Demographics:
Any students who signed up for DriversEd.com courses.

Previous Version of Course Player

Course Player Previous Verison This is the layout of the previous course player. Some improvements that it needs include less clutter, too many colors, needed higher quality graphics, and generally looked outdated.

Wire Frames

Course Player Wire Frame Wire Frame of the new course player

Responsive Break Points for Devices 768pt and Wider (Desktop)

Course Player Sample Slide Course player on desktop screen.

Car PartsCar Parts on desktop screen.

Responsive Break Points for Devices from 481pt to 767pt (Tablet)

Course Player on Tablet Course player on tablet devices.

Car Parts on tablet devices. On the left, mockup demonstrates that user can pinch to zoom in and out and pan horizontally to navigate in the activity.

Responsive Break Points for Devices from 480pt and Smaller (Mobile)

Course Player on Mobile Devices Mobile mockups (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 on Mobile Car part on mobile (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

Course Player Specs
Course Player Assets Course player assets