The course homepage has various header states that appear at the top of the page when the user logs on. The specific header that appears is determined by whether the user has started the course and, if so, where they are within it. 

Header states presented on the homepage

Course not started

Until an available course is started, the header provides a brief description of what the course is about and what to expect once you start:

Session unavailable to start

Sessions are unlocked on prearranged dates that follow the course schedule. If a user enters the homepage before a session can be taken, the header indicates that the session is locked until the availability date:

Session available to start

When a session is available, the header makes it clear with a "Ready to Start" message and a play icon placed distinctly in the video thumbnail: 

Continue session

When the user has previously started a session but left before finishing, the header displays a "Continue" message and the play icon in the thumbnail as well as a progress bar that shows the user how far through the session they are:

Course complete

After finishing a course, the header displays a congratulatory message with the date of completion and suggestions for moving forward:

Course incomplete

The exercise course, LivingFit, has the additional possible header-state of "incomplete," which means the user failed to meet minimum logging requirements (entering walking minutes for nine of twelve weeks) and must restart the course:

Session Tiles

Further defining the user's place in the course are the session tiles that are listed below the course header. 

The session tiles are listed vertically upon one another, chronologically from the beginning to the end of the course. Each tile gives a brief summary of the session topic, the estimated duration of the session, and the availability date. The session tiles give the user an idea of what to expect, allowing them to plan ahead.

The tiles remain even after a user has taken a session, giving them the option to easily identify previous sessions (by summary and/or title) in the case that they'd like to review. 

Session Tile States Presented on Homepage

Session locked

When the session is scheduled for a future date, the tile shows the availability date and the estimated duration of the session.

Session in progress

When the session has been started but has not yet been finished, the thumbnail has the play icon and a progress bar is provided. 

Session complete

After the user takes a session, a green check-mark and "Completed" are displayed on the tile. The option to review the session and/or the assignments and reading material is clearly shown.

In Summary

The purpose of the course homepage and the session tiles is to give the user a succinct understanding of what the course is about and, once they've already started, where they are inside the course. Our goal in this design was to make re-acclimation into our site an easy and natural experience each time a user logs on and to provide the user with quick accessibility to previous session material.