lb-cover

UX design

Fitness Website
Home Page Redesign

April 2018

This is a personal and independent UX project for a fitness site.
The problem that the business encountered was the website cannot retain customers and no people sign in for the business.

Background

LD is a young startup providing a platform for people who want to take Yoga class and instructors who'd like to teach. The company started in 2016 and based in SF bay area.

Their website launched one month ago, but did not get any people signed up. They would like to find out why, and how to solve the problem.

"Nobody sign up"

No body signup is the challenge that the company is facing currently. There could be several reasons why no sign-ups:

  • Low website traffic
  • Flaws on website design
  • Product itself

The business has running over 1 years, and the CEO, who is also the main instructor has over 10 years experience in yoga teaching. She already has a base of customers. For now, I don't consider traffic and the product at this stage, I want to put the emphasis on retaining users for the website and raise the chance of them getting involved.

Current problems on the home page

  1. Misleading messages about "make money" and "save money"
  2. Unclear instructions about how to save money
  3. Slideshow takes too much effort to understand
  4. Content is confusing
  5. It is gray when you open the home page, which not match the mood

Visual hierarchy of the home page

  1. "Get paid to get sweaty"
  2. Gray background
  3. Menu
  4. Slideshow - vivid color
  5. "Get fit together for less"

Survey

What's important to get into a yoga class?

I want to find out when people going to a website like LD, what are they looking for, in other words, what do they care for deciding if they want to take a yoga class?

I did a quick & short online survey. 203 yoga fans involved in the survey, 97.5% of them are female. 62% are from the age of 26 to 40, and 32.5% are from 17-25. They are also the main target audience of LB.

Why do you like yoga?

Apart from the result that the graphic shows, I have a lot "other" reasons (% out of people who choose other):

  • 27% Relief pain and fight health problems
  • 20% Cross training with running, weight lifting and rock climbing
  • 13% Building mind and body connection
lb-survey-why-yoga

What do you care about when you enroll a class?

75%-80% people care about the price and location, younger people are more sensitive to price, older people care more about instructor qualification and if they like way of teaching. Apart from what listed here, people also mentioned: class type, number of people in the class and class schedule. Also, 4 people said they watch videos and do yoga at home.

lb-survey-care-4-class

What's expected on the home page?

From the survey, I had a general idea of what users care about as yoga students. Comparing them with what the business have, and what the current website presented, a lot can be improved.

The following image is a mind map that include all what the students care about when they choose yoga classes. The deep orange is what's already on the website, and light orange is what people care much but not reflected from the website.

lb-mind-map2

Where does the traffic come from?

From the research info, people's review/quotes, business qualification and instructor qualification can be added to the home page. In addition, the layout of the home page should be adjusted too.

Usually people follow the link to the event page on the website, but if they click the home page, the reasons are usually are:

  1. Curious about the business - Facebook, Instagram, Search Engine 
  2. Look for further information related to the event/activity/course - MeetUp, Search Engine, Newsletters
  3. Look for further information related to unique selling proposition - Youtube, Vimeo, ad, Search Engine 
lb-ecosystem-map1
lb-ecosystem-map2

 

Stickers help me decide what to put on the home page

 

Competitor Research

I found 7 competitors website and compared their content layout, marketing info, business bio and special features. I found:

  • Comparing to the traditional yoga businesses, business as a platform pays more attention to express its qualification, reliability and scale.
  • No matter it's traditional or platform, they value community establishing by publishing article, blogs, news etc.

COMPETITOR SPREADSHEET

 User flow and wireframe drafts

 

Final wireframes

After several turnaround, I created the final wireframe of the home page. (Click right image to see the full size)

  • The basic strategy is the home page is mainly for the students. The call to action button will bring instructors to the page specially for them.
  • The header needs to be rephrased for both the students and instructors, and address the location.
  • Rewards program need further explanation, so the button will bring people to a rewards page
  • Different types of classes, schedule and location are people care about the most. I chose to present types of yoga instead of  "outdoors", "workshops" to look more professional. I also suggest to give more explanation about different types of yoga when they click into them, for helping users choose ones that fit them.
  • Added the quote section for people who care about other's experience with LB.
  • Added business partners section to show business reliability.

 

What's next...

For home page

  • Next round of user test on the home page. Bring the wireframe to the business owners and marketing team, gather feedback and do adjustments.
  • Fill up creative content, prepare visual material.

For the whole site

  • Information Architecture - decide the scale of the site
  • User flow and user stories (both students and instructors) - find the key page and guide the traffic to the key page
  • wireframe all the pages, including user panel.
  • test with user
  • style guide and visual part

After launching the whole site

Track metrics:

  • Overall traffic change
  • Where the traffic comes from, where does the traffic go on the site from different sources, where does it go after visiting the site
  • How long do people stay on each page, what attracts their attention
  • The efficiency of call to action buttons
  • Conversion rate
  • Bounce rate, find out the reason

Heatmap

  • What do users care about most?
  • Do they act as we expected?'

Gather experience from the direct users:

  • Survey after class through email/in the classroom
  • Informal interviews
  • Feedback from user panel