Guitar Shed

Introduction

Image of how home page looks on all screen sizes

Guitar Shed is an E-Commerce website offering customers guitar lesson tutorial videos to vote for and purchase. The website name "Guitar Shed" comes from the word "Woodshed" or "Woodshedding". This is a term that’s used a lot among professional musicians around the world. The meaning is to practice or hone skills, particularly musical skills. The origin is from the fact that for purposes of privacy people would go to their woodshed to practice without being overheard.

The subjects taught in the tutorials are voted for by the customers using a voting poll application. Each poll has two options that are guitar technique subjects. The winning subject is the one with the most votes when the Poll expires. Which ever subject wins, I will then make a guitar tutorial based on that winning subject that will then be available to purchase in the Store. The aim of the website is to provide guitar tutorials that the customer really wants and not just another random online guitar lesson video.

The project utilises multiple apps that use different online services, that come together to form a finished product. These are outlined in the UX Design below.

The app makes use of Whitenoise to host my static files, as well as integrates with Stripe for managing the apps checkout features.

UX

Goals

Visitor Goals

The central target audience for Guitar Shed are:

Hobbyists who want to learn new guitar techniques.
Beginner guitar players.
Advanced guitar players.
Professional guitarists.

User goals are:

Have somewhere to search for guitar tutorials to help better specific guitar techniques.
Have somewhere to vote and ask for tutorials that the user really wants.
Have a place to learn songs and new styles of music.
Inspire users to progress and be creative.

Business Goals

The target businesses to use Guitar Shed to advertise:

Promote music events, concerts, local gigs.
Guitar and Music magazines.
Music platforms such as Apple Music and Spotify.
Promoting latest Artist releases.

Guitar Shed Goals

Provide an effective, easy to use site for guitar players to search and vote for guitar tutorial videos that suit their needs.
So that I can learn and practice frontend and backend programming together. To combine the use of HTML, CSS, Bootstrap and JavaScript with Python, Django and PostgreSQL.
While this is currently a student project, the future goal of Guitar Shed is to monetise the website so that he users can actually buy and download the video tutorials, and also to charge businesses for advertising their events and activities on it. This will come later once the site has a few more features to offer those who use it (see Features Left to Implement).

User Stories

Visitor Stories

As a visitor to Guitar Shed I expect/want/need:

To easily find what I am looking for, I want the layout of the site to make sense so I am not confused or put off using it.
The information I am presented with to be laid out in a way that is easy for me to navigate and digest, so that I find what I need quickly and efficiently.
To search the videos to find the ones that will improve the techniques I want to work on.
To easily vote for the tutorial videos that I want to buy to improve my specific guitar techniques.
The site to provide easy access to the contact information, email, website, social media links.
As a user accessing this site from a mobile phone or tablet, I want the site to have been designed responsively so that it is still easy to navigate and use on my smaller devices.
As a regular user of the Guitar Shed website, I expect to be able to connect to their social media channels, to keep up to date with new entries on the site.

Design Choices

I wanted the Guitar Shed website to have a smart modern feel, keeping things simple to emphasis the products and functioning. The following design choices were made with this in mind:

Fonts

The primary font PT Sans was chosen for the main text of the site because it is easy to read and complements the fonts chosen for titles very well. A extra reason for picking this font is that it is still easy to read when printed small.
I used the Helvetica font for the main headings because it is simple and clear. The font stands out very well.

Icons

For the icons I used fontawesome.

Icons are mostly used on the navigation bar.
Social media icons for facebook, twitter and youtube are used in the footer on every page of the site

Colours

The colours for this project were chosen because I wanted to the site to look smart and modern and I feel I have achieved this with the dark green/blue gradient background effect.
A mainly white colour was chosen for the main text and headers as it made the text stand out on the darker background.
The navbar background colour is a bold blue, which again stands out over the gradient background.
The social media icons have a white border around them to help them stand out.

Styling

All buttons on the site fit the same bootstrap button styling in size and shape, but I added my own gradient green colours to them so they standout.
Bootstrap panels were utilised on Guitar Shed to display the video product available to purchase. The panels were styled with curved corners, a theme repeated around the entire website in images, input boxes and buttons etc.
Hover Effects
- The dropdown menu (visible when logged in) has a hover effect that when hovering the dropdown menu opens with a "fade in" type movement and "fade out" when closing. This makes for a pleasingly smooth transition all achieved using jQuery.
- Css effects on social media icons cause them to animate to red when hovered over.
Some subtle shadows have been added to panels and nav bars, to give them depth on the page.

Wireframes

These wireframes were created using Balsamiq during the Scope Plane part of the design and planning process for this project. The design did change some what in development process.

Features

Existing Features

Elements on every page

Navbar
- The navigation bar features the Guitar Shed in the top left corner.
- For visitors to the site who are not logged in, list items links are available for them to use.
  1. Home
  2. Store
  3. Register
  4. Log in
- For users who are logged in, the list items are as follows:
  1. Home
  2. Store
  3. Polls
  4. Cart
  5. Menu (this option is a dropdown menu)
    - Profile
    - Log out
- The navbar is collapsed into a burger icon on small screens.
- The stylish design choice was made to drop the navbar down from to the top of the page and to not have it spanning the full width of the page. This keeps it a bit smaller and looks smart which is what I was aiming for with the design.
The Search bar is an animated search bar that grows when focus. At first I was sure where to put a normal search bar as it was getting in the way so I experimented with css and came up with the growing search bar so it would sit nicely in the corner. The search bar is available to use on most of the pages, for the user to search the library of products.
Admin side of the site features see
Footer
- The footer features:
  - Contact information for Guitar Shed.
  - Copyright information.
  - Links to social media locations.

Home Page

Headings

The Home page has a big heading telling the user what is on offer, with a description underneath explaining to the user how to use the website.

Video

The home page features a promotional video. The video encourages the user to sign up to the website and explains how to use the website. It also shows sample clips of what to expect in the tutorial videos and what the customer can expect to work on.

Registration Page

Guitar Shed register page on all major screen sizes

The registration page features a simple form, where the user can input a username, email address and password. The form was kept deliberately simple so that signup has minimum barriers.
Once the form is complete the data is sent to the backend where the user details are stored. (See database information below for details).

log In Page

The log in page also features a simple form where the user can enter either their username or their email address, and their password.
If the user inputs incorrect data an error message tells them to input the correct credentials.
When the user logs in with a correct email and password a success message tells them they have logged in successfully.

Polls Page

Guitar Shed Poll page on all major screen sizes

The Polls Page features the voting polls for the users to vote for the subjects they want a video tutorial to be cased on. The user votes by clicking on the radio button underneath the subject/option they want and then clicking the vote button. When the user clicks on the Vote button the amount for that subject/option increases and this gets registered on the results on the frontend and also to the backend. Each voting poll has an expiry date. The subject/option with the most votes when the voting poll expires, wins the poll. I will then make a video tutorial based on the winning subject, which will then be available to purchase in the Store. When a voting poll has expired, it displays "Poll expired. Purchase winner!" with a Buy button next to it which will redirected the user to the Store to purchase the winner.

Store Page

Product Panels

Each product panel in the Store gives the user some brief and useful information about each of the video products displayed. The product image, title and description introduces the product to the user. The user can choose however many of each item they wish to add to the cart. The products get added to the cart after selecting the amount and then clicking the add button, or will add 1 quantity of the product if an amount is not selected but the user clicks the add button.

Cart Page

The Cart Page is where the user can amend the amount of products they would like to purchase. They then click the Checkout button which takes the user to the Checkout Page.

Checkout Page

On the Checkout Page, users can see the products that they are about to purchase with the Total amount to pay. The user then fills out their shipping and payment details in a form then clicking the Submit button which the application then sending the details through Stripe. If there are any name and address details that are incorrect an error message prompts the user to enter the correct details. If the user enters incorrect payment card details, an error message will tell the user that the card details are incorrect or invalid. If the user enters all correct details, the user will get a message saying "You have successfully paid".

Features Left to Implement

The user Profile page needs more options such as the option to add more personal details and even a profile picture.
A part of the site where businesses can create an account and advertise their company, products and events.

Database

Database Choice

When this project was deployed to Heroku, Heroku uses ProstgreSQL for the database. For this project I used the built-in Django administration site for the backend. After logging in to the Admin site I created the following options to manage the backend of the website -

Guitar Shed Admin page on all major screen sizes

In the Users section, this is where all of the registered user information is stored and managed -

In the Order section, this is where all of the users order information is store which includes the users shipping details, products and product quantity.

In the Polls section there is the Options page where I manage and create the subjects for the users to vote for.

In the Voting Polls section, this is where the Voting Polls are added or deleted.

When clicking on a Voting Poll, this then goes to the Change Voting Poll where each voting option can be changed as well as the expiry date and time for that Voting Poll.

In the Store section under Products, is where all of the products in the Store are managed. From adding new products, adding a Title, a Description, a Price and an Image. Editing and deleting the products are also done here.

Technologies Used

Tools

Whitenoise to store all static files for this project.
Imgbb to store all external images for this project.
PIP for installation of tools needed in this project.
GitPod for developing and to handle version control.
GitHub to store and share all project code.
Am I Responsive to create the images in this readme file of each page displayed on different screen sizes.

Libraries

JQuery to simplify DOM manipulation.
Bootstrap to simplify the structure of the website and make the website responsive easily.
FontAwesome to provide icons for Family Hub.
Google Fonts to style the website fonts.

Languages

This project uses HTML, CSS, JavaScript and Python programming languages.

Testing

Manual Testing

Below is a detailed account of all the manual testing that has been done to confirm all areas of the site work as expected.