Fitness Training

Chelsea Piers

New York's #1 Fitness and Wellness

Facility

Frame 59 (4).png

Understanding the Problem

“It is better to solve one problem five different ways, than to solve five problems one way.”

- George Pólya

chelsea_piers_nyc4-1080x675.jpg

Background Information

Chelsea Piers is the leading fitness & wellness provider in New York. Its mission to "improve the quality of life in New York by providing a place for all — adults, children, New Yorkers, visitors — to relax, play, learn and compete" has been greatly appreciated by many sports enthusiasts and parents with children all across North Atlantic.

Recently, due to the pandemic, Chelsea Piers has experienced a significant drop in the number of people enjoying indoor workouts. It had to shift its focus more on children's after-school programs. The company has also had many new competitors rising in its area, where sports and fitness gyms offered more competitive monthly rates and outdoor activities.

Challenges

 

Chelsea Piers has had trouble in finding its voice and identity that could differentiate itself from its competitors in New York, especially 24 Hour Fitness and Gold's Gym. Its customers have been switching memberships to basic and trying out other gyms, and their complaints have stemmed from "I don't see the difference between Chelsea Piers and other gyms; what make Chelsea Piers special?"

Chelsea Piers has decided it needed a major rebranding development to find its brand identity and the "crystal diamond" that could help it stand out from its competitive market. Also, it required some work in its website, where a comprehensive UX design was needed to improve its web design aspects to help users navigate the site more efficiently.

6B60C873-2219-2737-808822D4A41F16B7_carouselimage.jpg

My Role & Goals

I was hired as a Brand Strategist for this project and teamed up with other talented designers and strategists.

Our goals to achieve for Chelsea Piers were to:

- Identify Chelsea Pier's Brand Identity

- Incorporate UX Design strategies into the Website

Some of my primary responsibilities included conducting interviews with stakeholders, competitive analysis research, developing brand strategies, and working on UX design principles that can shape the structure and design of the website.

I also assisted the product manager in facilitating the entire journey's scrum process to ensure that we had time to design, test, reiterate, and develop while still meeting deadlines.

Gantt Chart

We established our initial gantt chart that lays out the timeline of each department's deadline and workflow. After the kickoff call, we prioritized identifying interviewees among stakeholders and other candidates who could provide us with valuable insights and conducting interviews, along with competitive analysis and other research synthesis.

We decided to initiate the process of brand strategies and UX design simultaneously, and after design changes were made, the development would begin correspondingly.

Gantt Chart.png

Figuring out Brand Strategies

“Brand is just a perception, and perception will match reality over time.”

-Elon Musk

Interview Research

To ask relevant questions to gain meaningful insights from our stakeholders, we ran a brainstorming session to jot down interview questions. Each member from every department worked on polishing questions about Chelsea Piers that could help our stakeholders elaborate their ideas and suggestions better, and we drew our affinity mapping with some of the keywords that we believed to be relevant to our research on notes.

Portfolio.jpg

UX Design 

- Who are the primary users/audience?
- How will the users be able to navigate through the website?
- What are the important nav pages to display?

- What are the most important messages that Chelsea Piers needs to

convey to its audience?

- How can Chelsea Piers incorporate some of the most keywords on

Google into its content on the website?
 

Brand 

- What is Chelsea Piers’ mission?
- What is Chelsea Pier’s purpose?
- What are Chelsea Pier’s traits as a Brand?

- Where does Chelsea Piers stand among its competitors?
- How should Chelsea Piers shape its position in terms of value proposition?

- What are some of the characteristics of Chelsea Piers?
- Describe Chelsea Piers in three adjectives

Stakeholders Interviews

Based on our discovery notes and foundations, we conducted our internal interviews with our stakeholders at Chelsea Piers, primarily those holding executive positions. It was paramount for us to understand the logistics of Chelsea Piers in terms of its foundation and vision. How the company's culture was shaped would inform us of the message they would be conveying to its customers. 

We gathered around three executives and asked them about Chelsea Piers, specifically geared toward their mission and vision for the company in the upcoming years. We inquired about their opinion on rising competitors in the New York City area and how they plan on challenging through innovative and unique brand strategies.

Stakeholders Interview copy 2.jpg

Aspirant Brands Analysis

The Chelsea Piers team asked us to enlighten them on what their aspirant brands were doing well to promote their brands instead of their direct competitors. Thus, we gathered our resources and picked 24 Hour Fitness and Gold's Gym as the best examples of wellness & fitness centers. We examined how they were marketing their brands to their customers and the types of messages they conveyed in terms of visual identity. We analyzed their visual contents and website functionalities for the sake of recommendations. 

24_Hour_Fitness_wordmark_blue.png
Gold's_Gym_logo.svg.png

Brand Identity

Through our research and interviews, we gathered enough information to assert the foundation of Chelsea Piers as a brand.

Brand Name: Chelsea Piers, the landmark wellness & health center in New York City
Vision: To lead the awareness of health and wellness and bring sports activities back to the city
Mission: To provide unique fitness & wellness services to all
Operations: Fitness programs, sports activities, children after school programs, well-being nutrients programs, summer camps
Values: Health, Wellness, Sports
Tone: Friendly, Caring, Understanding
Tagline: Fun and Play in One Place

Brand Guide.jpg

Brand Archetype

Next, we consolidated our findings and drew our brand archetype for Chelsea Piers. Brand archetypes provide a "framework based on human psychology to help your company build a worthwhile and valuable relationship," and it was essential for us to understand what type of archetype Chelsea Piers is to create a mission statement, define its narrative style, and build a communication bridge between Chelsea Piers and its audience.

We conducted our research, asked our stakeholders and current customers of Chelsea Piers, and drew our brand archetype chart, consisting of 12 different archetypes with distinct characteristics and meanings. According to our findings, we concluded that Chelsea Piers should be the "Caregiver" archetype. This caretaker can provide essential services to people for goods and focus on helping others achieve their goals. Since fitness and a healthy lifestyle are all about nurturing, maintaining good habits, and taking care of one's self, the idea of being compassionate, caring, and nurturing would be ideal for Chelsea Piers to embody, and we focused on Chelsea Piers being the provide of exceptional essential services.

Brand Archetype.png
Brand Archetype copy.jpg

Improving the User Experience

"Design is not just what it looks like and feels like. Design is how it works."

-Steve Jobs

Personas & Target Audiences

To understand the types of target audiences Chelsea Piers needs to focus on, we interviewed some of the current members at Chelsea Piers. Then, after reviewing and analyzing the demands of customer's needs, we divided the audience into two groups: Fitness Enthusiasts and Children Sports Caretakers (Parents who had to drop off their kids at Chelsea Piers for programs).

Through these personas, we were able to write user stories based on what the two customers said:

James: As a user, I want to work out and look good to show off to people, and the facility has to be kept clean and organized.
Christine: Asa a user, I want to make sure my kids are playing safe and having fun while learning new athletic attributes.

Personas 1.png
Personas 2.png
User persona.png

User Flow

Another information architecture we had to take into account was the user flow, and we created a constructive route of users being able to check out classes, available locations, and community blogs. 

Then, the website has to provide mechanisms that could enable the users to take action, which would lead to possible sales leads. Thus, we designed the route to take the users after learning about Chelsea Piers to either sign up or contact them, a constructive route of marketing and sales increase.

Design Challenges

The current website was the forefront information magazine where members and parents come to check out programs, ask questions, and find more ways to get involved with the company. Its design is interactive, organized, and modernly fabricated, but there are certain areas where comprehensive UX design is needed to improve user experience overall.

The two areas are separately issued in desktop and mobile and are associated with the navigation bar and the structure of the description under images. Both pose different UX design challenges and require different examples to examine.

CP 2.png

Challenge #1 Desktop Navigation Bar

The first challenge was to change the design of the top navigation bar to help users seek information more efficiently. The website needed the essential categories on the top navigation bar, and we would have the drop-down menu to include sub-categories. The problem was how to visualize it more effectively and how many categories to place on the bar. For this challenge, we came up with two design solutions.

Desktop - 1 (1).png

Solution #1

In this design solution, we stayed with the standard visualization of the navigation bar, which was to put all of the main categories horizontally and add up/down arrows to indicate which class has a drop-down menu. Under the drop-down menu, the menu will drop vertically and have the subcategories inside. This was a very conventional method, straightforward and suitable to the point, and a great choice of UX design for its simplicity. 

Desktop - 3 (1).png

Solution #2

In this alternative design solution, we suggested that instead of showing every category on the navigation bar, the most critical four categories should be up on the bar, and the rest of them can be hidden in the favicon, which can be opened and closed just like on mobile. The advantage of incorporating this style was to streamline the online experience both on mobile and desktop and prioritize the more essential categories for users to check out.

Frame 59.png

Final Solution

After discussing with the Chelsea Piers team, we decided to go with Solution #1, which was more conventional and familiar to users. Solution #2 was not really necessary for this website since there were not that many categories, and it was not suitable for desktops.

Challenge #2 Mobile Multiple Images and Descriptions

The second challenge resided on mobile, where there were several sections in which images of people and the facility were needed. The right design component had to be implemented to create a great visual hierarchy. We came up with three different designs that helped present images in order and kept the description short and more visible at the user's convenience.

iPhone 13 Pro Max - 3.png

Option 1

Organize images in a carousel using sliders

Utilize an accordion to make the description visible by the user's convenience

iPhone 13 Pro Max - 1.png

Option 2

Organize images in a carousel and let the users slide through

Keep the description visible

iPhone 13 Pro Max - 2.png

Option 3

Organize images in a carousel using sliders

Keep the description visible

Frame 60.png

Final Solution

After discussing with the Chelsea Piers team, we decided to go with Solution #2, which allowed the users to slide through the images without pushing the slider button, which was taking much real estate and seemed redundant. The placement of images was sufficient to let the users know that there would be multiple images. Having the description visible instead of hiding it under the accordion was much more efficient.

High Fidelity Mockups

After a long design and development period, our team finally brought the first fidelity mockups to life. We took what we discovered from our research and interviews, created routes and structures based on our information architecture.

Screenshot 2022-08-01 204513.png

Homepage (Desktop)

Screenshot 2022-08-01 204645.png

Instructors Page (Desktop)

Screenshot_20220801-205448_Chrome.jpg

Homepage (Mobile)

Screenshot_20220801-205501_Chrome.jpg

Contact (Mobile)

Screenshot_20220801-205423_Chrome.jpg

Featured (Mobile)

Live Site

After the testing, we revised and reviewed the website with our stakeholders and finally launched it live. You can check out the site here below:

058B2F05-2219-2737-805F5E7100BD31A6_carouselimage.jpg

Validation & Conclusion

After the launch, we received some feedback from the users, particularly parents who wanted the website to provide more general information about each program in details and be technically designed in a way for them to see descriptions more clearly. The feedback was somewhat positive, although most of them agreed that there was more work to be done necessary. The design team regrouped and planned what should be the next step, and we submitted our proposal to the management team for approval.