Fitness West PB

WEBSITE REDESIGN

Set goals. Smash the shit out of them. Repeat.

Fitness West PB is a small family-owned gym that’s been around since 1985 in the heart of Pacific Beach. This website redesign was a part of the final project for my San Diego Continuing Education Web Development course.

SCOPE OF WORK

Research

Prototypes

High-fidelity pages

Web development

CHALLENGE

The goal of this website redesign was to achieve a clean modern look while considering ease of use and functionality. The new design is meant to motivate and energize visitors urging them to come to the gym, buy memberships and commit to their fitness goals.

OUTCOME

Unlike the old website, this website was built to be responsive with industry standard information architecture for users to navigate and find relevant information faster and in fewer clicks.

TOOLS USED

Photoshop

Illustrator

Axure RP

Sketch

Research

MARKET

Growing preference for easily accessible, smaller gyms with specific fitness programs;

The industry is fragmented and highly competitive;

Gyms and fitness centers serve a market niche with local clientele.

33.6%

consumer growth

in 2017

Being a boutique gym, it has to focus on a specific target audience: local millennials with preferences towards personalization and experiences choosing simpler fitness practices. Offering flexible and affordable membership options will give this nice feeling of “no-commitment” and freedom.

72.4%

consumer retention rate

UX STRATEGY BLUEPRINT

Aspirations

Give a new website a special tone and voice to communicate the local PB community vibe to the target audience.
Motivate and energize visitors urging them to come to the gym, buy memberships and commit to their fitness goals.
Understand and cater to the needs of potential customers: online membership purchasing, consultation booking, etc.

Challenges

The website is extremely outdated and does not provide enough info about services or showcases facilities.
While the gym itself is small, local and runs like a boutique business, it lacks personality and sense of community.
A new website had to be low maintenance, so we couldn’t integrate a blog or social media feed.

Focus Areas

Users: local millennials with preferences towards personalization and experiences choosing group activities that don’t require any special equipment
Services: bodyweight training facilities, group classes
Use cases: get a free 2-day pass, schedule a consultation, check class schedule, view images of facilities
Areas of UX: Interaction design, visual design, content strategy, branding

Guiding Principles

Engage with users and get them interested enough to come to check out the actual gym
Make the process of choosing the right group class and time easy
Make it easy to book the initial consultation with a personal trainer

Activities

Market research
Card sorting and reverse card sorting
Information Architecture
Content Strategy
Wireframing
Prototyping
Visual design

Measurements

Increased number of visitors
Increased revenue from membership sales and secondary services

Styles

heading 1

heading 2

Heading 3

Bodycopy

BUTTONS

77 pt

36 pt

24 pt

16 pt

AA

bebas neue

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*( )_+

Aa

SF UI TEXT

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*( )_+

Main color

F03843

D0021B

Secondary color

F1F1F1

4A4A4A

Text color

9B9B9B

000000

Wireframes

HOME PAGE

Problem:

- The old website was not responsive, in fact, it was not even centered taking only the top left corner of the screen. It had both vertical and horizontal navigation menus which were very confusing as the website’s structure is very simple.

- The website was featuring a page “Latest News and Updates” that didn’t provide any up-to-date information.

- The website didn’t offer any images of the facilities and machines.

- The color palette of red, brown, yellow and grey didn’t make a good combination.

Gaps:

- Information Architecture

- Responsiveness

- UI Design

Solutions:

- The new website is fully responsive making it possible to access the website from any device.

- It features a well-thought information architecture and a clear navigation menu that was based on research findings. There are now several ways to get to the same page.

- Relevant and engaging pictures do not only help a user to navigate faster around the website, but also contribute to the creation of an energetic and motivational mood.

- All the information is displayed in a clear way with the help of visual aids. The website contains catchy headlines urging a user to make the first step towards his/her fitness goals.

MORE WIREFRAMES