(Developer: Jae Phillips)
<!— TOC start —>
- FITNESS at HOME
A person who is interested in getting in shape at home, but does not know what type of workout they would like to do. They would come to this website to find a workout to do at home and be able to get in contact with a personal trainer to book in the next remote workout session.
When the user initially enters the site they are greeted with an clearly labelled navigation menu to all pages. This is followed by a welcoming hero image with text overlay that includes the slogan that explains the name and objective if site.
There is then a call to action button to "Start…".
At this point the user can click the call to action button or continue scrolling down, both options will take the user to information the exercises that they will be able to get information from the site.
The user will find three cards that each link to the exercise section it reflects. This is designed to help the user have easy access to the exercise content.
The site has been designed to have styling and usage ease and this is represented through The user has two options, click the call to action buttons or scroll down, both of which will lead to the same place, to learn more about the organisation.
The user has access to a call to action button at the bottom of the pages barring the home page, where it located below the hero image. This helps the user move freely throughout the site and not feel restrained to just that page.
When a user complete the user form on the contact page they will be returned to the home page.
On the Contact Us Page, after a form response is submitted, the page refreshes and the user is brought to the top of the page where the navigation bar is.
At the bottom of the Contact Us page, the user is told underneath the form, that alternatively they can contact the organisation on social media which highlights the links to them.
A person who is interested in getting in shape at home, but does not know what type of workout they would like to do. They would come to this website to find a workout to do at home and be able to get in contact with a personal trainer to book in the next remote workout session.
As a first time user:
- I want to know what exercises I can get support to do at home to improve my fitness
- I want to know the different exercise categories and workouts
- I want to easily be able to find out any further information and services offered.
- want to be able to easily be able to navigate throughout the site to find content
- I want to be able to contact you with any further questions I may have on the exercises or workouts.
- I want to be able to find you on social media in order to do further research on the company to determine legitimacy and following, in addition to the desire to want to become part of the community.
As a returning user:
- I want to see the exercises available to complete at home
- I want to know what exercises are new
- I want to know when the new exercises re being released
- I want to find Home Phitness on social media
- I want to leave a message or suggestion to the company
- I want to know who is putting together the workouts
As a frequent user:
- I want to log on to find out what new exercises have been released for the month.
- I want to get in contact to recommend exercises/ workouts.
- I want to get in contact with you directly with a query.
Exo | Lato | Oswald
The fonts that were used throughout the site are 'Exo', 'Lato' and 'Oswald'.
Exo was used for heading and sub headings as it has a bold standout style that looks digital but welcoming to reflect the digital workout tool. 'Lato' was used for buttons and call to action and menu for its ease of readability. Oswald was used for the body of text.
I used a simple black and white base to the site with vibrant yellow and blue accents to match the brand theme. These colours contrast very well for users who may struggle colour differentiation. The colours also allow for dark mode filters to easily changed the colours the user.
The exercise cards are colours based on their category, using red for 'Burn'exercises, yellow for navigation bar menu and buttons and the 'Build' exercises and blue for 'Stretch' exercises and active menu tab when dropdown selected.
Wireframes were designed at the start of this project to map out the site but the site has slightly changed since it its original conception to simplify the layout and add different elements and remove unnecessary elements for current features such as a music player.
In addition to not having originally planned to have a custom 404 page but adding it in during the project.
Web View Wireframes
Home Page
About Us Page
Exercises Page
Contact Us Page
Mobile View Wireframes
Mobile Home Page
Mobile About Us Page
Mobile Exercises Page
Mobile Contact Us Page
The page consists of four pages and nine features
- The navbar featured on all pages is fully responsive and changes to a toggler (hamburger menu) on smaller screens and includes links to the Homepage, About page, Exercises and Contact us page
- The link for the page the user is currently on is highlighted and bold text on active page tab.
Navbar Toggle Dropdown Images
- Featured on all five pages and consists of Home Phitness slogan, contact information and social media link and copyright.
Footer Image
- Gives a description of the hone workout company and the trainer that provides the exercises.
About Us Image
- Gives an overview of the different workout categories available on the site, which have ben broken down in to fat burning, building muscles and stretches.
Workout Categories Image
- Provides the information on what the exercise is and how long the user should be doing the exercise for, giving them a video hint or picture of exercise.
Exercise Card Image
- A way for user to get in contact with the company in order find out more information or get questions answered.
Contact Form Image
- Provides the user with information about the company including phone number, email and social media links.
Contact Info Image
- Provides the user with .
Error 404 Image
-
Bootstrap v5.3.0: Bootstrap has been used for overall responsiveness of the website, and for the layout to include navigation, cards, and footer within the relevant sections of the website.
-
MD Bootstrap 4: MD Bootstrap was used to get help in designing the footer and responsive content throughout the project.
-
Visual Studio Code/Codepen I used Visual Studio Code as the IDE application with Git for version control of this project. I also used Codeine to play around with my design ideas before committing to them.
-
GitHub: GitHub has been used to create a repository to host the project and receive updated commits from Visual Studio Code.
-
Balsamiq: I used Balsamiq to create the wireframes for the site to help me with the basic structure the layout and have a guide to design the project with.
-
Coolors: This online colour palette selector tool was used to see what colour would work well on the site.
-
Canva: Used to design the logo and 404 error page image.
-
Pexels Pexels was used throughout the site as they are copyright and royalty-free stock images and videos.
-
Google Fonts: The fonts where selected from and imported to style the text on the site.
-
Font Awesome: Font Awesome was used to apply icons in the Exercises page and Footer section.
-
W3C HTML Validation Service: The W3C HTML Validation Service was used as a validation tool to check for issues within the project's HTML documents code.
-
W3C CSS Validation Service: The W3C HTML Validation Service was used as a validation tool to check for issues within the project's CSS document code.
-
WAVE Web AIM Accessibility Evaluation Tool: This tool was used to test errors in accessibility such as the colour contrast, ARIA for this project.
-
A11Y Color Contrast Accessibility Validator: This online checker tool was used to check the contrast level of the content of each page.
-
Chrome/Firefox Dev Tools: Dev Tools were used to analyse the sites accessibility, performance, assist with debugging issues and running reports from Lighthouse/Page Speed Insights.
-
Squash (Compressor Application) This application was used to compress the image file to optimise the sites loading time.
-
Am I Responsive: Am I Responsive was used to create the header image for the README file to show the site in its responsive format.
The 'Phitness at Home' website was tested through on the following browsers:
- Firefox
- Google Chrome
- Safari
The site was also tested using different size screens to check the responsiveness of the code. I looked at the site on the following screen sizes:
- Laptop
- Laptop touch
- iPhone SE/XR/12/12 Pro
- iPad Air/Mini
- Pixel 5
- Nest Hub/Max
- Galaxy S8+/S20
This allowed me to see if the code was responding to the media queries ut in and the different CSS styling.
| Test | Steps | Expected Outcome | Result | Features Exercised |
|---|---|---|---|---|
| Navigation - Navbar | Go to Home page, click on each of the navbar links Home/About Us/Exercises/Contact, repeat this test for all pages. | Link works correctly and user is brought to the correct page each time. | PASS | Navigation bar/Toggle dropdown |
| Navigation - Dropdown | On any page click on Exercises from the navbar, to toggle the dropdown list of workout categories. | Dropdown toggle link works and shows the different categories of exercises. | PASS | Navigation bar/Toggle dropdown |
| UX - CTA Button | Go to Home page, scroll down past CTA button, 3 workout category cards with buttons linked to sections on Exercises page. | Link works correctly and user is brought to the correct page each time. | PASS | Workout Category Cards |
| UX - Workout Category Cards | Go to Home page, CTA button under hero image. Once clicked takes user to Exercises page. | User is taken to the top of the Exercises page, where the instructions are. | PASS | Workout Category Cards |
| UX - Footer | On any page user scrolls to the bottom, to find the footer. | Footer should look the same on all pages. Contact information and Social Media links should be visible and readable. | PASS | Footer, Contact Information |
| UX - Footer - Contact/Socials | On any page user scrolls to the bottom, to find the footer. Users can click on each of the social media links in the footer found on all pages. | Social media links should be clickable and open in a separate tab. | PASS | Footer, Contact Information |
| UX - About Us | From the Home page, click on the navbar link, About Us to find the information about the sites services. | All text is visible and appropriately positioned, text sizing and font are legible. | PASS | About Us |
| UX - Exercise Cards | From the Home page, click on the navbar link, Exercises or one of the chosen dropdown selections, or any of the Workout Category Cards & CTA buttons. On the Exercises page, users will find instructions on exercises within each workout category. | Videos & Images working and showing, alternative text available. All text is visible and appropriately positioned, text sizing and font are legible. | PASS | Navigation bar/Toggle dropdown, Workout Category Cards & CTA, Exercise Cards |
| Interaction - Burn Exercise Cards Videos | On exercises page, checking the images loaded, along with readability and positioning of the exercise information. | Videos play when user accesses the exercisespage and can control the videos upon right click. | PASS | Exercise Cards |
| Contact Form - name input check | On the Contact Us page, attempt to Submit message without entering name | User is prompted to enter a value in the name input field. Form is not submitted. | PASS | Contact Form |
| Form - email input check | On the Contact Us page, attempt to Submit message after entering a name but without entering email address | User is prompted to enter a value in the email input field. Form is not submitted. | PASS | Contact Form |
| Form - email input check | On the Contact Us page, user attempts to Submit message after entering a name and an invalid email address (i.e. email address that does not contain @) | User is prompted to enter a valid value in the email input field. Form is not submitted. | PASS | Contact Form |
| Form - radio selection check | On the Contact Us page, attempt to Submit form without selecting workout category but with valid name and an valid email address | User is prompted to selcted an option. Form is not submitted. | PASS | Contact Form |
| Form - submission | On the Contact page, complete the Contact Us form with valid inputs and click on Send Message | Form is successfully submitted. Code Institute formdump.codeinstitute.net page appears showing values entered on the form. | PASS | Contact Form |
| 404 Page | User types in the URL address to the site incorrectly. | User is taken to the Error 404 page and link is clickable to take back to home page. | PASS | Error: 404 Page |
| UX - Responsiveness | Repeat all above tests for desktop, tablet and smartphone screens sizes. a. Laptop 1920 x 1080 b. Desktop Ultrawide 2560 x 1080 c. Tablet 810 x 1012 d. Larger tablet 1024 x 1294 e. Large Smartphone 428 x 926 f. Small Smartphone 320 x 449 |
Verify expected outcomes for each test match original expected outcome. Screens should re-size so that text remains visible, positioning of screen items (text, images, buttons, input fields etc.) all remain visible and do not overlap unexpectedly. |
PASS | All |
| UX - Browser compatibility | Repeat all the above tests for the following browsers: - Firefox - Google Chrome - Safari - Opera |
Verify expected outcomes match that of original expected outcomes. Everything is visible and has been re-sized where needed. No Alternative text visible. | PASS | All |
I asked my peers to review the site when it was completed to give me their honest feedback, in order to make adjustments to the site based on real-time feedback.
"Home Phitness is a really straight forward and clear to use. I kind of struggle using websites as i have dyslexia sometimes find it quite difficult to read. Home Phitness did it for me i was really intrigued at how clear everything was. I found that the about us page was very clear and straight to the point giving me the options to select what i’m interested in and sending it through. My favourite part of the website was that you can find your own comfort of exercising at home this highlighted everything for me and i was more drawn in as finding the time to go gym is really long after a long day at work and having to travel. I loved how the “exercise” and “build” and “stretch” sections, demonstrated how to do the exercise followed by pictures and small video clips of how to do it, also the fact it had minimal writing and just set out how many to do and for how long really encouraged me. Overall fantastic website and look forward to seeing more workouts to add to my routine. I will definitely recommend to anyone who wants to start a journey in fitness at home."
I have looked at the features that the site offers and how it works in anticipation of user wants and expectations.
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| Navigation bar/Toggle dropdown | 4, 13, 14 | To navigate through the sites pages easily | Feature worked as expected for user |
User Testing Nav Bar
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| Workout Category Cards | 1, 2, 6, 7, 13 | Locating desired workout category | Feature worked as expected for user |
User Testing Workout Category Cards
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| Exercise Cards | 3, 6, 7 | To know what exercise, how to do it and how long for. | Feature needed further detail on how to do it for user |
User Testing Exercise Cards
- More instructions needed on exercise cards
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| Contact Form | 5, 10 | To be able to get in contact with company | Feature worked as expected for user |
User Testing Contact Form
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| Footer | 5, 6 | To scroll to the bottom of any page to find the footer | Feature worked as expected for user |
User Testing Footer
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| About Us | 3, 9, 12 | To gain insight on the company | Feature worked as expected for user |
User Testing About Us
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| Contact Information | 6, 10 | Find details to be able to get in contact directly | Feature worked as expected for user |
User Testing Contact Information
| Feature | User Story | Expected Outcome | Actual Outcome |
|---|---|---|---|
| Error: 404 Page | 3 | If the user goes to a page that does not exist | Feature worked as expected for user |
User Testing Error: 404 Page
- Exercise cards have instructions on exercise and all cards to have videos where possible - User Story: 3, 6, 7
- Sign up form feature to join a community newsletter to find out when new exercises are released - User Story: 8, 9, 13
The website was tested through W3C validator for HTML and CSS, WAVE Web AIM Accessibility Tool. I ran the site through the validation tools to check for errors whilst creating the project and to fix them within the code. The site was found ot have no errors in either HTML or CSS when using the validation tools as well as no contrast issues as shown when using the checker.
Lighthouse
Lighthouse
Lighthouse tool showed that there could be further improvements made on the performance of the mobile site.
Whilst developing this site I came across a few bugs/issues with the code written. I have listed the bugs and the fixes where possible.
-
Exercise Card Sizing
I was able to resolve the bug that was found in the exercise cards incorrectly resting when opened on different screen sizes. This was resolved through the use of Bootstrap.
-
Exercise Card Video Sizing
The exercise video for V-Crunches I was not able to resize the video to fit the length of the card without it distorting the video aspect ratio. I was not able to fix this bug.
The Push-ups video was another video that I was not able to get to stretch to be the same length as the other videos within the Burn category.
The website has been deployed through Github Pages using the steps below:
- Click on your repository Settings
- Scroll to Pages Tab on left hand and select
- Select source as "Branch: master"
- Refresh page
- Upon refresh banner states "Your site is published at https://jusjae.github.io/CI_MS1_PhitnessAtHome/"
- Test the deployment works by clicking on link.
The following steps will guide you to clone the repository:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open the CLI
- Change the current working directory to where you wnt the cloned directory to be located
- Type
git cloneand paste the URL from the clipboard$ git clone <https://github.com/jusjae/CI_MS1_PhitnessAtHome>. 7.Press 'Enter' to create your locally cloned repository.
You can create a 'fork' of the repository by following these steps:
- Go to the GitHub repository
- Click on Fork button in upper right hand corner
- This will create a copy of that repository within your Github
- Exercise card information was designed calculated by experienced Personal Trainer (Me!)
- 'MART Production' from their 'Workout at Home' collection
- 'Thirdman' for his 'Lifestyle' collection.
-
Components on the site courtesy of Bootstrap 5.3.0:
- Navigation Bar Toggle Dropdown Menu
- Card Deck used on the Exercises page
-
Components on the site courtesy of MD Bootstrap 4:
- Footer layout and styling of the buttons
Thanks to the following people for your help and support in completing this site for the Milestone Project 1 in completion of the Web Application Developmental Diploma delivered by the Code Institute.
- Mentor - Mo Shami
- Slack CI Community
- Stack Overflow Community
Phitness at Home is a fabricated company for the purposes of this project.
#readme, #ms1, #ci