Milestone Project 1 - The Bittersweet Music Website

The aim of this project was to build a music website for ‘The Bittersweet’, an electro-pop act that I am part of.

I took a lot of inspiration and meaning from Seth Godin’s book ‘This Is Marketing’ and in particular this quote -

“Twenty-dollar bills are meaningless. It’s what you can buy with them that we work for. The same is true of your product or service. You may say you’re offering a widget, but don’t believe it. When you’re marketing change, you’re offering a new emotional state, a step closer to the dreams and desires of your customers, not a widget. We sell feelings, status, and connection, not tasks or stuff”.

The hope was to create an online space that reflected the band’s music and artistic style but also to provide value to the user in terms of both information and user experience.

The provisional launch date for the website is May1st 2020 so a few more features and content will be added before that date.

Demo

A live demo can be found here

UX

The website is for fans of the band or new users to find out more about the band.

As a user I want to see all available dates to see the band perform live.

• all relevant information can be found at tour.html including dates and venues

As a user I want to watch the band’s latest video release

• all videos will be posted at video.html

As a user I want to connect with the band’s social media sites

• all major social media sites that the band will be active on have a link at the bottom of each page.

As a user I want to keep up to date with the band’s news and updates.

• there is an option to sign up for a newsletter that will keep fans up to date.

Wireframes

• ../wireframes/wireframes1.jpeg
• ../wireframes/wireframes2.jpeg
• ../wireframes/wireframes3.jpeg
• ../wireframes/wireframes4.jpeg

The Strategy Plane:

Business Goals 2020 - brand awareness, showcase band’s music. User Needs - Access to content and information in a well presented manner I.e. don’t overload with content.

The Scope Plane:

The Minimum Viable Product is an online space that lays out the band’s vision and points the user to relevant information.

The Structure Plane:

The information is structured in a clean and clear way. The homepage being saved for just a photo and a 'main feature' which will be the ‘call to action’ for the band, whatever that may be at any given time. The rest of the information will be divided between the About, Video, Tour and Store pages, which are all self-explanatory and easy to follow.

The Surface Plane:

The site will have a minimalist feel. Use of greys and retro simple fonts is used to reflect the art-style of Shoreditch, where the band is currently based. Simple old-school drawings of swallows and subtle nature photography reflects the Irish roots of the band. The sparse use of red as a hover effect over links and icons was used to give a feeling of energy/excitement which is a reflection of the bands electronic musical influences.

All these small design choices hopefully combine to achieve an artistic experience for the user and gives a feel for what the project is about.

Features

Existing Features

Spotify player

• ...Embedded Spotify Player allows user listen to our music on our homepage

Music Player

• ... This gives the user the option to listen to our music if they don't have a Spotify account

Cross link

• ... The small font awesome cross towards the bottom of the 'About' page links to a two-minute meditation website which was added to make the user experience more personalised

Features Left to Implement

• A functioning Newsletter/Email Database.
• A functioning store to sell merchandise, vinyl’s etc.

When I learn how to use the required technologies I will implement these features.

Technologies Used

1. HTML5
2. CSS3
3. Bootstrap4
4. HTML Formatter https://htmlformatter.com/    (A simple way to beautify HTML)
5. CSS Formatter https://www.cleancss.com/css-beautify/  (A convenient way to beautify CSS)
6. Can I Use?  https://caniuse.com/    (This site let gave info on whether vendor prefixes were required for the features I had implemented)
7. Am I Responsive.com 

Testing

• I have used the user stories to put myself in the shoes of a visitor to the site and found that all the relevant information is easily accessible.

• I have made sure all links are up to date and pointing to the correct destinations. All links will open in a new tab using target="_blank".

• Invalid email addresses leads to appropriate error message

Problems

I still have not found a way to make the Spotify player stop playing automatically when the site audio player starts.

Deployment

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/jmurrii/Milestone-Project-1 into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.

(Section taken from https://github.com/Code-Institute-Solutions/StudentExampleProjectGradeFive/blob/master/README.md)

Credits

Content

• All text content was provided by me.

Media

• The photos used in this site were obtained from https://www.pexels.com apart from the picture of the band which was taken by Dan Butler Photography https://www.danbutlerphotography.ie/index

  Videos were made by the Bittersweet with Nathan Barlow.

Acknowledgements

• Help in finding purpose for this project from Seth Godin’s book ‘This Is Marketing’.
• Bon Iver’s website and music was a big inspiration - https://boniver.org/
• Haley Shafer’s website - for artistic style choices and minimalist design https://www.haleyschafer.com/