(Developer: Jamie Letts)
This is the website for Tooting Boxing Club, it is designed to be responsive and accessible on all devices allowing easy access to the timetable, class schedule and information on the club and coaches.
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
Primary goal is to provide an informative good-looking website that showcases Tooting Boxing Club and encourages the user to come to the gym, buy classes or 1-1's or get in touch via the website. It is designed to ensure access to a returning user,s main objectives (contact, purchases and bookings) is user friendly and efficient.
- A well displayed easy to navigate website.
- Clear information on what the club does and offers.
- Easy access to get in touch for more information.
- Visual display of the club to help the user see and get a feel for the gym.
- Call to action buttons to allow a user-friendly experience buying and booking classes.
- Enough information on the club, owners, coaches, and classes for the user to have a good understanding of the company and its employees.
- Increase in the number of paying clients.
- Promote the business.
- Provide a way for new and existing clients to contact the gym.
- Provide easy access to booking classes and arranging private sessions.
- Provide detailed pricing and payment options.
- Provide information on the gym, its classes, coaches, and owners.
- A clean design that stands out and catches the users attention.
- A website that responds correctly on all devices where design and effectiveness is not hindered on any device.
- An easy to navigate website with clear pathways to specific pages such as class booking, prices and information on the club and coaches.
- A project the developer would be proud to display in their portfolio.
- Ages 16 and up.
- Anyone who is interested in learning to box.
- All levels and abilities welcome.
- Mainly individuals but not limited to.
- A simple and intuitive navigation system.
- Quickly and easily find relevant information.
- Links and functions that work as expected.
- Good presentation and a visually appealing design regardless of screen size.
- An easy way to contact the gym.
- Simple content that the user can skim read.
- Accessibility.
- As a first-time user, I want to know where the gym is located.
- As a first-time user, I want to know the prices for classes and 1-1’s.
- As a first-time user, I want to know when classes are on throughout the week.
- As a first-time user, I want to know more about the club, its history, and its coaches.
- As a first-time user, I want to get a feel for the classes and atmosphere in the gym.
- As a first-time user, I want to easily contact the club should I have any questions.
- As a returning user, I want to easily log in to my account or create one.
- As a returning user, I want access the schedule quickly to book in.
- As a returning user, I want to find a phone number, email, or a means to contact to arrange a 1-1 or ask for more information.
- As a returning user, I want to find the gym on social media.
- As a returning user, I want to get directions to the gym.
- As a returning user, I want to know more about what each individual class involves.
- As a returning user, I want to purchase sessions, memberships or 1-1’s.
- As the site owner, I want users to easily access their account.
- As the site owner, I want users to get a feel for the club, coaches and its founders.
- As the site owner, I want the users to be able to contact the club.
- As the site owner, I want the user to easily book into classes.
- As the site owner, I want users to easily make purchases.
- As the site owner, I want to ensure users are directed back to the website should they come across a 404 error.
The layout I chose ensures each specific point of information is easy to access and follows a similar theme to ensure continuity. Tooting Boxing Club is a new, high end and authentic boxing gym so I want the website to be slick and clean to represent that.
As Tooting Boxing Club is a club that is influenced by the past, I wanted to add hints of authentic and classic colour (yellow and red) used in boxing posters from the 70's and 80's - a truly classic era of boxing.
The branding colours I chose are Black, White, A slightly Mustard Yellow and a Burnt Red.
Primary Colours - Black / White
Secondary Colours - Yellow / Red
Black, Yellow, and White being the most predominant as they stand out so well against each other.
I also use subtle greys when a white background is too garish.
Specific colours used on the site all taken from a colour picker in InDesign are:
- Black: #000000
- White: #ffffff
- Off-white: #f1f1f1
- Off-white: 2 #C0C0C0 (also used for Silver)
- Light grey: #e1e0e0
- Yellow: #e9c431
- Red: #a51e1e
- Shadow Grey: #726a6a
- Bronze: #CD7F32
I tested multiple options on InDesign to ensure I was happy with the colours and had covered as many other options as possible I also liked. After deciding on the colours I tested them on WebAIM to make sure how the contrast between them worked best.
Google fonts were used to import the 'Martian Mono and Nunito Sans' font used throughout the website:
Martian Mono only used for title headers as it helps them stand out being slightly different and makes an impact as the user lands on the page.
I use these fonts as they are clean, easy to read and have a smart appearance and as they are not a commonly used fonts still manage to portray a unique and individual look to them.
The page is structured in a user friendly and visually appealing way. Upon arriving the user will notice the recognisable navigation bar, with the company logo on the left and next to that a WhatsApp symbol for quick and convenient contact via the app, all navigation links are placed on the right.
The website consists of six separate pages a ‘Sign In’ modal and modals used for class descriptions:
- A homepage with a section giving more information on the club (Strapline and short introduction, gallery, reviews and map)
- An About page with information on the founders and why they started the club.
- A Team page that introduces the user to the coaches.
- A Prices page with details on the different options for classes and 1-1’s.
- A Class Schedule page with the class timetable and details on the different classes the gym puts on via a modal.
- A Contact page with a form for getting in touch.
- The Sign In icon takes the user to a sign in modal, there is no page.
- Bootstrap v5.3
- Git
- Github
- GitPod
- Tiny PNG
- Balsamiq
- Google Fonts
- Adobe Suite (Illustrator, Photoshop & InDesign)
- Font Awesome
- Favicon
- Giphy
- W3C validator
- Jigsaw CSS validator
- WAVE Web Accessibility Evaluation Tool
The page consists of six pages and fourteen features.
- Featured on all six pages
- The navigation bar is fully responsive and changes to a toggler (hamburger menu) on smaller screens and includes links to the Homepage, About page, The Team page, Prices Page, Class Schedule Page and Get In Touch page.
- It allows users to easily navigate the pages.
- The link for the page the user is currently on is highlighted in yellow.
- The left includes the gym’s logo which also acts as a home button with a WhatsApp logo which opens WhatsApp chat with the gym when clicked.
- The navigation bar includes a sign in icon that opens a modal to sign in or sign up.
- User stories covered: 6, 7, 8, 9, 14, 17, 18.
- Company logo with 2 buttons underneath it one that takes the user to the schedule page and one that takes the user to the prices page.
- Background image of two boxing gloves fist bumping depicting a sense of unity and bond, representing the ethos of the gym.
- User stories covered: 5, 8, 13, 17, 18.
- This introduces the user to the club ethos and principles and gives a little taste of how the user benefits from joining.
- User stories covered: 4.
- Introduces the user to the gym and its classes and coaches with a five-picture slide show.
- Options for the user to navigate the slide show via back and forward arrows or indicators are located to the left and right centre of the image.
- User stories covered: 5.
- Four reviews from members detailing how much they like the gym.
- User stories covered: 4, 5.
- Shows the gym location on an embedded Google Map.
- User stories covered: 1, 11.
- Featured on all six pages.
- Consists of two separate sections: contact information and social media links.
- User stories covered: 6, 9, 10, 11.
- Introduces the user to the founders, Sam and Rick and their history in boxing.
- Provides links to their boxing achievements to find out more on their careers.
- Details why they started the gym and gives an insight to what can be expected when going.
- User stories covered: 4, 5, 15.
- Features a short bio of the of each coach under their own profile picture.
- Under each bio is a button that links to the schedule for easy access to booking classes.
- User stories covered: 4, 5, 12, 15, 16.
- Pricing is broken down into four subtitles:
- Intro Offers
- Memberships
- Class Packages
- Personal Training
- This helps for easy navigation and good aesthetics.
- User stories covered: 2, 13, 14, 18.
- Weekly schedule details what classes on are on each day of the week, what time they are on, and which coach is taking the class.
- A description of the class is available with more detail on a modal when the class description is clicked.
- User stories covered: 3, 5, 8, 12, 15, 17.
- A contact form allowing an easy way for the user to ask questions or book 1-1’s.
- User stories covered: 6, 9, 16
- Sign In Modal on the navigation bar allows for immediate and easy log in to the users account.
- Class Modal gives a more detailed description of the class including the experience level required.
- User stories covered: 5, 7, 11.
- For a bit of fun, I added light-hearted boxing related humour to the error page.
- Includes navigation bar and footer, with a centrally placed 'Home' button for convenience.
The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with no errors.
index.html results
about.html results
team.html results
prices.html results
schedule.html results
contact.html results
404.html results
The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. When pasting in my index url 16 Parse Errors are flagged, all linked to Bootstrap as well as 327 warnings.
style.css results
When validating just my own custom CSS file it passes with no errors and flagged some warnings for the moz, o and webkit transitions used and 1 warning for the google fonts import used.
The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors.
index.html results
about.html results
team.html results
prices.html results
schedule.html results
contact.html results
404.html results
Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website. All aspects performing well.
The website was tested on the following devices:
- MacBook Pro
- Ipad Tablet
- Google Pixel 5
In addition, the website was tested using Google Chrome Developer Tools device toggle option for all available device options.
The website was tested on the following browsers:
- Google Chrome
- Apple Safari
- Mozilla Firefox
- As a first-time user, I want to know where the gym is located.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Map | On Index page scroll down the bottom | Locating a map showing the location of the gym | Works as expected |
Footer - contact information section | On any page scroll down to the footer | Find the address of the gym | Works as expected |
2. As a first-time user, I want to know the prices for classes and 1-1’s.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Hero Image | On Index page click on 'Buy Now' button on hero image | Find Prices page with all pricing | Works as expected |
Navigation Bar | On any page at the top click on 'Prices' | Find Prices page with all pricing | Works as expected |
3. As a first-time user, I want to know when classes are on throughout the week.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Class Schedule' | Find Schedule page with class timetable | Works as expected |
Hero Image | On Index page click on 'Book Now' button on hero image | Find Schedule page with class timetable | Works as expected |
Coach Page | Click on any 'Book Me' button | Find Schedule page | Works as expected |
4. As a first-time user, I want to know more about the club, its history and its coaches.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'About' | Find About page with more information on the founders | Works as expected |
Navigation Bar | On any page at the top click on 'The Team' | Find Coaches page with more information on the coaches | Works as expected |
Company Introduction | On Index page scroll down to 'Tooting Boxing Club' title | Find introduction and short description of the gym and its values | Works as expected |
Slide Show Gallery | On Index page scroll down to gallery | Find images of the gym on display in a carousel | Works as expected |
5. As a first-time user, I want to get a feel for the classes and atmosphere in the gym.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'About' | Find About page with more information on the founders and the gym | Works as expected |
Navigation Bar | On any page at the top click on 'The Team' | Find Coaches page with more information on the coaches | Works as expected |
Company Introduction | On Index page scroll down to 'Tooting Boxing Club' title | Find introduction and short description of the gym and its values | Works as expected |
Slide Show Gallery | On Index page scroll down to gallery | Find images of the gym on display in a carousel | Works as expected |
Reviews | On Index page scroll down to reviews section | Find Reviews from members | Works as expected |
Class Modal | Click on any class name on the schedule | Find a modal pop up going into more detail of chosen class | Works as expected |
6. As a first-time user, I want to easily contact the club should I have any questions.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Get In Touch' | Find Contact page with contact form | |
Navigation Bar | On any page at the top click on 'WhatsApp' logo | Find WhatsApp app open with direct line to chat | Works as expected |
Footer - contact information section | On any page scroll down to the footer | Find the email and phone number of gym | Works as expected |
- As a returning user, I want to easily log in to my account or create one.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Sign In' | Find Sign In Modal | Works as expected |
8. As a returning user, I want access the schedule to quickly to book in.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Class Schedule' | Find class schedule and booking options | Works as expected |
Hero Image | Click on 'Book Now' button | Find class schedule and booking options | Works as expected |
Coach Page | Click on 'Book Me' button | Find class schedule and booking options | Works as expected |
9. As a returning user, I want to find a phone number, email, or a means to contact to arrange a 1-1 or ask for more information.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Get In Touch' | Find Contact page with contact form | |
Navigation Bar | On any page at the top click on 'WhatsApp' logo | Find WhatsApp app open with direct line to chat | Works as expected |
Footer - contact information section | On any page scroll down to the footer | Find the email and phone number of gym | Works as expected |
10. As a returning user, I want to find the gym on social media.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Footer - Social Media Section | On any page scroll down to the footer | Find social links on the right | Works as expected |
11. As a returning user, I want to get directions to the gym.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Map | On Index page scroll down the bottom | Locating a map showing the location of the gym | Works as expected |
Footer - contact information section | On any page scroll down to the footer | Find the address of the gym | Works as expected |
12. As a returning user, I want to know more about what each individual class involves.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Class Modal | Click on any class name on the schedule | Find a modal pop up going into more detail of chosen class | Works as expected |
13. As a returning user, I want to purchase sessions, memberships or 1-1’s.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Hero Image | On Index page click on 'Buy Now' button on hero image | Find Prices page with all pricing | Works as expected |
Navigation Bar | On any page at the top click on 'Prices' | Find Prices page with all pricing | Works as expected |
- As the site owner, I want users to easily access their account.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Sign In' | Find Sign In Modal | Works as expected |
15. As the site owner, I want users to get a feel for the club, coaches and its founders.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'About' | Find About page with more information on the founders and the gym | Works as expected |
Navigation Bar | On any page at the top click on 'The Team' | Find Coaches page with more information on the coaches | Works as expected |
Company Introduction | On Index page scroll down to 'Tooting Boxing Club' title | Find introduction and short description of the gym and its values | Works as expected |
Slide Show Gallery | On Index page scroll down to gallery | Find images of the gym on display in a carousel | Works as expected |
Class Modal | Click on any class name on the schedule | Find a modal pop up going into more detail of chosen class | Works as expected |
16. As the site owner, I want the users to be able to contact the club.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Get In Touch' | Find Contact page with contact form | |
Navigation Bar | On any page at the top click on 'WhatsApp' logo | Find WhatsApp app open with direct line to chat | Works as expected |
Footer - contact information section | On any page scroll down to the footer | Find the email and phone number of gym | Works as expected |
17. As the site owner, I want the user to easily book into classes.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | On any page at the top click on 'Class Schedule' | Find Schedule page with class timetable | Works as expected |
Hero Image | On Index page click on 'Book Now' button on hero image | Find Schedule page with class timetable | Works as expected |
Coach Page | Click on any 'Book Me' button | Find Schedule page | Works as expected |
18. As the site owner, I want users to easily make purchases.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Hero Image | On Index page click on 'Buy Now' button on hero image | Find Prices page with all pricing | Works as expected |
Navigation Bar | On any page at the top click on 'Prices' | Find Prices page with all pricing | Works as expected |
19. As the site owner, I want to ensure users are directed back to the website should they come across a 404 error and page structure is not lost.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Home button | On 404 error page click on 'Take Me home' button | Find home page | Works as expected |
Navigation Bar | Click on any link to navigate back to desired page | Find desired page | Works as expected |
- Buttons on index.html hero image
- Having tested their position on all devices, I noticed using a margin of a specific px cause them to be out of place on different devices. Using a 'rem' unit paired with specific media queries commands instead allows them respond better ensuring they are in a good position on all devices.
.hero-btn {
display: block;
text-align: center;
z-index: 1;
position: absolute;
margin-top: 15rem; (originally used a pixel unit here)
}
@media screen and (min-width:820px) and (max-width:912px) {
.hero-btn{
margin-top: 20em;
}
}
@media screen and (max-width:480px) {
.btn.btn-dark {
width: 125px;
}
.hero-btn {
font-weight: none;
}
}
@media screen and (max-width:280px) {
.hero-btn {
margin-top: 175px;
}
.btn.btn-dark{
margin-bottom: 10px;
}
.hero img {
height: 15vh;
margin-bottom: 25px;
}
}
- Having looked at this in more detail it just wasn't working correctly, it caused the logo and buttons to be at different positions on lots of different devices and was messy. I decided to re-write the code and see if there was a different way of doing it. I found a solution, here is the old code and the new:
<div class="hero">
<div class="container-fluid">
<img src="assets/images/logo-05.png" alt="Tooting Boxing Club boxing gloves logo">
</div>
<div class="hero-button text-center">
<a href="prices.html" class="button">Buy Now</a>
<a href="schedule.html" class="button">Book Now</a>
</div>
</div>
<div class="hero">
<div class="container-fluid hero-content">
<img src="assets/images/logo-05.png" alt="Tooting Boxing Club boxing gloves logo">
<div class="hero-button">
<a href="prices.html" class="button">Buy Now</a>
<a href="schedule.html" class="button">Book Now</a>
</div>
</div>
</div>
.hero img {
align-items: center;
height: 20vh;
}
.hero-button {
display: block;
text-align: center;
position: absolute;
top: 75%;
}
.button {
width: 150px;
margin-left: 10px;
margin-right: 10px;
}
.hero-content {
display: flex;
text-align: center;
align-items: center;
flex-direction: column;
z-index: 1;
}
.hero-content img {
display: block;
height: 185px;
width: 195px;
}
.hero-button {
display: block;
text-align: center;
}
- Which meant I could remove all the messy media queries and write just one for when the screen width was really thin;
@media screen and (max-width :309px){
.hero-button .button{
margin-bottom: 10px;
}
}
-
Map
The map had a grey line under so wasn't flush to the footer, after using google inspect I noticed the container was a different height the map so matched both heights to 400px which fixed the issue.
.map {
height: 400px;
width: 100%;
}
.map {
height: 400px;
width: 100%;
}
.map iframe {
height: 400px;
width: 100%;
}
- Schedule
- Overflow scroll wasn't working correctly on schedule page, noticed the way I'd set up the media query seemed to be the issue and it was also affecting the header and footer. Fixed the issue by changing to max-width instead of min-width of the media query and moving the units, which resolved both issues.
@media screen and (min-width: 900px) {
.table {
overflow-x: auto; }
}
@media screen and (max-width: 1428px) {
.table {
overflow-x: auto; }
}
- I then ran into more problems as the scroll was working but the buttons were squashing as the container width changed with the screen. To fix this I added a fixed min-width to the table in the same media query above, so it now is written as:
@media screen and (max-width: 1428px){
.table {
overflow-x: auto;
}
.schedule-style{
min-width: 1320px;
}
}
The website was deployed using GitHub Pages by following these steps:
- In the GitHub repository navigate to the Settings tab
- On the left-hand menu select Pages
- For the source select Branch: master
- After the webpage refreshes automatically you will see a ribbon on the top saying: Your site is live at https://jamie2210.github.io/CI_MS1_TBC/
You can for fork the repository by following these steps:
- Go to the GitHub repository
- Click on Fork button in upper right-hand corner
You can clone the repository by following these steps:
- 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 Git Bash
- Change the current working directory to the one where you want the cloned directory
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
- Press Enter to create your local clone.
Images and logos not referenced below are owned or created by the developer.
All photos were taken from Pexels, credit to (in order of appearance);
- cottonbro studio gloves touch
In order of appearance;
- The HTML for the responsive Navbar with toggler was taken from Boostrap v5.1 documentation snippet.
- The HTML for adding WhatsApp was taken from Message Bird Snippet.
- The HTML for the Nav Bar Sign In Modal was taken from Boostrap v5.3 documentation snippet.
- The HTML for both Carousels on index page was taken from Boostrap v5.1 documentation code snippet. (Review carousel only visible on mobile devices)
- The HTMl for the Class Modal was taken from Boostrap v5.3 documentation snippet.
I would like to take the opportunity to thank;
- My mentor, Mo Shami, for his excellent feedback, advice support and guidance throughout.
- Tutor support from Code Institute for their swift response.
- The slack community of coders for immediate and helpful replies.
- WAES College and my Tutor Michael for their suppoirt and help throughout.