A website that is designed to bring Sports Psychology to life through the business of Sportance. Many people are still unaware that Sport Psychology exists and therefore have a lot of questions and want to know more. Sportance is designed to give every user the information that they need by answering the most common questions that get asked. It is a staic website that will give the users enough information to decide whether Sport Psychology is a tool for them or not. It is a safe space that users can easily navigate their way around in order to give them relevant and up to date information.
This website is designed for a variety of users such as athletes, other Sport Psychology professional and me the developer. Each user will have different reasons for using the website and what they hope to gain from it. For example, it could an athlete who is struggling in sport and is looking for some professional help. On the other hand, it could be another Sport Psychology professional who is looking for some help and guidance themselves and have therefore sort to seek some help from another professional.
Generic User (athlete or sports person)
- As a user, I want to be able to learn about Sport Psychology and its benefits.
- As a user, I want to be able to identify if I have a need for the services offered.
- As a user, I want to be able to read testimonials from previous clients and decide if I wish to use Sport Psychology for their own personal needs.
- As a user, I want to be able to get in contact with the Sport Psychologist, ask questions and request an appointment.
- As a user, I want to be able to find the social networks of Sportance.
Other Sport Psychologists
- As a user, I want to stay up to date with current information.
- As a user, I want to gain inspiration for tools and services that they could use with their own clients.
- As a user, I want to be able to get in contact and ask questions.
- Logo
The logo was created using Free Logo Maker and was designed to be simple and effective. The aim was for the users to look at the logo and understand the purpose of the website and company straight away. The colors on the logo are inine with the color scheme that is shared below to create consistent branding.
- Colour Scheme
The colours for the website were chosen using Coolor and aim to keep the screen upbeat and refreshing for the users to view. The colours that were choosen are:
#3C1642- Russian Violet#086375- Blue Saphire#1DD3B0- Carribean Green
- Fonts
The website has the main font of Lato, which was chosen due to it readability for all users. It was chosen using Google Fonts and has a default of Sans Serif.
- Wireframes
The wireframes for this website where created using Balsamiq
The features that were added to the project were designed to have a high level of usability.
- The logo is wrapped in an anchor tag with the link to the Sportance page. This allows it to be used as a refresh for the page should the user need to.
- The menu bar at the top will allow the users to easily navigate around the webpage should they chose not to scroll through the whole page to find the section they are looking for.
- A menu icon is used in phone view so that is does not overcrowd the header and hero image.
- A hero image was added to make the webpage inviting to the user and make the website self explanatory.
- An About section was used to give the user all the information they need about the webpage and its purpose. A sports image was added to this section to keep in with the design of the rest of the webpage and make it more pleasing to view for the users.
- A services section was used to allow the users to decide whether the services suit their needs and that could be of use to them. This section also allows other Sport Psychology professionals to view what they could potentially add to their services. Images of the types of services were added to tie in with the rest of the webpage.
- A testimonials section was used to allow the users to see the previous work carried out by the Sport Psychology and again decide if they want to access the help on offer. Image of the athletes who have given a testimonial were added so the user could picture who was saying them.
- A contact section was used to allow users to get in touch should they have any questions about the services or Sport Psychogy in general.
- Within the footer are links to each section should the user wish to quickly navigate their way back to a certain section. There is also links to the social media pages that Sportance uses.
- A video library where users can access mediation materials that they can use at home.
- A useful links section that allows users to directly access useful information about Sport Psychology sourced on other websites.
- HTML
- CSS
Plan – I want the ‘About, Services and testimonials Section’ to allow users to learn more about Sport Psychology and how it could benefit them in their sports performance. Based on the information in the About section and the services section the users can decide if they feel that they have a need for the services offered by the team at Sportance. If the users are still unsure about Sport Psychology and whether they feel it will benefit them, they can read the two testimonials provided to give them confidence that Sport Psychology does work. This will hopefully encourage the user to get in touch and ask more questions using the contact form.
Implementation – Ensuring there is enough information for the user to decide to get in contact. Equally it was important to not overwhelm the user with too much information that they lose interest.
Test – This was tested by asking friends and family if the sections have given them enough information about Sportance.
Result – The information presented in the sections mentioned above provide enough information for users to decide if Sport Psychology is something they want to access through Sportance.
Verdict – This test passed based on the notes and criteria above.
Plan - The navbar at the top of the page to allow the user to navigate their way quickly around the page. Each nav link will take the user to their desired section when clicked. The navbar will be responsive and a navbar toggler appears when the screen size is below 768px to avoid congestion.
Implementation – Using Popper JS and jQuery to allow the navbar to collapse into a toggler at the correct breakpoint. Also ensuring the navbar links are correctly linked to each corresponding section.
Test – Using chrome developer tools to adjust the screen size and see if the toggler appears at the correct breakpoint and still takes the user to the desired section on the webpage. Clicking on the links at the top of the page to take the user to the desired section on the webpage.
Result – The navbar links allow the users to navigate their way around the webpage. Each link works. The toggler successfully appears at the correct breakpoint and works.
Verdict – This test passed based on the notes and criteria above.
Plan – The Sportance Logo in the navbar to link to home and take the user back to the top of the webpage when instead of them having to scroll back through the page. Also, the nav bar at the top to be fixed to stop user having to scroll to each section should they not wish too.
Implementation – The Sportance logo is wrapped in anchor tags that are linked to home. The navbar is fixed at the top of the page.
Test – To test this I clicked on the Sportance logo to check it returned the user to home. I also tested the fixed navbar by scrolling through the webpage and ensuring it stayed at the top.
Result – The Sportance Logo returns the user to home and the navbar is fixed to the top of the webpage.
Verdict – This test passed based on the notes and criteria above.
Plan – For the hero image to allow the user to get a sense of what the webpage is all about and for this to be responsive across all viewport widths. This is to be further enhanced by a Jumbotron with a tag line that sits on top of the hero image. The Jumbotron text to disappear on screen sizes below 992px so that it does not crowd the screen.
Implementation – This was implemented by using the .img-fluid from the bootstrap library and bootstrap column classes.
Test – This was tested using Chrome Developer tool to see if the image is responsive.
Result – The image responds to different viewport widths and disappears when on screen size below 992px.
Verdict – This test passed based on the notes and criteria above.
Plan – To ensure that all sections are responsive to different viewport widths.
Implementation – This was implemented using bootstraps column classes to utilise the space.
Test – This was tested using Chrome Developer tools to ensure each section responds correctly at each breakpoint.
Result – All sections responds correctly at each breakpoint to keep a user-friendly webpage structure.
Verdict – This test passed based on the notes and criteria above.
Plan – The user is required to fill in each field within the contact form.
Implementation – This was implemented using required within each input.
Test – To test this, I have tried to submit without filling in each field.
Result – The user is not able to submit unless they fill in each field. They receive a warning message to remind them that they need to complete the missing information.
Verdict – This test passed based on the notes and criteria above.
Plan – For the footer to consist of links to all sections on the webpage and Sportance’s social media accounts. Also for the social media links to open in a separate window and for the links to disappear on screen sizes below 992px.
Implementation - All social media links open a new window using ‘target=”blank”’. Also ‘rel=”noopener”’ was added to each social media link to ensure the new page is not able to access the window.opener process.
Test – This was tested by clicking on each link to check it takes the user to either the intended section on the webpage or by opening a new tab for each social media link. Also Chrome Developer tools were used to ensure that the social media links dissapeard on screen sizes below 992px.
Result - All links work correctly and take the user to the desired location. The social media links disappear when the screen size is below 992px.
Verdict – This test passed based on the notes and criteria above.
Aria labels have been added to all anchor tags and inputs to ensure that there is accessibility for all users.
All code was validated using W3C’s Code Validator and no errors or warnings were shown.
The webpage was developed using Gitpod IDE and was commited and pushed to a Github repository. The steps below were used to deploy my webpage.
- Go to Github
- Search for Ted-Williams/Sportance
- Select settings from the menu at the top of the page.
- Scroll down to GitHub Pages section.
- Click on the dropdown menu with in the source section and select master branch.
- Click save.
The webpage can be found here: Sportance
To create a local respository, follow the steps below:
- Navigate to Ted-Williams/Sportance
- Below the menu click Clone.
- Copy the URl using the clipboard to the righthand side.
- Open you preferred IDE for example Gitpod.
- Type git clone into the terminal and paste the respository URl.
- Click enter and the clone will be created.
- All content written in the About, Services and Testimonials section were written by me.
- All images used were taken from Google and a grayscale filter applied to all.
-
The navbar collapse function was created using the following tutorial Navbar Collapse Tutorial
-
The contact form was created using the w3schools Contact Form Guide
-
I would like to thank Simen Dehlin for his continued support, help and words of encouragement throughout this project.
-
I would also like to thank the slack community at the Code Institute for the help with peer review when needed.
This project is fictitous and was created for educational purposes as part of the Code Institute Milestone Project 1