The first step was creating a Document Briefing for the client in order to get an idea of what they are looking for as well as laying out the targeted timeline.

The second step was to create a persona user profile in order to get a sense of the type of person we are targeting.

From there I laid out the foundation for the Homepage and Start Trial pages.

I begin to add prototype functionality to the project, starting with the Homepage and Signup page.

Created the Dashboard page and added a footer and more information to the Homepage.

Created the Nav Holder page (far left) and Courses pages (far right). I also showed some of the interaction between them.

I created a mood board in order to test out various designs and get a sense of what would look best.

I added some sample web friendly fonts to the mood board. I also adjusted some color gradients to see what looks best with the overall theme.

This was the start of the high fidelity aspect of the project. I added the overall color scheme to the design. I also added various images that I edited using Illustrator and Photoshop. The top navigation bar was created in Photoshop and the logo was made in Illustrator.

I added more to the overall look of the Homepage.

I added all the necessary information for the Academy and Courses pages. I also started on the mobile prototype.

Interaction shown between the various pages.

This is the final result and finished product. It shows the interactions between the various menus and pages.

With the initial prototype finished, I moved on to the mobile version.

This is when I start to flush out the app and add the color scheme used on the desktop site.

I added more pages to the app as well as showed some interactions.

Added the rest of the mobile pages to the design.

This is the finished product for the mobile app version of the website. A little interaction is also shown between pages.