View the deployed website

1. Project Goals
2. User Experience
   1. Target Audience
   2. User stories
   3. Scope
   4. Design
   5. Wireframes
3. Features
4. Technologies Used
   1. Languages
   2. Frameworks & Tools
5. Testing
   1. HTML Validation
   2. CSS Validation
   3. Accessibility
   4. Performance
   5. Device testing
   6. Browser compatibility
   7. Testing user stories
6. Bugs
7. Deployment
8. Credits
   1. Code
   2. Media
   3. Acknowledgements

The business goals of Cardiff Swim Centre (hereinafter referred to as CSW):

• Increase sales by converting regular customers into monthly members.
• Stress CSW's unique selling point to customers: a pool for serious fitness enthusiasts and not families.
• Increase awareness of the brand as one associated with sports prestige and excellence.
• Build an intuitive UX so users return to the site for key information such as location and pool times.

The user goals:

• Find a premier swimming pool where the priority is training.
• Find a pool timetable that is intuitively built and easy to use.
• Understand the differences between individual session pricing and membership pricing.
• Find information about facilities at the pool.
• Find out where the pool is located and parking information.

I have designed this website with mobile in mind by creating bite-sized easily digestible pieces of content that can be separated easily.

I have structured each page according to the information architecture organising principle of placing the most important content 'above the fold', then working my way down in order of priority.

The user experience is structured around two main goals, (a) to allow the users to discover CSW's location and brand philosophy, and (b) to convert users into members. Call to actions to these goals are found throughout the website and are given priority through the colour scheme, e.g. more important call to actions are more eye-catching. For example, the navigation bar displays a "Join" button in the top of all pages.

• Fitness enthusiasts
• Regular swimmers
• Competitive swimmers
• Triathletes
• Teens who participate in swimming clubs and galas
• Parents of above teens

I have divided my user stories into two categories: first-time users and regular visitors, with the understanding that the goal of communicating the brand philosophy and location information will be less of a priority to returning visitors.

1. As a first time user, I want to know the specifications of the pools so I know it's suited to my needs as a fast or long-distance swimmer.
2. As a first time user, I want to see location information so that I can know where to go to use the pool and plan my journey.
3. As a first time user, I want to see information about classes so that I know I can improve my fitness.
4. As a first time user, I want to ensure their brand values align with my own as a fitness enthusiast.
5. As a first time user, I want to locate their social media accounts so I can receive regular updates from them and see how well known they are in the world of swimming.
6. As a first time user, I want to see a timetable to ensure it works with my own schedules.
7. As a first time user, I want to know the prices of using the pool and membership.

8. As a regular visitor, I want to see a timetable so that I can know which times I can use the pool.
9. As a regular visitor, I want to see information about classes.
10. As a regular visitor, I want to understand the pricing model to understand if becoming a member is cost effective.
11. As a regular visitor, I want to be able to see what the pool offers to see if there are any updates.

12. As a site owner, I want customers to be able to join as members in an easy and intuitive way directly on the website.
13. As a site owner, I want customers to be able to access our pool timetable quickly and easily to ensure they can access services at their desired time.
14. As a site owner, I want prospective customers to be able to contact us with queries or feedback easily.
15. As a site owner, I want customers to find information about classes in language that is plain and accessible to ensure appropriate use of training.

The scope of the project in it’s first release is defined by the following features:

• Navigation bar to let users navigate the website simply, with bolded text and a circle underline to show users which page they are currently on.
• A footer across all pages with links to social media and other places on the website such as pricing and location.
• A pool timetable with classes, lane swimming times and closed times.
• Modal where you can join up as a member in the navigation bar of every page, making joining quick and easy.
• Pricing page which communicates the benefits of membership clearly and explains costs simply.
• Contact form where queries can be sent. The form is functional and will not submit unless all fields are filled out.
• Explanation of training classes, their cost and their benefits to swimmers.
• An error page (404.html) that directs site users back to the home page (index.html) in the event of a broken URL.
• An About page which contains company ethos and marketing copy to entice users.
• An About page which contains clear descriptions of all facilities on offer.
• Embedded map with a location pin to show users how to get to the pool, accompanied by parking information and opening times.
• Favicon icon to help users identify the site.

Features to be built in future releases:

• Multi-page form to purchase membership and the ability to sign up to monthly direct debit payments.
• Booking system for training classes.
• The ability to toggle which days you want to view in the pool timetable on mobile view.
• A collapsible carousel on the About page on mobile view to switch view between cards.

Find more information on features in the Features section

My overall approach to the design came from a desire to create a brand that was modern, clean, aesthetically pleasing. From a UX perspective, I also wanted a site that was easily navigable and did not cause cognitive overload.

The visual language of the website takes it's inspiration from water, much of the components have a fluidity, softness and curviture.

I have created a contrasting colour scheme of blue and orange with shades of blue being the primary colour. I chose a complementary colour scheme (blue/orange) to be able to draw particular attention to key call to actions.

I picked blue first, as this gives the user memories and associations of water. It's also a colour often associated with safety and security in marketing/branding.

My heading font is Nunito from Google Fonts. I chose this font because:

• The soft and curvy form that goes well with the rest of the visual language
• It's a sans-serif font which is more accessible for people with dyslexia. Sans-serif is the back-up font if Nunito fails.

My body font is Montserrat. I chose this font because of:

• Wide availability on web browsers.
• It compliments Nunito well as it's also a largely circular and soft font, but it also contrasts enough with Nunito in terms of font weight to offer a pleasing contrast.

All images on the website are of professional quality and fully licensed. They usually depict swimmers in action to convey a dynamic, lively, and aspirational visual language. Please see 'Credits' section for more information on licenses.

They're striking images that give an energetic feel to the website which stands out particularly well against the white space and modern aesthetic of the overall design.

• Wireframes: Home About Timetable Pricing Contact Modal Credit

The website consists of five pages and 10 features.

The homepage contains four main sections:

1. A hero image with a joining call to action.
2. A 'features' section which contains key information such as facilities and member benefits.
3. An 'ethos' section which communicates company values.
4. A location map to help users find the Centre and some parking information.

The page is fully responsive on mobile and tablet.

The copy found in Section 3, like all copy on the website, was written by myself. The map used in Section 4 came from Google Maps.

Section 1, the hero image:

I chose a striking image to evoke feelings of motivation and inspiration in the user. The call to action is highly important in the visual hierarchy of this section.

Section 2, the features:

These elements are made from Bootstrap cards. They were originally divs I gave custom height, weight and margin properties to at various screen sizes using media queries, but I realised towards the end of the project it was much easier and cleaner to remake the same elements out of Bootstrap components as they are automatically responsive.

The transition from divs to Bootstrap cards made no stylistic differences as I was able to recreate the look with colours, centering and border radius exactly.

Section 3, company ethos:

The image layout effect below was made using a custom CSS grid and negative margin values.

The marketing copy like all others found on the website was written by myself.

Section 4, location map:

The map used was Google Maps.

User stories covered by this feature:

User story 1: As a first time user, I want to know the specifications of the pools so I know it's suited to my needs as a fast or long-distance swimmer.

User story 2: As a first time user, I want to see location information so that I can know where to go to use the pool and plan my journey.

User story 4: As a first time user, I want to ensure their brand values align with my own as a fitness enthusiast.

User story 11: As a regular visitor, I want to be able to see what the pool offers to see if there are any updates.

The about page has three main sections:

1. Heading
2. Company history section
3. What we offer section

The page is fully responsive on mobile and tablet.

Section 1, The heading:

I learnt how to create the visual effect on this image through a Code Institute lesson. See 'Credits' for more details.

Section 2, Company history:

The layout of this section was achieved through simple Bootstrap row grid. On mobile view the image and marketing copy take up the full width of the screen and are stacked on top of one another. At medium screen size or larger they sit next to each other.

The image was created using the following steps:

1. Download image from Unsplash (See 'Credits' for more details).
2. Remove background of image in Adobe Photoshop.
3. Make image monochromatic in Adobe Photoshop.
4. Create custom shape using the branded cyan colour already established on the rest of the page, and add this as the new background.

Section 3, What we offer section:

This section gives an overview of all that is offered by the Swim Centre, from pool specifications to the cafe to member benefits to training classes.

The components here are Bootstrap cards. I purposefully chose to have six cards so that on desktop they would display in a row of 3, on tablet 2, and on mobile 1.

User stories covered by this feature:

• User story 1: As a first time user, I want to know the specifications of the pools so I know it's suited to my needs as a fast or long-distance swimmer.
• User story 3: As a first time user, I want to see information about classes so that I know I can improve my fitness.
• User story 4: As a first time user, I want to ensure their brand values align with my own as a fitness enthusiast.
• User story 9: As a regular visitor, I want to see information about classes.
• User story 15: As a site owner, I want customers to find information about classes in language that is plain and accessible to ensure appropriate use of training.

The timetable page gives users all the times the pool will be open for specific activities, such as certain classes or lane swimming times.

The table was made with the Bootstrap responsive table component, this allows the table to be scrolled horizontally on mobile view, so no information is lost. Originally I had planned to include a drop-down menu on mobile view in which you could pick which day/s you wanted to view at a time, but this was not possible without JavaScript or another external framework. In future releases, more work can be done around optimising this timetable for mobile use. I also included the 'closed' content to ensure the page passed the WAVE accessibility tool with 0 errors, as originally those spaces had been classes as empty rows.

I also included a PDF version of the timetable on the site for users to open and download. I did this as I know from my own experience in a swimming family that many swimmers like to have a copy of the timetable easily at hand at home, for example on a pin board. I included a QR code on the PDF to encourage users to return to the website too.

The page is fully responsive on mobile and tablet.

User stories covered by this feature:

• User story 6: As a first time user, I want to see a timetable to ensure it works with my own schedules.
• User story 8: As a regular visitor, I want to see a timetable so that I can know which times I can use the pool.
• User story 13: As a site owner, I want customers to be able to access our pool timetable quickly and easily to ensure they can access services at their desired time.

The pricing page contains two main sections and is fully responsive on mobile and tablet:

1. Pricing model section
2. Training classes section

Section 1, Pricing model section:

This section lays out clearly the benefits of joining the Swim Centre as a member, encouraging the conversion. I chose to use the primary bright cyan colour on the 'Member' square to make that the more appealing option. The components were made with Bootstrap cards with custom styling such as box-shadows and colour.

Section 2, Training classes section:

This section gives more information about the specific training classes on offer and what they are intended to be used for. Bootstrap card components were used to make these. This is one of the sections that uses emotive language about motivation heavily. It also includes a call to action to go the timetable page to see when these classes take place.

User stories covered by this feature:

• User story 3: As a first time user, I want to see information about classes so that I know I can improve my fitness.
• User story 7: As a first time user, I want to know the prices of using the pool and membership.
• User story 10: As a regular visitor, I want to understand the pricing model to understand if becoming a member is cost effective.
• User story 15: As a site owner, I want customers to find information about classes in language that is plain and accessible to ensure appropriate use of training.

The contact page contains a form (please see Feature 10 for specifics about the form) and an accompanying image.

The image is removed from view on mobile and tablet view as it does not enhance the meaning of the content on the page.

The page is fully responsive on mobile and tablet.

User stories covered by this feature:

• User story 14: As a site owner, I want prospective customers to be able to contact us with queries or feedback easily.

This page displays when a user enters a URL that does not exist. The main purpose of this page is to let users know that an error has occurred and to redirect them back to the website. The design of this page is simple as I want users to return the main pages of the site as soon as possible upon seeing this page. It consists of a heading, subheading and button.

The page is fully responsive on mobile and tablet.

While this page does not cover any specific user story, it aids them all by allowing the user to easily navigate themselves back to all of the other features and pages on the site.

The navigation bar of the website is displayed at the top of the home, about, timetable, pricing, contact and 404 pages. It is based on the Bootstrap navbar component and is responsive. On small devices the navbar collapses and opens with a toggle icon.

It also contains a call to action 'Join' button that opens a modal (see Feature 9 for more details)

User stories covered by this feature:

• User story 12: As a site owner, I want customers to be able to join as members in an easy and intuitive way directly on the website.

The following user stories are fulfilled by this navigation bar as they relate to speed and clarity in finding pages and information, which is what the navigation bar is there to assist in:

• User story 7: As a first time user, I want to know the prices of using the pool and membership.
• User story 13: As a site owner, I want customers to be able to access our pool timetable quickly and easily to ensure they can access services at their desired time.
• User story 14: As a site owner, I want prospective customers to be able to contact us with queries or feedback easily.

The footer is displayed at the bottom of the home, about, pricing, timetable, contact and 404 pages. It contains links to social media, the pricing page, the contact page and the location section of the home page. It has two versions: one for medium and large screen sizes and one for small.

User stories covered by this feature:

• User story 2: As a first time user, I want to see location information so that I can know where to go to use the pool and plan my journey.
• User story 5: As a first time user, I want to locate their social media accounts so I can receive regular updates from them and see how well known they are in the world of swimming.
• User story 13: As a site owner, I want customers to be able to access our pool timetable quickly and easily to ensure they can access services at their desired time.
• User story 14: As a site owner, I want prospective customers to be able to contact us with queries or feedback easily.

The modal is opened when a user clicks on the 'Join' button in the navigation bar or certain call to action buttons on the pricing page and home page. The modal contains a form in which users can sign up to be regular members of the Swim Centre. The modal was made using a Bootstrap component. It is responsive on mobile view.

User stories covered by this feature:

• User story 12: As a site owner, I want customers to be able to join as members in an easy and intuitive way directly on the website. The form is functional and uses the POST method. The form won't be submitted until all fields are inputted.

The contact form is the main content found on the contact page. The form is functional and uses the POST method. The form will be submitted until all fields are inputted.

User stories covered by this feature:

• User story 14: As a site owner, I want prospective customers to be able to contact us with queries or feedback easily.

1. Multi-page form to purchase membership and the ability to sign up to monthly direct debit payments.
2. Booking system for training classes.
3. The ability to toggle which days you want to view in the pool timetable on mobile view.
4. A collapsible carousel on the About page on mobile view to switch view between cards.

• HTML5
• CSS3

1. Git

• Git was used for version control within VSCode to push the code to GitHub.

2. GitHub

• GitHub was used as a remote repository to store project code.

3. Adobe Illustrator

• Adobe Illustrator was used to create the Cardiff Swim Centre Logo.

4. Adobe Photoshop

• Adobe Photoshop was used to edit several images found throughout the site. In particular the 'ethos' images of the Our Ethos section of the Home page.

6. Figma

• Figma was used for wireframing all pages and creating the pool timetable PDF.

7. Font Awesome

• Icons from Font Awesome were used throughout the site.

8. Google Fonts

• Nunito from Google Fonts was used as the main heading font throughout the site.

9. Bootstrap v5.0

• Bootstrap was used for layout, styling and responsiveness purposes. The following components were used: navigation bar, card and responsive table.

10. Hover.css

• The 2D 'grow' effect from the Hover.css library was used on all buttons throughout the website and on images within the Ethos section of the homepage.

11. Unsplash

• All images used in the website apart from the logo were from the online copyright-free repository, Unsplash. See Credits for more information.

12. Am I Responsive

• Am I Responsive was used to create the multi-device mock-up you see at the start of this README.md file.

13. ImageResizer.com

• Image Resizer was used to reduce the size of image files before converting them from PNG to WEBP.

14. FreeConvert.com

• Free Convert was used to convert all PNG image files to WEBP files to improve the site's speed and performance.

15. Visual Studio Code (VSCode)

• VSCode was the IDE used to write the code for this project.

16. Google Maps

• Google Maps was used to create the embedded map with location pin showing where CSC is.

17. QR Code Generator

• This generator was used to create the QR code found in the pool timetable PDF so that swimmers always have a quick way to direct themselves back to the website.

The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with 0 errors. All pages but timetable.html pass with 0 errors and 0 warnings.

Click on the page name to see the result: Home About Timetable Pricing Contact 404

The W3C CSS Validation Service was used to validate the CSS of the website.

The CSS passed with 0 errors.

The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors.

Click on the page name to see the result: Home About Timetable Pricing Contact 404

Google Lighthouse was used to measure the performance and speed of the website. Each page passed with at least 97% score on performance, 97% on accessibility, 93% on best practices and 100% on SEO.

Click on the page name to see the result: Home About Timetable Pricing Contact 404

• Huawei PRA-LX1
• iPhone SE
• LENOVO IdeaCentre 3 Desktop PC with a 34" monitor
• DELL Inspiron 15 5593

1. Page links in the navigation bar are able to direct users to the correct page, and no broken links are present on the static navigation bar or it's collapsed version.
2. Page, anchor and outbound links are able to direct users to the correct place with no broken links on desktop or mobile version.
3. The 'join' modal opens up correctly and is able to close by clicking away or clicking the close icon.
4. The form on the 'join' modal will not submit until all fields are filled out. An alert will be present when a user attempts this.
5. The timetable is scrollable on mobile and tablet view.
6. The timetable.pdf opens appropriately and can be downloaded.
7. The row of cards in the about page collapses into a single-view column appropriately on mobile and tablet view.
8. If an incorrect URL is attempted the user is redirected to a 404 page which will direct them back to the home page.
9. The google map has a location pin to let users know where the pool is.
10. The form on the contact page will not submit until all fields are filled out. An alert will be present when a user attempts this.
11. The cards on the pricing page direct users to the timetable page and the join modal correctly.
12. All buttons display a 'grow' effect when hovered in desktop view or clicked in mobile view.
13. All pages are responsive in mobile view and no textual content is cut off from view.
14. Unnecessary content does not display on mobile view.
15. The marketing copy is clear and easily readable.
16. The logo directs users back to the home page on all pages.

All devices were able to pass all tests. There were some minor stylistic inconsistencies across the devices, such as headings on the iPhone SE not being vertically centered as they should.

• Microsoft Edge: Website and user stories work as expected.
• Google Chrome: Website and user stories work as expected.
• Safari: Safari on some older iPhones (iPhone SE) will not vertically align heading text over heading images. Other than this, website and user stories work as expected.
• Firefox: Website and user stories work as expected.

1. As a first time user, I want to know the specifications of the pools so I know it's suited to my needs as a fast or long-distance swimmer.

Screenshot to show user story

2. As a first time user, I want to see location information so that I can know where to go to use the pool and plan my journey.

Screenshot to show user story

3. As a first time user, I want to see information about classes so that I know I can improve my fitness.

Screenshot to show user story

4. As a first time user, I want to ensure their brand values align with my own as a fitness enthusiast.

Screenshot to show user story

5. As a first time user, I want to locate their social media accounts so I can receive regular updates from them and see how well known they are in the world of swimming.

Screenshot to show user story

6. As a first time user, I want to see a timetable to ensure it works with my own schedules.

Screenshots to support user story

7. As a first time user, I want to know the prices of using the pool and membership.

Screenshot to support user story

8. As a regular visitor, I want to see a timetable so that I can know which times I can use the pool.

Screenshot to show user story

9. As a regular visitor, I want to see information about classes

Screenshot to show user story

10. As a regular visitor, I want to understand the pricing model to understand if becoming a member is cost effective.

Screenshot to support user story

11. As a regular visitor, I want to be able to see what the pool offers to see if there are any updates.

Screenshot to support user story

12. As a site owner, I want customers to be able to join as members in an easy and intuitive way directly on the website.

Screenshot to support user story

13. As a site owner, I want customers to be able to access our pool timetable quickly and easily to ensure they can access services at their desired time.

Screenshot to support user story

14. As a site owner, I want prospective customers to be able to contact us with queries or feedback easily.

Screenshot to support user story

15. As a site owner, I want customers to find information about classes in language that is plain and accessible to ensure appropriate use of training.

Screenshot to support user story

• Bug: On mobile view all pages had a blank bar of white space to the right of the screen that would trigger a horizontal scrollbar.
• Fix: I discovered this is a common bug with Bootstrap rows. To fix this I set a CSS rule for the root element that the 'overflow-x' be 'hidden'.
• Bug: The about page's bottom row cards would overlap with the footer at a certain screen width.
• Fix: Lowered the min-width of the media query to include this screen width and increased the bottom-margin of the cards within this query.
• Bug: List items being pushed onto the next line was causing inconsistencies across card heights.
• Fix: Removed bottom padding on the font awesome tick icon.
• Bug: Buttons were not passing WAVE accessibility standards due to colour contrast failures.
• Fix: Set the colour property of all anchor elements to black.
• Bug: The about page's row of three cards would overlap into each other on tablet view.
• Fix: Replaced the col-md-4 class with col-md-6 and col-lg-4 classes, and put them into one row over two.
• Bug: Page loading speed was slow. I could not get the performance metric in Google lighthouse above 74% for all pages.
• Fix: Optimised the PNG images by making the file sizes smaller, then converted all PNGs to WEBP.
• Bug: Modal button not opening the modal.
• Fix: Added 'bs' classes to 'data-bs-toggle' and 'data-bs-target'. Realised mistake by re-reading Bootstrap documentation more closely.
• Bug: Footer list items which contained social media icons were classed as empty list items by WAVE accessibility tool.
• Fix: Added aria-hidden attribute with the value of 'true' to the iframe element within the list item, and added a class of 'sr-only' to the span containing the text version of the icon.
• Bug: Submit and reset buttons on modal were classes as empty by WAVE accessibility tool.
• Fix: Added values of 'submit' and 'reset' to prospective buttons.
• Bug: All headings produced contrast errors by WAVE accessibility tool.
• Fix: Added linear-background to background-image of heading divs.
• Bug: Form on contact page was not submitting properly.
• Fix: The IDs were incorrectly typed (duplicate IDs to modal form and incorrect on corresponding labels). I realised the mistake due to HTML validation errors and changed accordingly.

This website has been deployed using GitHub pages. To do the same...

1. Log into your GitHub account and find the repository.
2. Click on 'Settings' in the repository.
3. Click 'Pages' in the left-hand menu once you're in Settings.
4. Click 'Source'.
5. Click the dropdown menu which says 'None', then select 'Master Branch'.
6. Wait for page to refresh automatically.
7. Under GitHub pages you can now find a link to the published live website.

By forking this GitHub repository you are making a copy of the original to view or make changes without affecting the original. You can do this by following these steps...

1. Log into your GitHub account and find the repository.
2. Click 'Fork' (last button on the top right of the repository page).
3. You will then have a copy of the repository in your own GitHub account.

1. Log into your GitHub account and find the repository.
2. Click on the 'Code' button (next to 'Add file').
3. To clone the repository using HTTPS, under clone with HTTPS, copy the link.
4. Then open Git Bash.
5. Change the current working directory to where you want the cloned directory to be made.
6. In your IDE's terminal type 'git clone' followed by the URL you copied.
7. Press Enter.
8. Your local clone will now be made.

All credit also included in the page files.

• Mário Gusman from Code Institute Slack group - for code about accessibility measures in the footer.
• Code institute - code for creating the moving effect in the header image on the ABout page. The Hero Image section of index.html was also inspired by the Whiskey project during the course of the Code Institute teachings.
• Hover.css - for Grow effect CSS code
• Core Langs - for outer and inner div lesson to properly center content. Used heavily for creating the underline ‘circle’ effect you see in the navigation bar.
• Stack Overflow - for changing the colour of the Bootstrap toggle icon. For input and label display properties. For HTML rule eliminiating horizontal scrollbar bug
• Geeks for Geeks - for the linear-background code that allowed my pages to pass WAVE accessibility tool.
• W3C Schools - for CSS grid code. For box-shadow

Unsplash was used for all imagery throughout their site. Their license is fully copyright-free. Here are the photographers whose work appeared on the website in order of appearance:

• Gentrit Sylejmani
• Brian Matangelo
• Malik Skydsgaard
• Jesper Stechmann
• Marcelo Uva
• Dylan Nolte
• Thomas Park
• Rana Sawalha
• Lhu Shi Hui
• Li Yang
• Daan Evers
• Akshat Jain
• Brian Matangelo
• Nelka
• Richard R. Schünemann
• Marcus Ng
• Serena Repice Lentini
• Jonah Brown
• Isai Ramos

• To my fiancee Yasmine Haggar for her testing support and feedback on this project.
• To my mentor Mo Shami for his feedback, advice and support.
• To the Code Institute slack community of students and alumni for their helpful advice, resources, guidance and support.