Level Up

Objective : A virtual platform that aims to help students further their post secondary career goals through college and career prep services.


  • Wireframing
  • WordPress
  • WooCommerce
  • PHP
  • Sass


Adobe XD, Adobe Photoshop, Adobe Illustrator, Balsamiq


WordPress, PHP, Sass, Gulp, Github

Level Up Mockup

Our Design Process

We first started off with looking at various competitor websites for design inspiration. Our users are students who are either looking for advice on college prep or how to further their career paths.

Style Analysis

Upon looking at a few websites we decided that our site should be warm, inviting and friendly. We managed to come up with a color palette after looking at a few competitors websites and deciding what influences we would want to draw from.

Information Architecture

Level Up Sitemap

Color Palette

After looking at competitors' websites and deciding what we wanted our brand ethos to be ( warm, inviting, trusted), we decided on this colour palette.

Level Up Colors
Level Up Colors


We first hand drew wireframes and then made them into digital copies in Adobe XD. We were designing for two categories of users: students with an interest in figuring out career or college prep, or parents who are interested in getting their kids on the right track. Both the intents of these users would be to come to the site with the intent to book.

Level Up Wireframes
Original Wireframes done in Adobe XD
Level Up Color Wireframes
Final Full Color Wireframes

User Tasks

We designed with users in mind and thought that users would likely come to our site to see what services are offered, who the instructors are, instructor availability and pricing.