Top Gun Sales Performance - Learning Portal

This web app, part of a larger suite of web apps called Prevail, was designed to help sales people learn how better to sell products in their sales fields. The design and user experience was created by me with feedback from the rest of the design team. The majority of these screens were designed directly in the browser with HTML/CSS and handed over to a developer to add functionality via rails and angular.

This first screen is the course catalog. We chose to display courses as highly visual cards with images to draw interest and a layout that provides postive user experiences like including the user's progress up front, an estimated completion time, and even a continue button that allows the user to immediately pick up right where they left off.


Clicking into a course, takes users to the course page. Here they get a description of the course, information regarding the course's author, any additional, supplmental materials that may be useful, and most importantly, the list of all of the lessons and activities, categorized by chapter titles, users can view. 


Paths are collections of courses that make up a larger subject matter. Each path card displays not only the estimated completion time, but a count of the number of courses involved in each path. Like courses, a progress bar is also viewable by users, giving them a simple way of knowing how far along they are in their learning.


Visiting the page for a specific path mirrors elements of the course catalog and the course pages. Users get a description of the path along with their progress. Below that, in a grid, are the course cards that make up the path with the same information they have in the course catalog.


Creating and editing courses is done in a live fashion. All parts of the course page are editable by the course's author just by clicking on the part of the page (title, description, lesson list, etc) they want to edit.