LevelUp

Skills Applied

  • Development Planning
  • Wireframing
  • Responsive Design
  • WordPress
  • WooCommerce
  • PHP
  • Sass

Tools

  • Adobe XD
  • Adobe Illustrator
  • Adobe Photoshop
  • Figma

Team

  • Tiffany Lam
  • Grace Lau
  • Ava Nikaein
  • Brylla Quiano

Project Management

  • Google Sheets
  • GitHub
  • WP Migrate DB Pro
  • Filezilla
  • Slack

About the Project

Level Up offers virtual coaching services to students who are preparing for college and for new graduates who are preparing for a career. The website is an e-commerce site that allows students to sign up, log in, and book online services fit to their schedules and needs.

Defining the Goal

Level Up's goal is to provide accessible and convenient coaching services to people who are looking to achieve their college and career goals.

The goal of the website is:

Capture and convert leads while maintaining credibility and providing a convenient, user-friendly, and engaging interface.

Team Collaboration

As part of our team collaboration, we assigned the tasks and duties among ourselves. We also set up daily and weekly objectives to streamline our work. We communicated mostly through Slack when we were working remotely.

The team did the UX research, development planning, and wireframing altogether. My tasks were creating the logo, providing feedback about the design, styling the homepage, creating product icons, and collaborating together on styling, making the website responsive, and debugging.

Design Process

Competition Analysis and Usability Testing

Our team used concept board to analyze several competitor websites.

Screenshot of concept board

First, we researched several competitors who provide online tutoring services. We performed a usability testing on each site and listed all the pros and cons of their interface and their design.


Screenshot of a sample from the conceptboard

In doing the competition analysis, we were able to come up with things we should and should not do when designing and developing Level Up's website.

User Research

According to the client, the target audience of their online services are international students looking for college acceptance, parents if international students, and new graduates who are looking fot their first job.

Information Architecture

LevelUp aims to be an e-commerce site with bookable products that is virtual and has resources (ie. instructors). Generally, the website should contain company information, company values, services information, instructor profiles, an online payment system, and a checkout page.

Below is the sitemap of LevelUp:

Screenshot of the front page of the content plan

Style Analysis

According to the client, the design of the website should be warm, welcoming, not overly formal but still very professional and trustworthy.

During the usability testing of each competitors' websites, we took notes of the design of each and analyzed what features work and what doesn't.

We decided to implement those effective features onto the development plan. An example of an effective feature is the placement of CTA's on the banner and applying the secondary color to make it pop out.

Content Plan and Development Plan

Since we are using WordPress, we have to decide where and what template files to use for each content.

We also decided what content should be hard coded, what should be the custom fields, and what should be made as a custom post type.

Level Up development plan preview
Level Up wireframe

Wireframes

Level Up wireframe

Mockups

Level Up aims to maintain credibility by looking professional and welcoming.

The colour palette the team decided for this theme is:

Colour palette for Level Up

View on Devices

Level Up desktop mockup Mobile mockup for Level Up

Development

The site was developed using the Underscores starter theme that allowed us create our custom WordPress theme from the ground up.

Also, developing the website's features was made possible by the following plugins:

  • ACF Content Analysis for Yoast SEO
  • Advanced Custom Fields Pro
  • Regenerate Thumbnails
  • Show Current Template
  • WooCommerce
  • WooCommerce Admin
  • WooCommerce Bookings
  • WooCommerce Dynamic Pricing
  • WooCommerce PayPal Checkout Gateway
  • WooCommerce Services
  • WooCommerce Stripe Gateway
  • WP Migrate DB Pro
  • WP Migrate DB Pro Media Files
  • WP Migrate DB Pro Theme & Plugin Files
  • WPForms Lite
  • Yoast SEO

The team coded the website's functionality first before we did the styling. On functions.php, we created custom post types, custom taxonomies, and advanced custom fields to help us organize and display the website's contents. Below is an example of how to register and display custom post types:

Insights

I find that developing a WooCommerce website is a rigorous project but I had fun doing it. Sure, it can be frustrating at times but the process itself was a learning experience.

Also, our team was very productive and organized. We assigned tasks for each day and accomplished them within a given timeframe. Communication was also not an issue because we met everyday and worked together.

Overall, it was a fun project and a fun team. 11/10 will do it again.