I’m building a website for N&PBCC to give the club a stronger online presence beyond just a Facebook and Instagram page. The founders are qualified Level 2 coaches who runs badminton club night session as well coaching sessions for both juniors and adults. A website will make the club easier to find through search engines. It will act as a central hub for current members to access club information, view scheduled sessions, and potentially attract new members to grow the community.
In addition to hosting play and coaching schedules, the site can potentially will offer users a convenient way to check session availability. There would be potential to create a member database where attendees can register their interest, track payments, and manage their session bookings in one place. This platform can potentially streamline club management while improving the experience for everyone involved.
Checkout the website: https://heli-t-00.github.io/Project1_NPBadminton/
External Users' Goals:
- Target Audience: The primary users are members of the badminton community: *
- Players: Those who are already familiar with the game and are looking for a local club to play at.
- Current Members: Players who want to check upcoming social events, view shared photos, and stay connected with the club.
- Coaching Seekers: Adults and juniors who are looking for badminton coaching, whether they're beginners or improving players.
- Session Availability: A clear and updated list of all coaching and play sessions for easy access.
Site Owners' Goals:
- Promote the Badminton Community: Showcase the club, encourage participation in club activities, and grow the badminton community.
- Highlight Coaching: Promote coaching opportunities offered under N&P Badminton Club to attract new players, both junior and adult.
- Badminton Players: Those looking for a friendly local badminton club to play regularly.
- Coaching Seekers: Beginners or intermediate players, both adults and children, looking to improve their skills through coaching.
General Users:
- “I want a website that is easy to navigate and intuitive to use.”
- “I want to be confident that my information is secure when interacting with others.”
As a Player:
- New Members: “I want to find upcoming sessions and see where local badminton games are taking place.”
- Current Members: “I want to stay updated on upcoming sessions and social events.”
As a User Seeking Coaching:
- “I want to easily search for and book available coaching sessions.”
Additional Features:
- Club Nights & Social Events: Information on events for current players.
- Coaching Opportunities: Details on adult and junior coaching sessions.
- Promote Coaches: Information about the qualified coaches at N&P Badminton Club.
- Contact Form: A way to reach the site owners for inquiries about attending sessions or coaching opportunities.
Languages: HTML and CSS will be used to create three webpages that demonstrate skills acquired during the bootcamp.
Tools: Visual Studio Code for development, with GitHub for version control and deployment.
- Design and build an interactive front-end web application using HTML and CSS, following principles of user experience (UX) design, accessibility, and responsiveness.
- The website will include three key pages: Home, About, and Contact.
- Create a README.md file that describes all aspects of the project.
- The website will address a specific target audience (or multiple related audiences) and be designed with UX and accessibility principles in mind.
- Ensure the website is fully responsive across mobile, tablet, and desktop views.
- Deploy the website on GitHub.
When designing the website, my focus was on creating an intuitive experience. I wanted users to immediately understand the purpose of the page, even if they arrived via a quick Google search. The wireframe was crafted with a mobile-first approach, ensuring a seamless user experience across devices. The color scheme centers on shades of purple and blue, inspired by the branding logo, to maintain visual cohesion and brand recognition.
Existing Features
-
Navigation -Featured at the top of the page to allow for intuitive search on all devices. Home, About, Contact Us pages all have identical navigation bar for consistency. Allowing for ease of navigation between pages, without the need to click back button.
-
Landing page image
- Badminton shuttle photo (courtesy of Pexel free image) the choice of image instantly screams badminton, it can be replaced by an image of the club itself or use a slide show if preferred. The text overlay allow users to instantly see what the site is about.
-
Why Join Us?
- This gives the users an instant overview of what the club and coaching is about.
-
Meetup info -This gives an overview of when the club plays and any junior sessions/training that takes place on regular basis.
-
Footer
- Each page has the same footer, with the relevant social media sites for N&P Badminton club. The links intend on opening a new tab for ease of navigation. Currently the club only have a facebook page and instagram.
This gives an introduction about the Founders and Coaches available with an image and also a little blog on who they are.
- Form to contact us with ease
The pages have been tested on Chrome. The website is responsive and looks good on all standard screens using the devtool device. Nav bar changes to an icon bar when viewed on smaller devices.
- Testing W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project. All the test came back with no errors.
- Responsiveness When testing for responsiveness of the webpages, majority of the pages look great.
However, there are room for improvements: -- About page: the image for the coaches are quite large on tablet size, this could be adjusted or displayed differently. -- Contact page: the location /maps are not appearing all on the larger screens, need to scroll to see the locations. In addition, the contact form, could be further improved visually with respect to the spacing of its content.
Media
- Photos/images used were from pexels.
- Maps iframe code was generated from Wiki Open Street Map.
- Favicon generator code generated from [favicon.io] (https://favicon.io/favicon-converter/)
- Logo is from the N&P Badminton club
- Used color picker to select the colours from logo [Color Picker] (https://imagecolorpicker.com/).
- Font Awesome provided free icons for use on various pages.
Content
- Utilised case study step by step guide from Code Institute - Love Running