Hack Your Course — Private 1 on 1 Tutoring Services

Responsive Web Redesign

Students at RED Academy, both at User Experience (UX)and User Interface Design (UI) worked together in this project to redesign a responsive website for the start up company Hack Your Course who focus on Private tutoring services in North and West Vancouver.

Timeline: 3 weeks

Existing website

Our Team

Company Background

Hack you Course is a start up company that focus on private tutoring services, mainly 1 on 1 tutoring, but also offers group tutoring and online tutoring. Something that stands out from the company is that not only he takes care of their students but also takes care of their tutors and pays tutor wages higher than the market price.

The Opportunity

Our client came to us with a goal to redesign his website to be more appealing to the audience ( parents and students) and also attract more students for his company. He was open for branding changes, logo redesign, any other necessary changes.

The Research

  1. Testing the existing website

Since Hack your Course already had an existing website we decided to do some user testing. We asked some users to have an overall look through the website, tell us what did they think and based on a task:

“Look for private 1–1 tutoring in math subject for your child, collect enough information and sign up or fill the form to contact them”

Our goal was to understand where the users were getting stuck, or not getting the right information they were looking for, etc.

1.1 Testing results

Some insights of what our users said:

  • the website was a bit text heavy in every page
  • too many colours
  • the top navigation bar was a bit confusing
  • the images and texts on top were distracting or hard to read
  • the domain (best-vancouver-tutors.com), logo (Hack Your Course), and tag line (Advanced Teaching and Education) — too many different names, not sure what is the actual name of the company.
  • the flow on the subjects page was weird and there was no sign up button
  • no biography, or education background from the tutors or photos.
subject page, footer

1.2 Survey and Interviews

We created a survey focused on getting to know what do people look for when finding a tutor, how do they find tutors, what information is priority to them when searching online, what are main goals when looking for a tutor, etc. Also to understand what frustrations do they have, problems they face, bad experiences. 
We got 159 survey responses and conducted 7 interviews.

Key findings:

  • 70% connects with tutors by Words of Mouth (referrals)
  • 93% said that positive reviews/ testimonials affect their decisions when finding a tutor
  • Many said they want to be able to see tutors information and background, photos, passions, teaching styles.
  • Many said it’s difficult to trust in tutor’s quality.

Google Analytics

With the Google Analytics file that our client sent us, we could base our redesign website within most accessed pages and devices used. And from there reorganize the hierarchy. A few insights that we got are:

We had a second meeting with our client to show some of the results and ask certain questions after we got all the responses and surveys.

1.3 Affinity Diagram and User Persona

We compiled all the data we got from the surveys and interviews and wrote it down on post it notes, so we could rearrange it in a way that for us was easier to understand and reassure with the rest of our research, the goals, pain points, frustrations that clients face when connecting with a tutor.

With the results from the surveys and interviews we realized that we should create 2 different affinity diagrams, 1 for parents (who are looking for tutors for their child, so that they make sure their kids are not falling behind at school) and 1 for students (who are trying to get extra help for standardized tests to get in college/ university), and we separated in 4 different categories:

  • How do they approach in looking for tutors
  • Why do they want to get tutors
  • What do they want from tutors
  • Previous bad experiences with tutors
Affinity Diagram — Parents and students

After that we created 2 Personas, that helped us narrow down the information gathered in the affinity diagram.

1.4 Understanding the main problem

Main Problem

Parents and students have a hard time when it comes to finding a tutor when they don’t have a referral and are most likely to go find information through Google. However it’s testimonials can be fake and through them users can’t trust on tutor’s quality.
Sometimes the website is full of content but it’s confusing and overwhelming.

Business Goals

The business goals discussed with our clients are mainly focus on getting more students and supporting tutors. HYC wants to make both sides happy, parents and tutors, also make it affordable to everyone, not only rich people but everyone that is in need of tutoring services.

User Goals

The user goals are finding a tutor that has a flexible schedule, has a reasonable pricing and find qualified tutors who matches their children’s personalities and create a positive learning experience to them.

2. Planning

2.1 Competitive / Comparative Analysis

We created a competitive/ comparative analysis with Hack Your Course and five other companies, 3 of them are tutoring services (Tutor Doctor, Sylvian, My Grade Booster) and 2 are learning centres (Kumon and Oxford Learning).
We wanted to compare which features these 5 other websites had and start thinking about what could we add, change or rearrange in the existing HYC website. 
The features that called our attention were “Show the process/ How it works” and “Teaching Method” that HYC didn’t have yet.

2.2 Customer Journey Map

Based on our research, words of mouth (with referrals) was the most common way of finding a tutor, so we mapped out the process and realized it was pretty straight forward and it doesn’t require any type of online interaction or communication. People trust friends referrals and just need to call the company for sign up or get more information.

Words of mouth process

However, our research also showed us that a lot of parents don’t have referrals and they have to go find information through search engines (e.g. Google) but have a hard time trusting the testimonials, as they can be generated by the company. And that was one of the pain points we wanted to focus on.

no referrals process

Pain points and our solutions

Based in our research, we wanted to focus on these four pain points, we thought about the solutions to each of them and redesign the website with that in mind, as well as reorganize the website in order that the users can find the information they want and trust.

Pain Points in green and solutions in yellow

2.3 User Flow

Defining the pain points and holding into it, led us thinking how would we redesign the website and improve it for our client. 
Before start drawing the wireframes, we decided to create our user flow to get an idea of how we wanted the users to navigate in our website and reach from point A (home page) to point B (gathering enough information to contact the company or fill in the form).

We wanted the users to be able to gather enough information with our “primary flow”: ‘ from homepage — to what we offer — select subject and level — and contact the company by filling the form or calling them to book it’. 
However, for the parents who are looking through the internet as I pointed out before, they would want to the testimonials page before making a decision, that’s why we added a “secondary flow.

2.4 Site Map

We also created our site map to define the main pages we wanted to create. And minimize the amount of pages on the top navigation bar.
From 7 categories ( Home, Subjects, Our Difference, Group tutoring, Testimonials, Contact and We are hiring + the contact number) to 5 as well as reorganizing the content from inside of each of them.

3. Design

Paper Protoype and Testing

As we were 3 UX designers working together, we decided to save some time and sit down together to do a Design Studio session and draw all our ideas and explain them to see which one would work better and combine them as needed.

Once we decided and combined the wireframes, we created our paper prototypes and did some usability test with our peers at RED Academy and asked for feedback.

Key findings after user testing on paper prototype:

  • Some users said that they wanted to see programs or what we offer first and mission & values after.
  • Some were not sure about the ‘filter’ for testimonials, and what did we want to achieve filtering testimonials.
  • The “what we offer” page looks like they offer 1 on 1 for only 3 subjects and the other 3 are only for group tutoring.

With the feedbacks they gave us, we updated our wireframes to make it easier and clear for our users to understand the features, and then moved to digital platform. We started creating the mid-fi wireframes.

mid fi wireframes for mobile and desktop version

In order for this project to be a responsive website we had to think about what to do with the content showed on desktop to mobile version. One example is the contact us button.

We decided to add the contact us button on desktop which would lead the user to a bigger version of the sign up form, but for mobile we created a float call button on the bottom right of the screen, so users could just call right away.

mobile version on the left — desktop on the right
contact us form page

Mid-fi testing

After updating the mid-fi, we did some more testing and got more feedback in other pages and features.

  • Our top navigation bar had ‘Our Difference’ and people said that it felt out of place and it could be something else and Our difference could be added in the About Us. So we added the ‘How we Work’ page and then we could add the process
top navigation bar
  • Testimonials
    Users said that the carouse we created was distracting and they wanted to see more than one at the time, and also be able to see more if they wanted. So we added at least 3 testimonials at once with photos from existing parents.

Future Considerations

Taking in consideration our timeframe of 3 weeks, I’m very happy with the solution that my team and I created for our client. We managed to tackle the main features that we wanted, focusing towards parents. But we would like to add the following features:

  • Teaching Methodologies and strategies that the tutors use for their tutoring services and how they are different from other tutoring services.
  • Case Studies of previous clients, students. Showing plans, approach of tutors and lessons that worked for each student and how they managed to improve their students scores.
  • Online Tutoring services for those students who can’t attend the 1 on 1 sessions in person, but would have access to offline resources, lessons not having to worry about missing a session.

Key Takeaways

In this project, my team and I were able to work efficiently, we had a good communication between the team and stay organized, being able to not only come up with good solutions and create an appealing design that our client liked as well as work on small fine details and achieve our goal.

As a UX Designer, I learned more about the design process and not always be attached to an idea, because there is always a different solution that could work better for the project, the users goals and business goals. Communication is key to create a better work environment and be able to rely on the research and explain to the client the Why behind everything we designed.