3D Personal Training

THE PROBLEM

On 15 November 2018 my existing client Luke messaged me with a concern – he loved the design of his current website but it was taking too long to load.

3DPT website before
My Roles
Designer + Developer
Client
Luke Walsh
Project
Website Redesign + Build
Approach
Client and data led
THE SOLUTION

How I fixed it

To establish the best course of action I did some initial troubleshooting. I cleared my cache and tried to load the one-page website but even with my high speed internet, the website was very slow to load. So I tried to run an audit with Google’s Page Speed Insights but when the results came up with error message ‘Lighthouse was unable to reliably load the page you requested’ I realised the situation was very bad.

The website was originally built 5 years ago in 2013 which made the framework prehistoric for the current web. I also pointed out that having a non-secure protocol i.e. http wasn’t ideal and could potentially be leading to a high bounce rate.

What concerned Luke about the rebuild was that the website ranked on the first page of Google’s search results for ‘personal trainer bondi junction’ and it was really important that he didn’t lose his ranking.

I realised that this project would require some in depth analysis and so I established a few user stories, a hypothesis, an MVP and some measures of success before deep diving into some research.

The error message

Hypothesis

Due to a slow loading website that hides important information and looks dated that is supported by Google Analytics data, it is believed that by migrating the website to a new server, reviewing the UX and updating the UI users will have a more enjoyable experience browsing the website. This will lead to a faster loading time and a higher click through rate.

quote-left

User Story #1

As a user I want to be able to find all the information I require on the website so that I can make an informed decision as to whether I make a booking.

quote-left

User Story #2

As a user I want to be able to make a booking easily so that I can feel relaxed and confident in my decision to invest in 3DPT sessions.

Measures of Success

There were several indicators of success. Not only was it important for the load time to reduce but the SEO performance needed to be maintained and the UI needed improving. Load time and SEO performance was measured in Google’s Web Dev tool whilst the UX and UI success was measured by the client’s level of satisfaction.

Current SEO index
82
Ideal SEO index
82
Desktop - current speed index
21
Desktop - ideal speed index
9
Mobile - current speed index
15
Mobile - ideal speed index
7
STEP 1

Quantitative Research

The first thing I did was gather quantitative data as I wanted to know what was happening. The quantitative analytics allowed me see where in the product users were struggling which allowed me to work out what areas I should first try and address.

Google Web Trends​

According to Google Trends, interest in ‘personal training’ in NSW peaked between 31 December 2017 to 6 January 2018. My assumption is that this coincides with people making New Years Resolutions or finding new motivation after the holiday festivities.

It also rose again between 20 – 26 May 2018 and then again between 15 – 21 July 2018. 

Google Trends report
Data from Google Analytics

Google Analytics​

I applied a filter to only show results from Australia and of those visitors 95% were from NSW with 88% of them new.

Overall there is a very high bounce rate of 91.5%.

The average session duration was 23 seconds with 95% dropping off after visiting the Homepage. I’m not sure if this is relevant though because it’s a one-page website so users will most likely be scrolling down without the need to interact. I will look into this further however, at the moment it looks as though the top performing pages are locations, about and prices.

82% of traffic was from Organic Search with only 17% coming directly.

62% of new users viewed the website on mobile whilst only 36% viewed on desktop.

Of those users viewing on desktop, most preferred larger screens 1920×1080 and 2560×1440 and Safari and Chrome were preferred browsers.

Google Web Dev

I conducted performance tests using Google’s Web Dev Tool and also ran audits in the browser using Chrome Dev Tools – strangely they produced quite varying results which was a bit confusing.

According to Web Dev the Speed Index calculated the website’s page load at 20.1 seconds which was shocking and resulted in a Performance Score of 17. On a positive note, SEO were good with a score of 82.

However, according to Chrome Dev Tools without throttling Performance was given a score of 3 and with throttling it was 44. I would like to investigate further as to why there is such a difference in reading from these two tools.

Web Dev performance test results
Google Mobile Speed Test Results

Mobile Speed Test

Using Google’s Mobile Speed Test tool to scan the website it was established that the speed of the website on mobile was very poor at 15 seconds. With most visitors viewing the website on mobile this is probably the most important result to improve.

Heat Maps

Crazy Egg came back with some interesting results. I’m assuming the difference in click rate was due to the duration of the experiment which was shorter. During this time ‘Services’, ‘Prices’ and ‘Bookings’ were popular links.

Crazy Egg heatmap results
STEP 2

Qualitative Research

Questionnaire

To find out more about my client’s feelings towards the current and future website I sent him a questionnaire with 8 open ended questions.

Questionnaire sent to Luke
A usability test result

Usability Testing

The next step was to conduct remote usability testing with screen and voice recording. I collated responses from 5 participants within the target market who were asked to complete a set of tasks and answer the following questions:

1. What are your initial impressions of the website?
2. In order, name the steps you would take before attempting to make a booking.
3. Did you find all the information you required before making a booking? If not, what was missing?
4. What frustrated you most about the site?
5. If you had a magic wand, how would you improve the site?
6. What do you like about the site?
7. How likely are you to recommend this site to a friend or colleague? (0=Not at all likely, and 10=Very likely)

STEP 3

Results Synthesis

Following the usability testing I extracted the following pain points and grouped them into affinity clusters. By doing this I noticed that most users experienced negative emotions trying to complete their tasks.

The testing was remote and so the feedback was very honest and quite brutal as I designed the original website (with the direction of Luke). The affinity clusters were focused on either design, content or functional issue. Some were recurring pain points however, all of them were valid and very helpful.

Pain-points grouped
STEP 4

Insights Analysis

Having analysed the quantitative and qualitative data I was able to extract the following insights:

  • The website needs to be brighter and more female focused as currently half the target market feels alienated.
  • The type of business needs to be specified on the landing page.
  • The design of the website needs to be more modern.
  • There needs to be less information on the website.
  • The content on the website needs to be simplified so that cognitive load is reduced.
  • Prices need to be easier to find and once found, include a call to action.
  • Create consistent CTA’s to ease cognitive dissonance.
STEP 5

Create Personas

Persona 1: Eric

Eric is a 37 year old male who owns an SEM company in Double Bay.

He loves surfing when he can but doesn’t get out much as his company has kept him very busy after it took off about 10 years ago. He’s very comfortable using technology and always has the latest device to impress his clients. He loves his iPhone and due to his line of work has a high expectation when it comes to websites and will give up fairly quickly if they aren’t quick to load. Recently he’s noticed that he has let himself go and wants to start prioritising his fitness.

Persona 2: Melanie

Melanie is a 45 year old CEO of a Health Insurance company and lives in Bondi.

She is very time poor and any extra time she has she loves to spend with her boyfriend. She’s pretty comfortable using technology but for her it’s a means to an end. Melanie is more focused on information and will thoroughly research her options before making a purchase. Whilst she believes she doesn’t place too much importance on visual appeal – unconsciously she prefers websites that look elegant and high end.

Customer Journey Mapping

From these persona’s I was able to visualise what a customer journey might look like for them.

Eric's journey map
STEP 6

Ideation

With this project I was not only designing but building the new website for Luke. I like to build small websites in WordPress using a theme because I find them the most time and cost efficient for the purpose of the website. However, using a theme also means that I am using a semi pre-established design system with pre-designed components. Therefore the amount of customisation is highly restricted.

This becomes more of an agile form of iterating on the fly with ideation mostly performed in my head and then transferred at build with only low-fidelity sketches to help.

These scamps are my thoughts on how the template should be laid out. I usually start thinking about the content hierarchy which forms the information architecture which determines what ends up in the top level navigation.

My low-fidelity scamps
STEP 7.

Implementation Plan

Release Plan

Quite early on Luke and I spoke about timings and after doing some research on migrations and https implementation and so using Google Trends to understand the best time for this we agreed that this should occur around June. This is when Luke’s current hosting will expire and it’s also low season so there will be reduced traffic to the website.

MVP

The first release was to contain the following features: 1. Faster load time 2. Search Engine Optimised 3. Improved UX and UI
STEP 8

Build

I built the website in WordPress and completed cross-browser and cross-platform testing. 

The staging link was emailed to the client along with an annotated design which included justifications for every major UX and UI decision. 

The final site went live in March and the client was happy with the new design.

We also migrated the website in June. Since then the client has asked for the hero image to be replaced (despite my opposition).

First release build with design annotations
STEP 9

Results Analysis

Measures of Success​

Having measured the website again at the end of the project it was evident that all targets had been met. The SEO performance wasn’t just maintained but improved while the new UX was easier to navigate and the UI was looking much cleaner. Most importantly the load time had been reduced on both desktop and mobile which was a great win.

Post launch performance test for validation
Ideal SEO index
82
Achieved SEO index
100
Desktop - ideal speed index
9
Desktop - achieved speed index
9
Mobile - ideal speed index
7
Mobile - achieved speed index
5
STEP 10

Key Takeaways

  • Setup conversion goals in Google Analytics so that I have more data to use to create a baseline and pull insights from.
  • Some clients will still make their own decisions that contradict best practices or insights.
THE SOLUTION

By June 2019 the 3DPT website had been redesigned and rebuilt with an https certificate. I nailed our measures of success and the client was satisfied with the result.

3DPT website after

Since launch

The client has decided to pursue another business venture and the 3DPT website has been pulled down.