• Tiffany Lam
• Brylla Quiano
• Grace Lau

• Adobe Photoshop
• Adobe XD
• WordPress Custom Theme
• PHP
• WooCommerce
• JavaScript
• Gulp
• Git

• 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.

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.

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.

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

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.