FLYBODY

View deployed site

Overview of project:

FLYBODY is a fitness website in Nigeria designed to educate and inspire people about the benefits of fitness and good health. How incorporating an exercise routine into our daily lives might alter our way of life. One of the major issues that fitness websites face in the fitness industry is a lack of sufficient motivation for people to engage in memberships or join fitness programs/workouts.

However, a small fraction of people are eager to begin their fitness adventure. This is FLYBODY’s target audience; we understand that everyone has different goals, lifestyles and interests. There is no one-size-fits-all workout plan.As a result, we developed several programs to meet the needs of our clients.We are here to understand our clients' needs and provide them with the appropriate programs to assist them reach their various fitness objectives.

We understand that embarking on a fitness journey can be daunting at times, especially if you are unsure of what equipment to use or which exercise programs to participate in. As a result, we are committed to building a fitness community at FLYBODY that provides a safe,entertaining environment for people to bond and form genuine relationships. This community would be focused on motivating one another to achieve their fitness goals, holding one another accountable, and highlight the benefits of being a member of a gym community.

Project Goal

FLYBODY is a website that encourages people to meet up for workout sessions or personal training on a regular basis. To create a community in which people can constantly motivate, socialize, and hold one another responsible for their fitness goals. The site would target people of all ages who want to stay fit, need motivation to get started, and are searching for a fitness community to join. FLYBODY would show the benefits of joining their community, how to join, and the advantages of FLYBODY over competitors.

Business Goals

As a gym owner I want to :

• Keep and attract new consumers so that we can generate constant revenue.

• Understand our clients' wants and issues so that we may provide them with the greatest customer experience possible and personalize programs to each individuals demand.

• Create a website that is extremely user-friendly for our customers so that they would want to stay on our page.

• Provide our clients with low fees so that registration is easily accessible to all classes of people.

• Strategically highlight our dedicated fitness staffs who are eager to engage with our clients so that customer satisfaction and retention rates are high.

• Showcase a well-equipped facility that is accessible to everyone at convenient times so that users can join our exercise community and create strong interactions that lead to retention.

• Create a visually appealing site that is entertaining and draws users to our facility.

• Create a robust website that is easy to maintain and keep up to date with current information.

User Goals

As a customer I want to :

• Easily navigate the site and get the information I need to take the necessary action.

• Be able to readily discover FLYBODY online on their social networks to ensure that the information and locations supplied are legitimate and trustworthy.

• Easily examine the gym's fees as well as their locations so that I can quickly determine if it fits my budget and is close by.

• View the class schedules and conveniently book/join classes online.

• Be able to easily locate a personal trainer online and learn more about them so I know what to expect.

• The site should be visually appealing in order to keep me interested and present appealing offers on the site.

• Log in to my account quickly and easily to track my fitness goals, book classes, and engage with the rest of the fitness community.

• Find low-cost memberships that can be tailored to my needs without breaking the budget.

Design

• Colour Scheme

  • The colours used on the site were picked from Glebstock's adobe palette.

  • FLYBODY's brand is represented by the palette. The colours were chosen to convey trust and honesty to the user throughout the website, as well as cleanliness and simplicity.

• Typography

  • To ensure consistency, the Oswald and EB Garamond fonts are used throughout the site. The two fonts give our site a distinct personality and elegance, as well as an appealing appearance.

• Imagery

  • The photos featured throughout the site were obtained from free image providers such as Unsplash, Pexels, Pixibay, and so on.

  • The photographs portray a modern aesthetic gym where members are having fun using the gym's facilities and equipment, as well as the energy that can be expected there. The graphics' purpose is to draw viewers' attention to the FLY BODY website, where they may register and join the community.

Wireframes:

The wireframe for the entire site is available here. This shows the site on both a desktop and a mobile device, with some tablet view wireframes indicating when the screen view is different and its interactions.

Features

On each of the five pages, a fully responsive navigation bar has been included. The navigation bar is made up of the gym's emblem on the far left and five different links on the right. On a mobile device, the five individual links condense into a hamburger icon in the menu bar, while the logo on the left side remains unchanged.

Each of the five pages has a footer with information about the head office location, additional locations present, a contact phone number, social media icons for FLYBODY social media presence, and a call to action button to join FLYBODY's community. The social media links offer the user with a sense of trust and allows involvement across their channels. The primary goal of the call to action button is to aggressively convert our users into potential clients by shortening the conversion funnel process.

To avoid lack of information/misinformation, a dismissive alert has been added on top of the navigation bar on each of the pages to remind users of new governmental laws due to the third wave of covid-19.

All five pages, including the homepage, feature a hero image with an overlay. The background graphic reflects the experience that can be expected at FLYBODY, as well as capturing the user's attention and keeping them engaged to complete a task. Giving the user a better experience which results in a lower bounce rate.

HOME

A hero image is shown on the homepage to grab the user's attention and keep them engaged with the site. The hero picture has an overlay and text header with a call to action button. To prevent overloading our viewers, the text has been kept brief, clear, and appealing, with a zoom in effect that appears when the site loads. When a user clicks the call to action button, a sign up form opens without requiring the user to leave the home page. The form just takes 1 minute to complete, and once submitted, the user would be led to a thank you page. This page informs the user of FLYBODY's appreciation of joining the FLYBODY community and what happens next.

Following the hero image is an about section that briefly defines FLYBODY's purpose and vision. This part is separated into two columns, one containing an image of the two female owners and the other containing a brief explanation of FLYBODY. On a mobile device, the image is hidden and only the brief description about FLYBODY's brand is displayed. This provides users with a background story of FLYBODY, what to expect, and a sense of belonging through the brand's story.

The facilities section under the about us section that informs the user of the kind of equipment/facilities available at FLYBODY. This feature shows the user what to expect and what is included when they go to the gym at FLYBODY. If the user agrees to join, they will be able to choose from a variety of equipment options.

The three primary groups are labelled with titles that provide a brief overview of the group's amenities. A "view more" button has also been provided to satiate users' interest about the types of equipment available at FLYBODY. If the user clicks the button, he or she will be directed to another website that will display all of the equipment in that group in the future, but for the time being, it will redirect the user to the home page.

More facilities were added to the amenities area to show users the value-added services provided by FLYBODY. The goal of this feature is to entice consumers to join the community ,by demonstrating to them that we are revolutionizing the fitness business by introducing innovative features that aren't commonly present in the industry.

The reviews section is located under the more facilities section. Customers who have used the FLYBODY facility offer their thoughts. To visually appeal to users, a female member utilizing a gym equipment is featured as a background overlay for the review area. The goal of this part is to acquire the trust of our users, taking into consideration that feedback is critical to a company's sustainability. This will urge the user to become a member of the FLYBODY community.

The section on why join us is identical to the section on more facilities, however the information offered here is more brief and convincing. In this area, we emphasize the advantages of becoming a member of the FLYBODY community over our competitors. To make it aesthetically appealing for consumers, icons are utilized to describe and underline the benefits of joining FLYBODY.

The team members section is located under why join us section. The faces behind the business's operational side are shown in order to acquire the trust of our users and create relationships with our members. For each screen device, the members are positioned differently. The photos of the members are four columns large on a PC, three columns wide on a tablet, and two columns wide on a mobile device. The photos are squared in shape with a curve at each edge, which makes the site visually appealing and clean.

This section's goal is to create trust with members and non-members. Our members should be able to identify the people behind FLYBODY and communicate with them about their fitness needs, questions and assistance.

Finally, on all pages, the footer has been separated into three equal columns. The first column includes information about the head office's location, phone number, hours of operation, and four social media connections. The second column lists additional FLYBODY gym locations as well as business hours on public holidays. The third column has a call to action button and a short headline that entices our users to sign up for our newsletter. The footer appears differently on different devices. The footer appears in three columns on a desktop and tablet, while only two columns display on a mobile device. The Join our community column has been disabled to keep the website clean and to optimize our users' user experience for the mobile device.

When the subscribe call to action button is hit on a desktop and tablet , a form appears for the user to fill out in less than a minute. When the form is submitted, the user is directed to a thank you page informing users of the next action. As a result, the subscribe call to action button is placed in the footer because if the user has finished reading the home page and decides to cultivate a connection with FLYBODY, they can do so quickly through the footer by engaging with the button.

RATES

Under the responsive navigation bar, the rates page has a hero image and with a text header . When you join FLYBODY's community, you can expect a lot of energy, as depicted by the banner image. This page displays the most cost-effective rates for the various memberships accessible to users. The user may quickly check the prices of all memberships on this page and choose one that fits their budget.

A call to action button is located beneath the rates, inviting the user to sign up. When the button is pressed, a form appears, prompting the user to provide their contact information, email address, and preferred location. When the user has completed filling out their information, they can submit the form and be guided on the next action.

Walk-ins are also welcome, and the price list is available. To maintain consistency across the site, the footer below the prices has the same information as the home page footer and is shown in the same manner on desktop, tablet, and mobile devices.

TIMETABLE

The timetable page has a fully responsive navigation bar with a hero image. The hero image depicts a sneak peek into the treadmill area at one of FLYBODY's locations. This is utilized to make our web site visually appealing to our users while also providing a sneak peek of the facilities at FLYBODY.

The timetable for the classes provided at FLYBODY can be seen under the header " august & September 2021 ". The timetable is displayed in a table format, with the times (5AM to 9PM) on the top row and the days of the week on the left side column. These classes are also available online and users can book them directly from their profile.

On a PC, the timetable is completely displayed, with lessons from 5 a.m. to 9 p.m. Monday through Sunday. The user can mouse over the classes to see what class is taking place and what time it is. The table helps the classes look concise and tidy.

On a tablet and mobile device, the table shrinks, but the days of the week are still displayed in the left column, and the times are not fully displayed, but the user can horizontally scroll to see the remaining times of the classes. The horizontal scroll added to the table is due to the device's breakpoint width. The timetablee is still visible to the user as clear and succinct.

Finally, for the same reasons as the homepage and pricing page, the footer is positioned beneath the timetable.

INSTRUCTORS

A responsive navigation bar, as well as a hero image with an appealing text header is featured, as are the other pages discussed, to capture our users' interest. In this part, we provide information to members and potential members about our employees, including their abilities and degree of expertise. This would make it easier for the user to find a trainer to fulfil their exercise needs. Outside, the user can readily identify/research these trainers to assess if they are professionals and trustworthy enough to communicate their fitness issues with.

The user may easily visit our facility and choose a trainer because we offer thorough information on our trainers on our website.The images of the instructors take up four columns on a desktop, three columns on a tablet, and two columns on a mobile device, were they are all centred. This arrangement makes it easy for the user to learn about each instructor without becoming overwhelmed. It appears clean and uncomplicated.

Then there's the footer section, which appears beneath the instructors' images and contains the same message as the preceding pages and is displayed in the same manner as the homepage.

LOGIN

As with the previous pages, the header has a responsive navigation bar and a hero image with a text. The hero image graphic displays a satisfied member working out at one of our facilities. The image's goal is to evoke a good emotion in our customers as they scroll down the page, as well as to help them imagine the experience they should expect at FLYBODY.

On a PC and a tablet, the body content of the login page is divided into two equal columns. The first column urges the user to register. It has an enticing header with a brief message and a call to action button for the user to sign up for an account. When the button is clicked, a form similar to the one used on the home page banner button appears. The goal of employing the pop up instead of redirecting the visitor to a new page is to speed up the decision-making process. As a result, it is used on the home page hero image button.

The second column contains login credentials that must be filled out by a FLYBODY member, as well as a log In button. The user is required to enter their email address and password. A placeholder has been inserted in both text inputs to aid the user in entering the correct information . After filling all of the fields, the user can click the Log In button to access their portal, where they can book lessons, join the FLYBODY community, and track their fitness goals/progress. These are future implementations that will take place. However, for the time being, clicking the button will take the user to the home page. If a user forgets their password, they can easily click the link beneath the log in button and follow the instructions on the following page; for the time being, the link returns the user to the home page.

On a mobile device, the invitation to create an account takes up the entire width of the screen as well as the login area. The "create an account" invitation and login area are separated by a short divider. The log in area requires the user to enter their credentials before logging in to their portal. The same way as the desktop and tablet views do, the user can retrieve a new password by clicking on the forgot password link. The Login page design was chosen to emphasize the content while also improving the user's reading and comprehension.

Then there's the footer, which has the same information as the previous pages.

JOIN US

The page has a responsive navigation bar, just like the previous pages detailed above. Underneath it is a hero image with text header. The graphic is designed to pique the user's interest and encourage them to continue scrolling down the page.

The hero image is followed by a contact form, which urges users to fill out the form in order to join the FLYBODY community. The user must provide their first and last names, email address, phone number, and preferred location. The user must then accept FLYBODY's terms and conditions before clicking the Sign Up button. On a PC or tablet, the form occupies 80% of the screen width; on a mobile device, it takes up the full screen. When the form is completed, the user is directed to the thank you page.

The footer is located beneath the form and conveys the same information as previously stated.

In the event that the user does not visit other pages to complete the form to begin their journey, this section allows them to quickly fill in their information to begin their journey with FLYBODY immediately.

THANK YOU PAGE

This page, like the other ones, has a responsive navigation bar, but there is no alert dismissive message. The hero image is set in such a way that it draws the user into the FLYBODY experience. A quick message appears beneath the hero image, thanking the user for signing up with FLYBODY. Under the brief statement with the following steps, a smiley face has been inserted. This page tells the user of the next actions to take so that the user knows what to expect. This is done in order to improve the user's experience as well as the overall aesthetic of the site.

The page also includes a footer that contains the same information as before.

Existing Features

• Navigation bar : This is present in all pages to allow the user to navigate through the different pages available easily without having to use the back button to go back to each of the pages.

• Header logo – The company’s logo " FLYBODY " is present in the navigation bar and represents the brand’s image. The user can click on this logo to return to the homepage whenever they leave the homepage to another page than using the home button not present.

• Call to action buttons: This exists on every single page and directs the user to either a sign up form / subscription form so the users can join /sign up for FLYBODY’s gym membership to experience the feel.

• Hero image : This exists on very single page and includes a static image on both mobile and desktop devices with a text header that attracts the users to the site. The image depicts the kind of experience/energy to be expected when the user joins FLYBODY and is meant to have a positive emotion on the user to keep them interested.

• Footer Section : This exists on every single webpage on FLYBODY. The footer section is divided into three sections both on a tablet and desktop device, while on a mobile device one column is hidden. The first section provides details about the address of the head office, phone number and opening hours. The second section lists all the FLYBODY locations and operation hours on public holidays. The third sections encompasses of a brief message to subscribe to FLYBODY newsletter . This section allows the user to view basic information about the gym such as locations and opening hours as well as allow them to easily subscribe to newsletters to keep up to date with latest updates and news. The subscription button column is hidden on a mobile device.

• Icons: Icons are used on every single page on FLYBODY site to convey a piece of information as well as beautify the appearance of the site.

• Rates page : This informs the user about the various packages offered at FLYBODY. The user can easily select a membership that suits its budget and sign up immediately.

• Timetable page: This informs the user of the current timetable for gym classes at FLYBODY. The timetable is a responsive table that allows the user to hover around the classes and scrolls horizontally when the user reaches certain breakpoints.

• Instructors page : From this page the user can easily browse through the various instructors and find out more information about them. The user can easily pick an instructor of their choice.

• Log In page: This page allows the user to easily input their details and login to their profile or create an account with FLYBODY if they notice they do not have an account/member.

• Join Us page: This page allows the user to fill in their contact details in order to join FLYBODY and for FLYBODY to contact you about news & updates.

• Thank you page : This page thanks the user for joining FLYBODY and informs the user of FLYBODY's next moves. This ensures that the user has up-to-date timely information.

Features To Implement In The Future

• On the homepage, there is a section called "Facilities." The "view more" button should direct the user to another link that provides photographs of the gym equipment as well as a video of people using the equipment.

• Login page - When a user logs into his or her account, a dashboard should be present which includes a community channel for users to chat and share their fitness goals,a fitess tracker and progress reports.

• A frequently asked question (FAQ) page which gives clarification to users by answering typical common questions. This would increase communication and brand trust.

• Timetable page - The user should be able to book classes straight from the timetable by clicking on the class name, rather than having to login to the FLYBODY portal first.

• Instructor page: The user should be able to click on the thumbnail images of the instructors, and the images should flip, allowing the user to see more thorough information about the instructor.

Technologies Used

LANGUAGES USED :

• HTML5
• CSS3

FRAMEWORKS,LIBRARIES AND PROGRAM USED

1. BOOTSTRAP 4.0: This was utilized to help with the website's structure, style, and responsiveness.

2. FONTAWESOME: This was used to offer icons on various pages to improve the site's design and convey information.

3. LORDICONS: This was utilized to transmit information while also beautifying the page's appearance.

4. GOOGLE FONTS: The fonts Oswald and EB Garamond were imported into the stylesheet for use in the project.

5. FIGMA: During the design phase, this was used to develop wireframes (for mobile and desktop devices) for FLYBODY gym.

6. GIT: This was the preferred method of version control. To commit and publish our project to github, we used the gitpod.

7. GITHUB: This is where the project's code is stored.

8. CHROME DEV TOOLS : This was used to test our site's responsiveness across various screen sizes.

9. VISUAL STTUDIO CODE: This was used for writing and testing out the project’s code to avoid internet connection interference.

Testing

This can be found in another file called TEST.md

Deployment

1. GitHub Pages

   This project was deployed using GitHub Pages. These are the actions taken to deploy this project :

   • Log in to GitHub and navigate to the repository to be deployed, which in our instance is located here

   • Click on one of the button options presented at the top of our repository, which is "Settings."

   • After you've clicked it, go down to the bottom of the website to the Github Pages section and click the link "Check it out here."

   • This opens the GitHub Pages tab. Select "Master" from the dropdown list under "source" and press "save."

   • Once the modifications are saved, the page will instantly refresh, displaying the link to the deployed site above the “source ” part on github pages.

   • Please keep in mind that clicking the link may alert the user that the page has not yet been deployed; however, this is not a problem; simply wait two minutes for it to refresh on the server and the site will be deployed.

2. Forking The Github Repository

   By forking the GitHub repository, we create a clone of the original repository in our Github account. This allows us to make modifications to the files without affecting the original repository.

   • Please sign in to your GitHub account.

   • Locate the repository to be duplicated, in this case FLYBODY.

   • Locate and click the “Fork” button at the top of the FLYBODY repository page.

   • This creates a copy of the repository in our account, allowing us to make modifications.

3. Making A Local Clone

   • Please sign in to your GitHub account.

   • Locate the desired repository in this case FLYBODY.

   • Locate the “Code” button at the top of the FLYBODY repository page. Click it and copy the HTTPS link that appears.

   • Activate your local IDE terminal.

   • Change the current working directory to the location where you wish the cloned file to be saved.

   • In the terminal, type “git clone” and then paste the link copied from HTTPS.

   • e.g "git clone https://github.com/Didisimmons/Flybody-gym.git"

   • The clone has been made once you press enter.

4. Download And Extract File From GitHub.

   • Please sign in to your GitHub account.

   • Find the desired repository, in this case FLYBODY.

   • Locate the “Code” button at the top of the FLYBODY repository page. Click it and select “download ZIP” .

   • Once this is downloaded, use any decompressing tool to open the zip file.

   • Once the file has been opened, any IDE of choice can be used to edit file and make changes.

Credits

CONTENT

• The code used to construct the hero image for all web pages was borrowed from the whiskey project at the code institute.

• The icons in the more facilities area of the homepage were inspired by another fitness website, which aided in the arrangement of the icons.

• The inspiration for the site's design came from extensive online study on various gyms accessible, such as Ignite,celebrity fitness and Zumba

• The design of the login page was influenced by another fitness website

• Code assistance with the positioning of team member photographs on the homepage and instructors on the teacher page was obtained from another peer's project here in code institute.

• Inspiration from another coding institute peer was used to help with the placement of the photos in the facilities section.

• This readme document was based on research on several readme documents such as the code institute's readme sample, the ajgreaves readme sample, and the code institute's love running project sample.

MEDIA

The images used on the website were obtained from image suppliers such as pexels, unsplash, and shopify burst.

• The image used as the hero image for the homepage is a photo by Karsten Winegeart from unsplash.

• The about us section image is a photo by Alex Starnes from unsplash.

• The Facilities part is divided into three sections, and the images used were obtained from the following individuals:

  • Cardio & weight lifting area – Photo by Dushane White from unsplash.

  • Swimming & Sauna area – Photo by HUUM from unsplash.

  • Cycling & Playground area –Photo by Andrea Piacquadio from pexels.

• A background photo can be found in the reviews section by Scott Webb from unsplash.

• The photos used for the team members were taken from :

  • For Jennifer Olaitan - Photo by Alex Starnes from unsplash.

  • For Jennifer Olaitan - Photo by Alex Starnes from unsplash.

  • For Pearl Olatunde - Photo by Ketut Subiyanto from pexels.

  • For Ross Ajayi – Photo by Brooke Cagle from unsplash.

  • For James Nwobodo- Photo by Mike Von from unsplash.

• The image used on the rates page as the hero image is a photo by Karsten Winegeart from unsplash.

• The hero image on the timetable page is a photo by Sven Mieke from unsplash.

• The background hero image for the instructors page is a photo from Marcos Paulo Prado from unsplash.

• The images of the instructors are taken from :

  • For Abayomi Daniels – Photo by Abdullah Ali from unsplash.

  • For Faith Mola – Photo by Samantha Hurley from burst shopify.

  • For Chris Akagbu – Photo by karsten Winegeart from unsplash.

  • For Lilian Esoyo - Photo by Madison Lavern from unsplash.

  • For Keffi Chuku - Photo by Omid Armin from unsplash.

  • For Brenda Hynes - Photo by Alora Griffiths from usplash.

  • For Brown Philip - Photo by Pikx by Panther from pexels.

  • For Rita Baj - Photo by Styves Exantus from pexels.

• On the Login page, the hero image is taken from pexels by Tima miroshnichenko.

• The hero image on the join us page is taken from karsten Winegeart by unsplash.

• The hero image used on the thanks page is taken from Victor Frietas by unsplash.

Acknowledgements

The inspiration for this project came from online research on different gym sites around the world, which was interesting because you could see how gym sites differed for different countries, regions and people. This was taken into account when developing the FLYBODY website for Nigeria.The planning and execution of this project demonstrated the importance and power of Chrome dev tools. How useful it can be during testing and development stages.

I'd like to thank the tutor support team for their help with all of my questions, as well as for providing guidance or alternatives to resolve an issue.

I'd also like to thank my mentor, Sammy Dartnall, for her ongoing feedback and advice on how to plan and carry out this project. Even with my poor internet connection during our meetings, she was very understanding and patient. Allowing the internet connection issue to have no impact on our meetings.