Modernizing the Website for a Top-tier Gym in San Diego
Bryce Gonzales
Web Designer
Web Developer
Design Systems
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
