A clear and structured website for a local gym in Wembley, called Eagle Fitness. The website provides useful information about the gym to new and existing members. The primary goal of the website is to showcase the great features at the gym and provide sufficient information to attract new and existing members down to the gym.

Eagle Fitness

The ideal client:

• Lives in the local and surrounding area (Wembley)
• Disposable income.
• Interested in health and fitness.
• Loves going to the gym and/or working out.
• Over 16 years old.
• Need help achieving their fitness goals.

Users of this website are searching for:

• Timetable for classes.
• Membership prices.
• Opening and closing times.
• Gym location.
• What the gym has to offer.
• Facilities available at the gym.

This website helps users achieve this goal by:

• Showcasing clear information about the gym which is simple to read.
• Easy and quick to navigate through the website and find information needed.
• Separate pages for critical information which doesn’t confuse the reader.

Client stories

1. As potentially a new member, I want to see clear and concise information about the gym i.e Opening/Closing times, to see if it’s right for me.
2. As potentially a new member, I want to see what makes this gym special i.e Facilities and classes available to see if it’s better than competitors.
3. As potentially a new member, I want to know how much a membership costs, to see if i can afford it.
4. As potentially a new member, I want to know what existing members say about the gym, to see if it’s the right environment for me.
5. As an existing member, I want information on timetables for classes, so i can attend.
6. As an existing member, I want to be able to contact the gym, so I can discuss any issues.
7. As an existing member, I want information on opening and closing times, so I know when I can get down to gym.
8. As an existing member, I want to be able to see membership prices, so I can potentially upgrade or remind myself of what I have access to.

Eagel Fitness Wireframes

The home page first features a callout section which has a zoom animation to give a prominent impact when landing on the website however, on mobile this animation is not displayed only the static image. The callout section also includes a jumbotron which is used to display the title of the gym and the gym motto.

Next on the homepage is the “Why Us?” section which details the unique benefits that the gym has to offer. There are three main benefits in this section which separates Eagle Fitness from it’s competitors and are displayed in a column of 3 on desktop and in a separate row on smaller devices. Each benefits contains an image, title and small text explaining the feature.

Scrolling down is the facilities section which uses icons to display the great facilities at the gym. The icons paired with text provides clear and simple information what the gym has to offer. On larger screens these are displayed in columns of 3 and columns of 2 on smaller screens.

Next on the homepage is the review section. This is simply used to provide information on what current members think of the gym. 3 reviews are used for this section and displayed in columns of 3 on larger screens and in a separate row on smaller devices.

Scrolling down the page next is the “Where to find us” section which details important information about the gym such as Opening/Closing times, Gym address and google map image of the gym. The google map feature is used to make the user experience as easy as possible when trying to find the gym. This section also includes contact information for the gym which is vital for both existing and new members. The information is displayed in 3 columns on larger devices and below each other on smaller screens.

This page contains 6 different membership packages the gym has to offer. Each package includes the membership type, price and frequency in the title section which is then followed by information below on what the membership includes. For the title section a background colour is used to catch the users attention and make it easier to differentiate between the different prices. A styled list is then used to show the benefits of each package which makes it easier for the user to quickly read. On larger screens the 3 memberships are displayed on a row and on smaller devices shown one is displayed. A “Contact Us” button is displayed at the bottom of each membership package to allow users a quick call to action if they have any questions on the different memberships.

This page contains a timetable that display information on when the different classes at the gym are scheduled to take place. This is displayed using the days of the week and time of the classes as the table headers. Icons and small text is then used to show what type of class is scheduled to be on at a current time. Using the icon gives the user a clear and simple view of what type of class is scheduled as quickly as possible. The table is quick and easy to read which gives an all-round positive user experience. For smaller devices the table is fully responsive which allows users to scroll across to view the full timetable.

The gallery page is laid out using thumbnail images to showcase members having fun at the gym. On larger devices these are displayed in columns of 3 and on separate rows on smaller screens. Fancybox is then used to enable the user to see the images in a bigger size.

This page consists of a contact form for the user to fill out and ask their query. It includes fields such as name, email, number, enquiry type and a text field. This provides all the information needed for the client to get back in contact with the member and provide a suitable answer.

Header Navigation Bar - This feature is on every page on the website and provides links to all the pages on the website.

Zoom animation - This is used on the callout section on the homepage to provide a visual effect.

Membership page - This provides information on the different membership packages available.

Classes page - This provides a timetable with information on when classes take place at the gym.

Gallery page - This showcases the facilities and images of member having fun at the gym.

Contact Us page - This includes a contact form which the user can use to get in contact with the gym.

Call to action button - A “Contact Us” button is used throughout the site to allow the user quick access to the contact form.

Fancybox Viewer - Allows the user to view the images in greater detail and in a gallery format.

Footer - This feature is on every page on the website and provides the gym address and also links to the gyms social media.

Embedded Google Maps - This allows users a visual image of where the gym is on a map which will give them a better idea of where it is.

Add CAPTCHA to contact form - Protect the business from spam.

FAQ page - Allow users answers to commonly asked questions. Franchise page - Allow users information on opening their own franchise location.

Careers page - Alert users (personal trainers) information on current vacancies at the gym.

Promotional video- To showcase the features of the gym in a more dynamic way.

HTML and CSS languages to programme the website

Github - This was used to store and deploy the project

BootstrapCDN - The project uses Bootstrap4 to easily structure the website and make the website responsive.

Font Awesome - The project uses font awesome to style the icons throughout the website.

Google Fonts - The project uses google fonts to style the font used throughout the website.

Fancybox - This project uses fancy box to display images on the gallery page.

Hover.css - This project uses hover.css to add hover features throughout the website.

Google Maps - This project uses google maps to display the location of the gym on a map.

jQuery - The project uses JQuery to simplify DOM manipulation.

Testing information can be found in separate TESTING.md file

This project was developed using Gitpod then committed and pushed to Github.

The project is open source and was deployed using the following steps:

1. Once on the GitHub repository Eagle Fitness repository.
2. Select "Settings" which is located towards the top of the page.
3. Scroll down to the "Source" section within the "GitHub pages" section.
4. From the dropdown menu select "master-branch" and click save.
5. The site is now published and can be found using the link supplied in the Github pages section Eagle Fitness.

There is no difference between the the deployed version and the development version.

To clone this project from Github:

1. Follow this link to the Eagle Fitness repository.
2. Select the green button which has the options to "clone or download"
3. Copy the "Clone with HTTPS" link
4. Switch the current working directory to the location where you want to clone the repository
5. Use command "git clone" followed by pasting the "Clone with HTTPS" link

Centre - Content for the jumbotron text was copied from.

F45 - Content for the why us section text was copied from.

Mcgregor Fast - Content for the membership breakdown text was copied from.

Unsplash - All images for the site were obtained from.

I received inspiration for this project from my passion for health and fitness and the following websites;

Centr

F45

Mcgregor Fast