South Wales MTB is a club website that aims to help bring MTB riders from across the valleys together, keeping them motivated to ride their bikes and enjoy nature. It aims to grow the local MTB community, providing a safe way for mountain bikers to meet new people and get involved with regular club rides.
The site is live and can be found here
The main goals for a MVP are:
-
Provide info about the club, promote the club ethos and attract new members
-
Grow the community
-
List a directory of current riding locations the club use
-
Provide a means to sign up to be kept in the loop about club activity. Initially this will be via email.
As a first time user I want:
-
To see if this club is for me - Club ethos, where they ride, skill level required
-
To know when the club rides
-
Sign up
-
Contact the club
As a returning user/member I want:
-
To know when we are riding
-
Sign up
-
Contact the club
All pages will provide:
-
A fixed nav-bar at the top of the screen for simple and convenient navigation
-
A footer with contact links including links to email and social media platforms
Simple but attractive page with large hero image. Welcoming, calm and friendly with quick highlights of the core reasons to join and ride with the club.
-
Attract new members
-
Give a great first impression of the club
-
Promote club ethos - All riders of all abilities are welcome
-
Find information
-
Is this club for me?
-
When and where does the group ride?
-
How do I get involved?
A list of riding locations used by the club, presented as cards. Each card gives a brief description of area and type of riding that can b expected.
-
Attract new members
-
Provide more detailed information on club activity such as recent rides, trips away etc.
-
Demonstrate that the club ethos is upheld during rides and that all riders of all abilities are welcome
-
Learn more about the club and gain a deeper understanding of the members as individuals
-
Get a feel for the attitude toward mixed ability riding and the support that can be expected
-
See what rides the members get up to outside of South Wales
A sign up screen where users can submit their email address to receive club updates and event information. In future will be used as a login to access account and account based features such as a club shop.
-
Capture potential new members
-
Provide a way for new members to submit their email address and be kept up to date with club updates and developments
-
Submit info and join the club
-
Keep in touch with the club and be kept up to date with club activity
Although not the typical red Welsh dragon, the image of a dragon was selected as it is instantly recognisable to the Welsh or those familiar with Wales. The Welsh dragon is perceived to be a benevolent creature which aligns with the ethos of the club.
Each page is headed up by the navbar for simple and intuitive navigation. Small screens up to 768px utilise the smaller mobile menu. This menu eliminates cramping in the nav bar by reducing the logo down to the club icon (which floats slightly outside of the navbar to maintain a legible size) and replaces the text links with easily recognisable icons.
Larger screens use the full size navbar and logo, text links and a CTA styled like a button for the 'join us' link. The logo is also a link to the homepage and all links feature a subtle hover state to let the user know they are an interactive feature.
Both versions of the navbar are sticky to keep navigation simple, convenient and accessible at all times.
Each page features a hero image chosen to reflect the character of riding in the valleys of South Wales, elicit an emotional response and create a quick connection with users.
The homepage hero image is chosen as it is such a typical and iconic sight in the valleys of South Wales. It has a calming yet alluring tone to a mountain biker as they know what hides amongst the trees. This was also a careful selection in terms of being identifiable with mountain biking but not scaring off potential club members with images of big jumps, drops or other features that may make them feel the club is exclusive to people of a high skill level.
The strong and small text to the side of the image is inspired by print media and is a familiar sight in MTB related publications.
This image also drove the choices on colour palette for the site.
With the locations hero, I wanted to quickly convey an idea of what a typical ride with the club might look like whilst again not picking anything too scary so as to not be offputting to the more novice rider. In addition, it gives a feel of being a small part of a much larger track and draws the user in to thinking about how the rest of the track might be, imagining themselves riding it and the sense of freedom that comes with that. The warmth of the image helps to make that visualisation positive.
As this image is the last chance to catch a potential new member I wanted this one to represent the fun of riding a bike. Wheelies are one of the most fun tricks in a mountain bikers bag and often one of the first learnt. As with the other hero images, this one is unlikely to be off-putting to those new to the sport but still illustrates the club ethos of riding for fun and not being too serious.
Each page has a brief introduction to provide context to the page and some quick information. It also aims to answer some questions that new users would likely have when they first come to the site. These were kept short to not overload users with text-heavy content.
The home page features some core reasons why a user may want to join the club. This information is designed to be easily readable and quickly communicate the benefits of joining and riding with the club. Text is accompanied by images and backed up with icons to grab attention and engage the user, encouraging them to want to find out more.
The locations page features some of the most popular and often used areas by the club. The images tell a story about the type of riding that can be expected at each location and also show a variety of riding styles such as bike park features, smooth flowing descents and big jumps. These location cards quickly communicate that there is variety among the group and therefore, something that all riders of all abilities can enjoy.
For convenience, a join button is positioned at the bottom of each page. If a user reaches the end of any page content and decides they have learnt enough and want to join there is no need for them to go looking for a way to join. This button is accompanied by a catchphrase that is recognisable to many mountain bikers and fits in with the lighthearted ethos of the club.
For simplicity, the only element on this page (aside from fixed elements such as nav and footer) is the sign up form. Here the user is able to submit their name and email to be added to the club and receive important information such as member only rides etc. As the form floats in the center of the page but I didn't want the image behind to be obscured the opacity is reduced and a blur added so that on smaller screens when the rider is behind the form the image isn't distracting or making the form difficult to read.
At the bottom of each page is a consistent footer with links to social media and email. Should somebody wish to use these to find out more about the club or request more information, each link opens in a new tab so as to not permanently navigate the user away from the club website.
Login feature which will grant access to member restricted areas of the site such as a shop or members only calendar events.
A shop where people can buy club related merch to support the club and help fund club activity such as big trips away.
Provide a calendar with info about upcoming rides so members can plan meet ups easier and better organise rides depending on group size.
Each location card will be a link to its own page for information relating to the area it concerns. This would include info like number of tracks, technicality, length, terrain type and embedded content such as POV video of tracks and maps with a pin drop to the location.
A simple blog for detailing previous events involving the club such as club rides, trips away, races etc. Useful for potential club members to see what the club gets up to and encourage them to get involved.
As the site grows it will become impractical to keep adding icons to the mobile nav bar. A collapsable and expandable nav bar will provide a much better user exerience.
The site is deployed via GitHub Pages. Steps to deploy are as follows:
- Log in to GitHub and select
Milestone-Project-Onefrom the repo list - Select
settingsfrom the top navigation bar - From the menu on the left select
Pages - Under
Build and Deployment, in theSourcedrop-down list, selectDeploy from branch. - Still under
Build and Deployment, in theBranchdrop-down lists, selectMainand/(root) - Click
Save - The project will be built and a
urlandbuttonwill appear at the top of the page. Use one of these to navigate to the deployed project.
- Log in to GitHub and select
Milestone-Project-Onefrom the repo list - To the right side of the page fine the green
codebutton and click to see the drop down menu. - Under the
HTTPtab, select the URL or click the copy button to the right of the URL to copy. - Create a folder for the repo.
- In your chosen IDE change the working directory to the directory chosen for the repo.
- Open the git bash cli and type
git clonefollowed by the copied URL - Wait for the repo to be cloned
| Expected | Actual Result |
|---|---|
| As a first time user I want: | |
| To easily navigate and fine information | A navbar remains permanently at the top of the window for convenience. Information is clearly laid out and easy find |
| To see if this club is for me - Club ethos, where they ride, skill level required | On landing on the site the user is presented with iconic images recognisable to people familiar with the welsh valleys. As this club is for local riders this is fitting. The first section of the page is intro text quickly establishing that the club is for everyone and all are welcome |
| To know when the club rides | Users are able to join up to the club using the join us form, after which they will be sent communication regarding club ride dates, times and locations. Additionally users can use the social media links at the bottom of each page to connect with the club and get ride info |
| To sign up | Users can sign up using the form provided on the join us page |
| To contact the club | Users can contact the club using the social media links at the bottom of each page or using the mail link at the bottom of each page |
| To know where the group rides? | Users can access the locations page for a list of spots regularly visited by the club and join up for access to more secret spots |
| As a returning user I want | |
| To know when we are riding | Returning users are able to use the social media links to find up to date ride information on the clubs social media platforms or receive club emails after joining up |
| To join up | Users can sign up using the form provided on the join us page |
| To contact the club | Users can contact the club using the social media links at the bottom of each page or using the mail link at the bottom of each page |
Throughout the development process Google Chrome Dev Tools was used extensively to check display on various device screen sizes. Once deployed real world testing was carried out on a range of devices covering mobile, tablet and desktop resolutions across various browsers.
All features and functions were manually tested across a range of devices, screen sizes and browsers. For mobile a mixture of browser native to the OS were used. For desktop four browsers were selected based on popularity among users: Google Chrome, Firefox, Edge and Safari.
All HTML and CSS was tested using the W3C validation service. Some minor HTML syntax errors were found and rectified. CSS passed with no errors.
These results were obtained in an incognito window to avoid any Chrome extensions skewing results.
During testing, I found that Lighthouse had an issue with image sizes not being explicitly set on the HTML elements. Normally I would look to keep things like sizing exclusively in CSS but as this was impacting my Lighthouse score based on the CLS rating I decided to use the explicit sizes.
-
Colour pallette generator by mycolorspace
-
Responsive design checker by media Genesis
-
Google Dev Tools
-
HTML and CSS written using Microsoft Visual Studio Code
-
Wireframing tool by Balsamiq
-
Logo image by Mert Gör on Open Clipart
Modified by me in GIMP
-
Home page hero image by Marita Kavelashvili
Downloaded from Unsplash
-
Connect image by Clement Delhaye
Downloaded from Unsplash
-
Discover image by Mauricio Gutiérrez
Downloaded from Unsplash
-
Learn image used with kind permission of Bike Park Wales
-
Travel image by Nick Rickert
Downloaded from Unsplash
-
Locations hero image by Tim Foster
Downloaded from Unsplash
-
BPW image by Luca Beani
Downoaded from Unsplash
-
Cwmcarn image by Graziano De Maio
Downloaded from Unsplash
-
Afan image by Tim Foster
Downloaded from Unsplash
-
Risca image by Tadeja Pavšič
Downloaded from Unsplash
-
Wyllie image by Carlo von Reyher
Downloaded from Unsplash
-
Barry Sidings image by Adrien Vajas
Downloaded from Unsplash
-
Code borrowed from CSS Tricks and modified to stop autofill changing the background colour of form inputs.
-
Font by Google Fonts
-
Icons from Boxicons
- Thanks to Ronan for his support, advice, resources and getting up super early for meetings