Ben's BP Fitness Project Website

User-Centric Frontend Development Milestone Project

View my live website here

UX Section
Wireframes
Assets
- Colors
- Fonts
- Images
Features
Technologies used for my website
Testing the functionality
Testing the compatability
User Stories Testing
Issues found during the development of my website
- Horizontal Scrolling Bar Issue
- Burger Menu Issue
Performance Testing
Code Validation
Deployment of my Website
Credits
Screenshots from my Website

UX

Project Goals

The primary goal for BP Fitness is to provide an easy to navigate, friendly and informative website for the BP Fitness gym. The main aim/ goal was to provide what BP Fitness has to offer and why people should join us whether that be as a student or on a full monthly or yearly membership. The target audience for this project were people of any age and gender who were looking for their first gym experience or looking to join a new gym, personal training sessions or gym classes they could attend to keep fit.

User Goals

New User Goals

User is able to find the personal trainers available to them at BP Fitness.
User is able to find the gym classes available to them as well as who will be teaching the class, the activity and what day/ time.
User is able to find and contact the gym by having the address & phone number/ email address in the footer for each page as well as an interactive map on the About BP Fitness Page.
User is able to contact the gym using the conact us page and selecting options for the reason contacting using the contact form options proivded.
User is able to contact us regarding dietary and workout plans which are cruical for reaching your body goals.
User is able to find the memberships available to them as wel as any offers/ discounts available at that time.

Returning User Goals

User is able to find the personal trainer and contact them for more personal training sessions.
User is able to find the gym class timetable.
User is able to find the membership options available to them.
User is able to contact BP Fitness through the Contact Us Page contact form.

User Stories

As A Business Owner

I would like to present my BP Fitness website to potential customers who are looking for a new gym or personal training sessions.
I would like potential customers to be able to contact us if they are interested in a new membership, personal training sessions, classes and general questions that may have.
I want to build relationships with current and new customers so they will stay with BP Fitness.
I would like my website to be responsive, well designed and easy to navigate around for new and current customers to find the information they are looking for easily.

As A New Member

I would like to purchase a gym membership or personal training sessions.
I would like a contact form and company details to find out more information about membership prices, personal training sessions, weekly classes, gym equipment and general questions/ company information.
I need to see the opening/ closing hours as well as a map of where the gym is located.
I would like the site to be easy to use so I can find out what I am looking for without any trouble.
I would like to see what personal trainers are available to me.

As A Returning Member

I would like to contact BP fitness to cancel my membership or book more personal training sessions.
I would like to check what classes are available.
To need to find out if there are any membership rewards/ offers.

Back to Table of Contents

WireFrames

Home Page and About BP Fitness Page Wireframes for Desktop & Mobile devices

Member Benefits and Contact Us Page Wireframes for Desktop & Mobile devices

Back to Table of Contents

Assets

Colors

The main colors used in my project were:

#333
#fafafa
#42e3f5
#0c1f34
#000

Fonts

The main font used throughout my project was Lato and my backup font used was Sans-Serif

Images

The images I used in my project were from Adobe Stock, Pexels, Pixabay & Unsplash

Back to Table of Contents

Features

The BP Fitness website consists of five pages altogether. There are four main accessible pages from the navigation menu and there is also a form submission confirmation page for the form on the Contact Us Page.

The BP Fitness website has the following features:

Navigation Bar

The navigation bar is visible at the top of the website for each page. I have made the navigation bar responsive and will adapt to all devices. At page sizes of 768px and less, a burder menu will appear instead of the navigation links to make it easier to navigate and make the website look more presentable.

Navigation bar elements:

The main logo which is BP Fitness in text is on the left of the navigation bar
The main navigation links are on the right hand side of the navigation bar. The navigation links are:
- Home
- About BP Fitness
- Member Benefits
- Contact Us

Footer

The footer is the same for each page and consists of:

The company phone number and email address are on the left hand side of the Footer.
The company address is in the center of the footer.
The social media links with the icons are on the right hand side of the footer.

Home Page

The layout of the Home Page is:

Navigation Menu
Hero Image at the top of the home page
Membership Offers
Member Benefits Available
Icons section
Member Testimonials
Footer

About BP Fitness Page

The layout of the About BP Fitness Page is:

Navigation Menu
Why Choose BP Fitness
Membership Options
What BP has to offer
Inside BP Fitness
Member Testimonials
Member Benefits
You can find us here
Footer

Member Benefits Page

The layout of the Member Benefits Page is:

Navigation Menu
Enjoy the member benefits we have to offer
Personal Trainers Available
Gym Class Timetable
Workout & Dietary Plans
Footer

Contact Us Page

The layout of the Contact Us is:

Navigation Menu
Contact Form
Footer

Future Implementations

Create Diet and Workout Plans Section for members to create their own plan from the website.
Add a login section for members.
Create a new section for Personal Trainers to make it easier for clients/ new members to contact them and find out more information about them.

Back to Table of Contents

Technologies Used for my website

HTML5

HTML5 was used as a structure language for my project.

CSS

CSS was used as a styling language for my project.

Bootstrap

Bootstrap was used as a CSS framework to keep my project responsive for all device sizes as well as imlement elements a lot easier.

Font Awesome

I used Font Awesome to implement icons into my project.

Google Fonts

I used Google Fonts to implement my primary font used in my project which was Lato and my backup font as Sans-Serif

Adobe XD

I used Adobe XD as a wireframe tool for my project.

Paint 3D

I used Paint 3D to edit the images I was using in my project.

GitHub

I used GitHub as a software hosting platform for my project.

Git

I used git as a version-control system tracker for my project.

GitPod

I used GitPod as my Development Hosting Platform for my project

Back to Table of Contents

Testing the Functionality

While building my website I found Chrome Developer Tools the best tool throughtout my project to help view my website as well as to find any issues within my coding and solve any problems that arose.

Testing the Compatability

Chrome Developer Tools was also great for testing the responsiveness of my website for many devices such as phones, tablets and laptop screen sizes. This allowed me to change many sections within my website without any difficulty and to still keep my website looking professional and still easily navigatable to different screen sizes.

User Stories Testing

As A Business Owner Testing

I would like to present my BP Fitness website to potential customers who are looking for a new gym or personal training sessions.

I have created a well navigatable website with a lot of information, images and content to provide customers information regarding BP Fitness.

I would like potential customers to be able to contact us if they are interested in a new membership, personal training sessions, classes and general questions that may have.

I have a contact form that customers can use to fill out any problems or questions that they may have and can find this form on the contact page.

I want to build relationships with current and new customers so they will stay with BP Fitness.

By offering great membership prices for customers but also students as well as all of the member benefits that are included within the membership to build relationships with our members.

I would like my website to be responsive, well designed and easy to navigate around for new and current customers to find the information they are looking for easily.

My website is navigatable from every page of the website and always at the top of the page for easy access. when the size of the screen is reduced to 768px the navigation links are removed and replaced with a burger menu icon to make navigation betweens pages a lot easier on smaller screen sizes.

As A New Member Testing

I would like to purchase a gym membership or personal training sessions.

To purchase a gym membership or personal training session, customers are able to contact us using the contact form.

I would like a contact form and company details to find out more information about membership prices, personal training sessions, weekly classes, gym equipment and general questions/ company information.

The contact form is on the contact us page where customers or members can ask any questions/ queiries or problems they are having and can find all of the company details in the footer at the bottom of each page.

I need to see a map of where the gym is located.

There is a interactive map customers can use to find where we are located on the About BP Fitness page.

I would like the site to be easy to use so I can find out what I am looking for without any trouble.

The website is made up of 4 main pages where all relevant information can be found as well as company contact details and a contact form to get in touch.

I would like to see what personal trainers are available to me.

Members can find out what personal trainers are available to them on the Member Benefits page and the Personal Trainers section.

I would like to see what gym classes are available to me.

Members can find what gym classes are available each week on the member Benefits Page and weekly gym classes section.

As A Returning Member Testing

I would like to contact BP fitness to cancel my membership or book more personal training sessions.

Members can cancel their memberships or can book more personal training sessions through the contact form on the contact us page.

I would like to check what classes are available.

Members are able to check the weekly gym class table for updates on the next set of classes.

To find out if there are any membership rewards/ offers.

Membership offers/ rewards can be found on the home or about bp fitness page with the relevant information regarding pricing and time limit.

Back to Table of Contents

Issues I have found during the development of my website

Horizontal scrolling bar at the bottom of my website

To fix this I created two classes in my style.css file.

The first class I created was for .row and I gave that the elements of margin-right and margin-left the value of 0.
The second class I created was for .container-fluid and I gave this the elements of padding-right and padding left the value of 0.

Burger Menu was not clickable on all pages except the home page

To fix this I found out that I had missed out the JavaScript code within the style of my web pages within the header. After copying the Javascript code and Bootstrap code from my Home page to my other pages, the web pages worked perfectly and navigated throughout my website.

Back to Table of Contents

Performance Testing

I used the Lighthouse tool to test the performance of my website pages.

Home Page Performance

About BP Fitness Page Performance

Member Benefits Page Performance

Contact Us Page Performance

Back to Table of Contents

Code Validation

At the end of building my website, I found these two websites to validate my code

I used CSS Validator to check the validation of my CSS code.
I used HTML validator to check the validation of my HTML code.

By checking the validation of my code using these two websites, I found a lot of small errors that I was able to change within my code that was incorrect.

One example was the incorrect code I had for comments within my code.

I had written my comments like this <! ----- content ----- !> and the code validator told me this was a warning

I then edited all of my comments to the correct style of <! ----- content ----->

Back to Table of Contents

Deployment of my Website

My project was deployed using GitHub pages and I used GitPod as my development hosting platform. I used the git commands to commit all of the changes I made to my project with an updated message of what changes/ improvements I have made. I then used the git push command to push my changes through to my GitHub pages.

To develop my website using GitHub pages

Log into my GitHub account and find my site repository.
Select Settings on the far right and find the GitHub Pages section.
Find the source section and set thhe branch to master the folder to the right to /root.
click save and page was deployed after auto-refresh.

To run my website locally

Log into my GitHub account and find my site repository.
Find the code dropdown tab and select Download ZIP.
After the download is complete, you can use these files in your local environment.

Back to Table of Contents