Modernizing the Website for a Top-tier Gym in San Diego

Bryce Gonzales

Web Designer

Web Developer

Design Systems Specialist

Canva

Figma

Wix

Can fully redesigning the website for Ocean Pacific Gym & Wellness increase gym membership sign ups and establish them as one of the top gyms in San Diego?

Client: Ocean Pacific Gym & Wellness

Project attributes: Web design | Content creation & writing | Website building | Design layout & strategy | Style systems

Introduction

About Ocean Pacific Gym

Ocean Pacific Gym (OPG) is a fitness club in Pacific Beach, San Diego, CA. They had just switched to new management, and were undergoing renovations and brand updates.

The new owner had been working hard to upgrade the gym with appealing amenities. His mission was to transform the gym into a clean, high-end establishment.

The problem

Their current website was not showcasing the gym’s new updates accurately. It had an outdated user interface, and was missing a lot of functionality. There was also a lack of photos portraying the extensive amenities offered by the new gym.

My role

My role in this project was to create a style system for the website and media branding, and redesign the whole site completely (including switching website builder software).

I also wrote, edited, and implemented new content, slogans, and descriptions for the new website and its sections / elements / blogs.

Preview of final designs

The plan

I wanted the terminology used on each page to emulate the new direction of the gym, create a design aesthetic conveying athletics, fitness, and lifestyle, and to showcase high value amenities such as:

Ice baths

Tanning beds

Saunas

Antique and classic workout equipment not typically found in gyms

Outdoor rooftop workout area with sunset and ocean views

Beachfront gym with 300 free member parking spaces

Lots of emphasis was placed on classes and high-end equipment to portray a new era for OPG, encouraging new members to join.

Original website

Branding color updates

Primary color

To start out, I pulled the primary blue from the logo and used it as a starting point for primary color shades and all other brand colors.

Secondary color

Using beach and ocean themes, as is established by the ocean wave in the OPG logo, I decided a vibrant color to contrast the primary blue would be a perfect secondary and CTA color.

Originally experimenting with oranges and reds pulled from images of sunsets, a golden yellow was chosen instead from a photo of a sunny day. This color was still vibrant and attention grabbing, but complemented the primary blue better than the other proposed colors.

The secondary color is to be used sparingly, with only CTA buttons utilizing the secondary color to draw attention and show difference between site navigation buttons.

Additional colors

Additional blue and green colors with lighter shades were chosen for graphical, vector, and other branding needs.

Changing Website Provider to Wix

Why change from GoDaddy?

Ocean Pacific Gym (OPG)’s website was built in and hosted by GoDaddy. GoDaddy’s website builder is very template based, and customization options were minimal.

In order to complete all design requirements and deliver OPG the best possible website, I proposed switching the website builder to Wix.

What makes Wix a better choice?

Switching to Wix gave me more options for design customization, the ability to utilize more plug-ins, and include more photos of the gym on site (among other perks). OPG gave me the go ahead, and so the original site was scrapped, and a new one was started from scratch.

Figma was used to mockup preliminary designs, as well as edit photos.

New site theme and photos

What is the new theme for the site?

Bold images were chosen to accompany site sections. A special photo filter was built so all photos would match aesthetically.

I established that descriptive text sections and titles should always portray information through the lens of “living an active lifestyle”, an un-official slogan of the gym.

Photo examples:

Only 3 of the 10 pages created for Ocean Pacific Gym & Wellness are shown in this portfolio. View them below.

⬇

A Purposeful Homepage

How does the new homepage function?

I wanted to give a preview of every facet of the gym on the homepage, and use those elements to link to more pages and information.

Design strategy for homepage

Showcasing location and where to park was important because OPG’s location next to the beach is high selling point

Connecting Instagram accounts to the homepage increased social reputation

I collaborated with the photographer to get a preview reel of the gym for the billboard

Membership pricing section was a high priority. I introduced the ability to sign up for and purchase gym memberships online

Final homepage design

A bold, modern design with a simplistic and purposeful layout.

Building an Informative Membership page

On the original website, there was no functionality to sign up online, and memberships did not have enough descriptive information for users to make a well informed decision.

Strategy for membership page

Emphasis on best selling plans at the top of the page (with a link to view all plans)

Link to membership portal login for members (not previously available)

A very detailed content section describing what membership consists of

A new section and links to sign up for military / first responder / student plans

The biggest priority for this page was including all the information a prospective member might ask when considering signing up.

By answering users' questions before they ask, I was showcasing OPG’s professionalism, attention to detail, and care for their members, settling any nerves prospective members may have.

Membership page snapshot

Showcasing amenities

As requested by the owner of OPG, a strong focus was put on showcasing the amenities offered by the gym, from wide class selection, to saunas, tanning booths, and ice baths. To showcase all amenities properly, I had to follow a few steps:

The amenities were broken up into 3 sections: Fitness equipment, Lifestyle upgrades, and Facilities amenities.

Strategy for amenities page

Obtaining information for every class including instructor, weekly schedule, class description, photo of class, etc.

Met with gym owner to talk about amenities he wanted showcased, and which ones he wanted highlighted

Walk through the gym and take visual and written notes of what photos were needed

Write descriptions of amenities to include next to photo

Amenities page snapshot

Growth results and design success

After receiving a full website update, Ocean Pacific Gym’s website saw substantial traffic growth, as well as a lowered bounce rate and increased time spent on the website. The gym’s membership sign up percentage also increased.

Due to increased sign ups, the gym was able to increase their membership prices while still maintaining an increasing number of new memberships.

Analytics metrics

These metrics were gathered from a 6 month “before & after” data collection period from the date of the website update.

(This means with more time the uplift will continue to become more substantial).

New design deployed August 1st 2022.

2,829

New members since site update

236%

Member percentage increase

$227,833

Monetary increase avg.

+28%

Site visits

-23%

Bounce rate

+43%

Time spent on site

Like this project

Posted Sep 16, 2023

The Ocean Pacific Gym website redesign emphasizes a modern aesthetic. It led to a membership increase of 236% and generated $227,833 in just 6 months.

Likes

Views