Liking Hiking

This project is a frontend website for the fictitious hiking club “Liking Hiking” The main focus for the website is to get people to join the club and to allow existing members to check on available routes and weather and covid alerts. The website serves as a portal for information about the club and provides links to information on upcoming restrictions, as well as an email link for specific questions. It also has links to Facebook, Instagram, Twitter and Meetup.

UX

The target audience for this website is both club members who want to check when the next meetup is or suggest a new one, and potential members looking for more information about the club.

User Stories

Potential hikers:

• First time users need to navigate the website easily.
• As a first time user, I want to find information about the group and its ethos.
• As a first time user, I want to find out when the next events are and look at maps of the available routes.
• I want to be able to easily contact the club organisers if I need to ask any other questions.

Club members:

• As a member, I want to follow the club, and stay up to date with the latest events
• As a hiker, I want to make sure I am up to date on any restrictions or cancellations
• I want to be able to easily contact the club organisers if I need to ask any questions or make any suggestions

Organiser goals:

• As the club organisers we want to attract new members.
• We want our existing members to have access to the information they need
• We want hikers to be already aware of the hiking routes and dressed weather-appropriately
• We want to ensure due diligence is done when warning members about restrictions

General information about the club is both easily achieved and important so this took top priority. This was provided via content, links and a contact email address. A gallery of images was considered to be of lesser importance but easily accomplished since the club organisers already had original photos so this was implemented. Social media promotion and a presence on the meetup site was considered important since many hikers find clubs via those routes. This was easily included via external links. The option to leave comments on the page was not enabled at this time because such features are already provided in social media and the likelihood of such a feature going unused directly on the site would outweigh the effort of implementing it. While the current site gives an email link only, if the volume of emails increases it may be worth creating a web form to submit more structured queries. As the number of events increases, maps of more popular hikes may be included directly on the website. A user gallery and comment board will not be implemented but links to a private social media group will be provided instead.

Initial wireframes made in balsamiq are included as a pdf file in a directory in the project itself. They can be found at ../wireframes/liking-hiking.pdf.

Features

Features Implemented

The index page provides a main description of the club and reminds hikers that all events are subject to certain conditions. Links are provided to verify up-to-date details. As with all pages it also includes links to the club's social media pages. As with all pages it also features a collapsable menu linking to the other three pages. There is a banner photo of a hiking landscape which is consistent across all pages, but the descriptive overlay test changes so that this image serves as a title.

The 'How' page actually provides more specific information about how to join a hike. This leverages external site meetup.com which provided the functionality of an event calendar. An email link is also given in case the hiker needs to ask for further details.

The 'Hikes' page gives a generic overview of the kinds of places where the club has been hiking and the maps there. The page content also suggests suitability.

Finally there is a 'Gallery' page with some photos taken while hiking to inspire new members.

Features Left to Implement

In the future some of the external references features such as the map or the event calendar could be implemented directly within the site if the membership grows enough to make this viable. While the current site gives an email link only, if the volume of emails increases it may be worth creating a web form to submit more structured queries.

Technologies Used

• HTML - https://html.com/html5/
• CSS - https://www.w3.org/Style/CSS/
• BOOTSTRAP - -https://getbootstrap.com/ The bootstrap gallery code used in this project was originally taken from an article at https://mdbootstrap.com/docs/standard/extended/gallery/ and modified as required. The rows and columns used to separate content are bootstrap and the navigation menu at the top of each page is a bootstrap feature
• FONT AWESOME - https://fontawesome.com/ This was used to implement all icons for headings and social media, using the tag.
• GOOGLE FONTS - https://fonts.google.com/ This was used to import the 'Oswald' and 'Special Elite' fonts.