🏋🏻‍♀️ Overview

Fitness Playground owns a collection of boutique gyms in both Sydney and Darwin, Australia. Widely known for their beautifully designed gyms and functional training spaces. They are also known for their remarkable classes; running over 300+ classes each week. The gym chain also offers personal coaching with specialist coaches. 

💪🏽 The Challenge – Creating one brand experience

Earlier this year, Fitness Playground completed a new gym renovation which included the reveal of the new branding. The in-gym experience is fresh and exciting but the website, which acts as their digital shopfront, didn’t match this experience. There is a brand disconnect between the physical and the online experiences.

🏆  The outcome 

A brand new website that helps unify the brand experience from online to physical for the gym member.

🏃🏻‍♀️ Let’s see the process! 

size=large

😀 Defining the goals 

🧑🏼‍🦱 Bossman’s Goals

LEAD GENERATION

Generate leads which lead to a conversion 

BRAND

To ensure the new website embodies the new brand

🏃🏽‍♂️ User goals 

USER GROUP 1

People looking to join a local gym with great facilities

USER GROUP 2

People looking to join a class to stay fit, healthy, and motivated

USER GROUP 3

People looking for a one-on-one fitness experience

🧐 Who’s it for? 

clem-onojeghuo-U22pJ6BclUQ-unsplash

Persona 1

Persona 1

Persona 1

Persona 1

Male, millennial, lives in the Inner-west, business owner. He is somewhat active on social media, he frequently uses his phone, likes to hang out with the boys, and looks forward to winding down on Friday with a few drinks. He recognises the importance of eating healthy and exercising regularly. He wants to gain muscle and he’s pretty confident and familiar with how to use gym equipment but he needs to find a place to train. 

woman-using-her-laptop-3585034

Persona 2

Persona 2

Persona 2

Persona 2

Female, millennial, lives in the Inner-west, works as a creative at an advertising agency. She is active on social media, she looks forward to Friday night drinks with work colleagues and Sunday brunches with friends. She recognises the importance of eating healthy and exercising regularly but lacks motivation.  

thoughtful-young-ethnic-plump-lady-in-colorful-clothes-3843257

Persona 3

Persona 3

Persona 3

Persona 3

Female, millennial, lives in the Inner-west, works in HRShe doesn’t have a good work-life balance. She works long hours and quite often she will order takeaways. Work is stressful and she eats to help relieve the stress and anxiety she experiences. She has been slowly gaining weight. She realises she needs to make some lifestyle changes which includes eating healthy and exercising regularly but she finds gyms intimidating and she lacks confidence and motivation. 

🤓 Research

🤓 Research

Icon_-01

1K visitors a day

Icon_-02

Mobile users 65%

Icon_-04

Tablet users 2.5%

Icon_-03

Desktop users 32.5%

Icon_-05

Safari is the most used browser.

📱 User journey stories

👨🏽‍💻 User story 1

As a male, I want a facility to train in so that I can stay healthy. 

User Journey 1 – Gym Page 2

Design considerations:

Design considerations:

Design considerations:

Design considerations:

test-1

Images are ratio 1:1

Images are ratio 1:1

Images are ratio 1:1

Images are ratio 1:1

Images are ratio 1:1

Doesn't take up the entire screen

mobile-mock-ups-v2-2

Access to useful information

Access to useful information

Access to useful information

Access to useful information

Access to useful information

The placement of the gym information is relatively high. To ensure the user doesn’t have to scroll too far to see the information the user is seeking.

mobile-mock-ups-v2-3

Hierarchy

Hierarchy

Hierarchy

Hierarchy

Hierarchy

On a gym specific page, information is displayed clearly for the user to easily absorb.

mobile-mock-ups-gym-expand

The ability to show and hide information

The ability to show and hide information

The ability to show and hide information

The ability to show and hide information

We use accordions to ensure additional information is readily available for the user. 

mobile-mock-ups-v2-5

Lead capture

Lead capture

Lead capture

Lead capture

Lead capture

A form sits at the bottom of the page so the user can sign-up for a free trial easily.

👩🏻‍🎨 User Story 2

As a female, I want to train with other people so that I can stay motivated.

User Journey 2 – Classes

Design Considerations: 

Design Considerations: 

Design Considerations: 

Design Considerations: 

Design Considerations: 

mobile-mock-ups-white-all-classes

Interaction

Interaction

Interaction

Interaction

Interaction

It would only take two swipes to see all the different class categories there are available at Fitness Playground.

mobile-mock-ups-white-our-classes

Hierarchy

Hierarchy

Hierarchy

Hierarchy

Hierarchy

Individual classes are displayed clearly along with class descriptions.

mobile-mock-ups-white-form

Lead capture

Lead capture

Lead capture

Lead capture

Lead capture

A form sits at the bottom of the page so the user can sign-up for a free trial easily.

mobile-mock-ups-white-thankyou

End to end experience

End to end experience

End to end experience

End to end experience

End to end experience

Thank you page to inform the user their information has been submitted and received. 

👩🏻‍🦰 User story 3

As a female, I need someone to help motivate me so that I can lose excess weight.

User Journey 3 – Coaches

Research conducted with members shows making the decision to sign up for a coach is not an easy one. Many factors such as price, benefits, time and preconceptions are amongst some of the main roadblocks. 

A carefully constructed web page to help assist with these roadblocks were the driving force for design decisions.

mobile-mock-ups-black-coaches-survey

Questionnaire

Questionnaire

Questionnaire

Questionnaire

Questionnaire

Upon landing on the coaches page the user has the option to choose what type of information they want to see. 

mobile-mock-ups-black-coaches-weightloss

Information hierarchy

Information hierarchy

Information hierarchy

Information hierarchy

Information hierarchy

Each section is carefully designed to cater to a different type of user. 

mobile-mock-ups-black-daniela

Expert coaches

Expert coaches

Expert coaches

Expert coaches

Expert coaches

It was important to feature key coaches at Fitness Playground. Their expertise in different training methods was essential to who users. 

mobile-mock-ups-black-coaches-faq

FAQs section

FAQs section

FAQs section

FAQs section

FAQs section

We added a FAQ section to answer any niggling questions a user might have about getting coached.

🎉 How will we measure success?

User experience success will be determined by the member experiencing a single brand experience.

Website success will be determined by experiencing high lead capture with a high conversion rate.

🚧 Road bumps – Project learnings

  • Limited resources - a small team. 
  • The scope of the project kept growing which meant the project launch date kept being postponed. 
  • Not enough user research and user testing.  
  • Balancing design, development, marketing and management priorities. 

👯Team

Lead UX/UI Designer - Alice Lo

Lead UX/UI Designer - Alice Lo

Digital Designer - Suh Putra

Project Manager - Alessia Murer

Project Manager: Alessia Murer

Copy Writer - Alessia Murer

SEO - Mike Hagley

Say Hello

Say Hello

© Copyright Alice Lo