Will Marney - Eastroad Band Website - Milestone Project.

This project is to promote a band that I worked with for a number of years. It is designed to encourage people to discover more about the band by being able to watch a music video, see photos and learn who they are and what they do.

It is also designed to encourage people to follow the band on Social Media Sites and other platforms as well as book tickets to future shows.

UX:

This website is for anyone looking to learn more about this band. Most visitors will know who the band are already but some will not and be potential bookers, management companies, PR Agencies and Labels looking to discover more about the band and it's online presence. I have designed a One Page Scroller website rather than multiple pages as the amount of text information is limited and we are focusing on a more image based engagement.

The project WireFrame is included in the file tree under the Wireframes Folder and can be referenced for design purpose. The Overall design has changed slightly from the initial idea, but the core idea remains the same. We want to provide an easy reading experience with plenty of engaging visuals in order to encourgage the viewer to follow on Social Media, and come to more live shows.

Features:

Navigation Bar: Allows our users to go directly to a point of the website if they wish to for quick navigation of the site.

Bio/About Us:

A short bio of the band and what they have done in the past as well as what they will be doing in the future.

Video:

Embeded YouTube of the latest Music Video, allows viewers to see something engaging immediately and potentially follow/subscribe on YouTube. This will also boost viewing numbers on the YouTube Page.

Tour Dates:

A table that will allow users to see the upcoming dates and locations for shows on the tour and then purchase tickets for shows via the link button to TicketMaster provided.

Gallery:

A Fancybox Gallery that will allow a user to click on a photo and have it open on the page in a scrolling gallery page. This will allow for full screen view of all the images and increase user interaction without taking them away from the main page itself.

Booking Enquiries:

A contact form that will allow people to contact the band directly by filling out their details and pressing the Submit button. This will be potential bookers, labels and PR Companies as well as FanMail.

Footer:

A basic footer that will include the band management details an email address for contacting as well as all of the Social Media Links.

Technologies Used:

Languages used to create this site include HTML5 and CSS3. I have also used Bootstrap, Google Fonts, FontAwesome and Fancy Box to help with the site build.

• Bootstrap: https://getbootstrap.com/ - used to create the fluid containers for various viewing devices.
• Google Fonts: https://fonts.google.com/ - used to choose the various fonts used within the website.
• Font Awesome: https://fontawesome.com/ - used in the footer for the social media icon links.
• Fancy Box: http://fancybox.net/ - used to create the Gallery section
• jQuery: https://code.jquery.com/ - Used with the NavBar and Fancybox Gallery

Testing:

The site has been tested on a number of different browsers including Firefox, Google Chrome and Edge, as well as a number of mobile devices and tablets and displays correctly. The project was tested throughout the development process but an additional testing session was done before submission to ensure that all bugs were fixed and that the display was correct.

The initial testing phases were problematic with the mobile view not displaying correctly, but this bug has since been fixed.

I have also had some additional users test the site to ensure that it is behaving in the intended manner and to make sure that the layout is suitable for a smooth user experience, the feedback I have received on this has been postive and I am happy to report that the user experience is positive and the layout simple enough to ensure no confusion and an easy browsing experience.

Some of the testing that has taken place was asking users to navigate to areas of the website using the Navigation Bar, and then using the Back to Top Button to move back.

For example:

1. Click on Tour Dates
2. Click on Back to Top
3. Click on Gallery
4. Click on Back to Top
5. Click on Booking Enquiries
6. Click on Back to Top

• Users have been asked to click on the Social Media links within the footer to ensure that they link to the correct places as well as the Buy Tickets Link in the Tour Dates section.

• Users have tested the embedded YouTube video to ensure that this plays correctly.

• Users have also tested the Gallery section by clicking on each individual photo to ensure that the relevant picture opens and also that they have the ability to scroll through additional pictures in the correct order depending on which photo was clicked on.

• All users have tested on various devices, including mobiles, Tablets, Laptops and Desktop PC's.

Deployment:

The process was deployed via the terminals in GitPod, using commits and pushes and then deployed via GitPages. All future updates will continue to be deployed in this manner.
The development version of the website is completely up to date with the deployed version and any further fixes will continue to be deployed in this manner.

Credits:

Site Built by Will Marney. Tutor Support by Ignatius Wuoma.

Content:

The text for About Us/Bio was copied from the offical band bio created by Lander PR. All video,audio and images are the property of EastRoad.

Media:

The photos used in this site were obtained from the Band, specifically the Band Photographer. Some photos from live shows were also provided by Absent Kelly Promotions and have an appropriate Watermark. All media is under Copywrite Protection and belongs to EastRoad.

Acknowledgements:

I received inspiration for this project from the Code Institute Website Suggestions for the First Milestone Project. I used to play in this band, and had despite using various social media pages a website was always discussed but never really felt to be a priority. I decided to use the knowledge I have gained recently to make the band a website.