LevelUp Tutoring Services

March 2020


LevelUp is an e-commerce platform that provides online English language tutoring services to prospective university students and young professionals. The website allows users to view services, instructor profiles, and easily book and pay for desired sessions.

LevelUp Tutoring Services
Team Members
Tech Stack
  • Adobe Photoshop
  • Adobe XD
  • WordPress Custom Theme
  • PHP
  • WooCommerce
  • JavaScript
  • Gulp
  • Git
My Role
  • UI Design
  • Registering & Displaying Custom Post Type
  • WordPress Hooks & Filters
  • Custom Styles for Login Page
  • Custom WooCommerce Styling
  • Cross Browser Testing

We were given the freedom to propose modifications to the mock busines. Our group proposed to provide tutoring services exclusively online since it has become a growing trend in the past few years. This allowed us to include features such as an online booking form and bookable virtual products. This meant that the website had to be designed for the daily needs of the client. For example, each instructor would log into the website at the start of each work day to access their booking schedule. The website is desgined and customized to serve these needs.

After a thorough analysis of the market and competitor sites, we began to put together a style tile to use on the website. We noticed the frequent use of the colour blue in educational sites and decided to incorporate it along with some contrasting colours. Our goal for the visual design of the brand was to establish credibility and trust with the users, without overwhelming them with information.

Colour Tile

According to the "client", LevelUp's target audience consists of international students looking for college admissions, their parents, and newly grads searching for employment opportunities.

By making a content plan and informational architecture, we were able to begin visualizing the site's navigation. We decided to hand-draw wireframes to start with, as it allowed for easy discussion and modifications. These wireframes served as the basis for Photoshop mockups.

LevelUp's sitemap

This step allowed the team to discuss and decide how to go about developing the site, specifically deciding whether to hard-code the content, utilize custom fields or register custom post types with regards to the client's needs, goals and painpoints.

wireframes wireframes

View Development Plan


Undescores starter theme was used as the shell for LevelUp's custom theme, and plugins such as WooCommerce, WooCommerce Bookings, Advanced Custom Fields Pro, WooCommerce Dynamic Pricing, WooCommerce PayPayl CheckOut Gateway, WooCommerce Stripe Gateway were utilized to achieve the functional layout of the website.

The most interesting part of developing the code was to match and display services offered with Custom Post Types such as respective instructors and testimonials about their work. Instrcutors and testimonials are registered as Custom Post Types for client's ease of use and maintenance in the future, while services are organized by product category. In order to display who teaches each course on the service page (product-single.php) and which courses each instructor teaches on their profile (single-tu-team.php), Advanced Custom Field's relationship field was used. This was designed with having one main goal in mind: making the user's journey to booking a session as easy as possible. Although challenging to develop, this allows the user to easily navigate between instructors and services. Developing the code allowed me to conceptualize and understand the relationship between various plugins, template parts, and content types.

See the Pen register-cpt-tu-team by avanikaein (@avanikaein) on CodePen.

Registering a Custom Post Type for Instrcutors

ACF Settings

Advanced Custom Field settings

See the Pen displaying-instructor-specialty by avanikaein (@avanikaein) on CodePen.

Displaying the instructor's respective courses

Once the functionality of the site was achieved with code, we entered the syling phase. This phase of the project was time-consuming as we had to avoid any overlapping and overwriting styles, as well as running various hooks to achieve the desired layout for WooCommerce's product page, cart and checkout pages.

Final Product

Even though the project was centered around a mock business, SEO and Security plugins were installed, various payment methods were tested in sandbox mode, Editor accounts and a "how-to" guide were created as deliverables for the client.

Levelup's final website
Levelup's final website