SARAH GORDON MUSIC

User Experience - UX
- Project Goal *User Goals
- User Stories
- Site Owner Goals
- User Requirements & Expectations
- Design Decisions
  - Fonts
  - Icons
  - Colours
  - Images
  - Wireframes
Features
- Features that have been developed
- Features to Implement
Technologies Used
Testing
Bugs
Deployment
Credit

User Experience (UX)

Project Goal

The goal for this project is to offer a beautiful website that will quickly offer it's users an clear insight into the service being provided and the quality of that service that can be provided to them on their special day. Users will be able to easily make a customised booking

User Goals

To easily contact the site owner to make a booking
To find information about the site owner
To read reviews from previous customer experiences
To view the cost of the services provided
To be able to find the site owner’s social media pages
To view a list of songs available to be sung at the wedding
To view other projects that the site owner has worked on such as the live studio covers
To see a sample of songs that will be sung if I pay for the service

Site Owner Goals

As a site owner, I want:

To receive bookings through my website.
Communicate clearly to any prospective customers the cost of the service.
To direct traffic to my social network pages and increase popularity, personal brand and my fanbase.
To provide website users with a positive user experience.
To advertise recent customers' positive experiences and increase referrals.
Prospective customers to hear my voice as soon as possible and increase the likelihood of them making a booking.
To give perspective customers an insight into my performing career & achievements.
To give prospective customers an idea of the kind of person I am as they will be sharing their wedding day with me.

User Requirements & Expectations

Requirements:

To be able to navigate the website using the navbar
To be able to hear the voice of the singer and to see her performing, giving the user a shop window view of the service being offered
To be able to make a booking through the website without any bugs or issues
To be able to quickly contact the site owner
For the content of the page to be displayed in a way that is readible and attractive and promotes a positive user experience

Expectations:

The existence of a nav-bar which makes it easy to navigate the website pages
To be able to read about previous customers' experiences in a testimonials page
Information about the site owner is easily found and gives a good sense of their abilities. This is essential when paying for this kind of service
All of the design elements display in a seamless manner
Text and images are clearly readable and contrast against their background
If using a screen-reader, the non-text elements have aria labels

Design Decisions

When designing the website, I carried out some market research to see what the general design choices for similar websites. I carried out Google searches to see if I could find websites which provided a similar service that I could take some inspiration from. As part of my research, I found that there was generally a bright, almost Spring time theme which was sleek and attractive throughout. This was in keeping with the wedding theme.

Fonts:

When deciding the fonts that I would use on this website, I searched through Google Fonts to see if there were any fonts that looked attractive and sleek and that would look good when styled. I chose the Cormorant Garamond font due to its nice, stylish look which I though suited the sites look and feel. I decided have used Sans-Serif as a backup font in case Google Fonts does not work for any reason.

Icons:

Icons used in this project were taken from Font Awesome. Icons were used to style the links to the social media pages and contact information in the footer. Some icons were also used to help illustrate the pricing section on the booking page.

Colours:

When deciding what the colour scheme of my website would be, I did some research as mentioned above. I visited websites that had a similar purpose/goal to this one, Wedding Singers websites e.g. https://weddingsinger.ie. As previously mentioned, weddings generally tend to be themed with bright colours. This drove the decision around what the colour scheme would be, while being cognisant to keep it simple and not distracting from the content.

I visited Coolors to find a colour scheme which matched what I envisaged for the site. I chose the font colors and the background colors off of this palette.

font colours:

For the general font in the body of the website, I chose #4F646F as it contrasted against the light coloured background image
H1: I chose #535657, a navy colour which contrasted very well with the white marbled background image I chose to have throughout the website. This differed from the rest of the text very slightly so as to give it increased importance to the site user.
Navbar, Testimonial containers and buttons were given a #4F646F this was to keep in scheme with the font. All items inside these elements were given a colour of #F4FAFF to contrast and make it easily readable.

Images

Follow the below links to view the relative images

The hero image used was original and was uploaded from my hardrive.
Testimonial profile photos and the background image of marbling that were used were obtained from Unsplash.

Wireframes

I used Balsamic to wireframe from the outset as it was a much more attractive approach that drawing by hand. There were some minor changes made using the software. Below are the final itterations of the wireframes I based the website off in png. format.

Mobile Wireframes:
- Home
- Songs
- About Me
- Bookings
Tablet Wireframes:
- Home
- Songs
- About Me
- Bookings
Desktop Wireframes:
- Home
- Songs
- About Me
- Bookings
Wireframesof Testimonials page not implemented:
- Mobile
- Tablet
- Desktop

Features

Features Implemented

A beautiful and effective navigation through a navbar across each of the pages on the site.
A booking form which allows the prospective customer to contact the site owner easily.
Links to the site owners social media pages via slick Font Awesome icons. This is important as the site owner has a lot of content here which will give the prospective customers an in-depth view of the quality of the service provided in addition to what is on the website.
The site owner's contact information i.e. telephone number and email. These are needed in case the site visitor wants to contact the site owner and not make a booking. These are also displayed with Font Awesome icons.
A beautiful hero image of the site owner across the home page giving the site visitors positive emotions from the moment they land on the page.
Youtube video of the site owner displayed on the home page so that the site visitors can instantly see the service they will be paying for.
Audio file teasers of the music that will be sung at their weddings.
Responsive, mobile first layout that also looks great on tablets and desktops. This was done by using bootstrap's grid layout.
Bootstrap buttons used to make a booking once the form is filled in. Bootstrap buttons to bring the site user to the 'Songs' & 'About Me' pages from the landing page.
An 'About Me' page which gives the potential customers an insight into what kind of person the site owner is as well as the previous work she has done as a singer and what the main achievements are.
A carousel to on the landing page to display the testimonials of the previous customers' positive experiences.
A pricing area that displays the prices of the different options available to perspective customers.

Features Not Implemented

These features have not yet been implemented due to various reasons e.g. a lack of time

Testimonials page - You will see from my wireframes that I originally planned on creating a Testimonials page to display the testimonials on one page, but I decided that it would be more efficient while also giving the user a better experience.
Modal - I wanted to have a modal appear when the user submitted their completed form. This would have been a nice piece of user feedback, however, due to scope of this project, I was not in a position to utilise it correctly. Modal code deleted from the Booking.html.

Technologies

The following technologies were used throughout the creation of the website:

HTML 5 - HTML5 is a markup language I used for structuring and presenting content of my site.
CSS3 - A language I used to describe and style the presentation of the content written in HTML5.
Bootstrap 4 - A front-end framework which assist me in creating responsive website design.
Google Fonts - An open-source online library of thousands of fonts and icons that were free and easy to use.
Font Awesome - An open source online library of icons which I used for extra styling.
Balsamic - Software used to complete the wireframes. This was much easier than trying to draw.
Git - System used for version control.
GitHub - This is where my project repository was stored.
GitPod - Open source, online workspace used to work on my project.
JQuery - Bootstrap depends on this to function fully.
Popper - Bootstrap depends on this to function fully.
W3 HTML Validator - Used to validate my code to ensure that there were no errors.
W3 CSS Validator - Used to validate my code to ensure that there were no errors.
Microsoft Edge (Chromium) Developer Tools - Used this
Youtube Embedding - Used the Youtube embedding to copy code from Youtube to be able to display the videos on my site.
Coolors - Used this to generate a colour scheme that matched what I wanted for the site.
Lightohouse - Used to assess the level of accessibility, performance and correctness that was provided by the site.

Testing

User Story Testing

To be able to view the site on a desktop / laptop / tablet or mobile.
- The website changes the way it is displayed in a seamless way. This makes it user friendly regardless of what size viewport the user is using.
To be able to quickly hear the voice of the site owner so that I can be well informed when deciding on whether to avail of the service.
- The user need not go further than the landing page to be able to see and listen to the site owner singing. This gives the user a sense of the quality of the service immediately. They are they prompted, in both the navbar and the landing page content to go to the 'songs' page where they can here samples and watch Youtube videos.
To know what the details of the services that are on offer.
- Once the user arrives at the landing page, they will see the navbar where they can find the 'Bookings' option. The user can access the booking page from the navbar where they will then see the packages and prices on offer.
To be able to see a sample list of songs that the site owner can sing at my wedding.
- The user can see a 'Songs' page in the navbar. When they access this page, there is a list of sample songs that would typically be sung at weddings.
To hear from previous customers about their experiences.
- Upon arriving at the landing page, the user will be prompted to scroll to the bottom of the page where they will find a carousel with musltiple testimonials from previous happy customers.
To be able to easily contact the site owner to make a booking.
- Upon landing at the landing page, the user will be see 'Bookings' in the navbar where they can go to make a booking through the fulling functioning form provided.
To be able to make a special request for a song to be sung on my wedding day.
- In the booking form, the site owner has added a text field prompting the user to add any specific song requests that they may have.
To know about the site owner as they will be taking part in my wedding day.
- The user will be able to read some information about the site owner in the 'Songs' page where the site owner has put up information about themselves as well as their performing experience and achievements.

Validator Testing

HTML Validator

The HTML validator used was W3 HTML Validator

Errors & Fixes:

Index.html
- No errors found in this page of code.
Songs.html
- Error: Attribute type not allowed on element audio at this point.
- Fix: add source element and move src, title and type attributes here.
Aboutme.html
- No errors found in this page of code.
Booking.html
- Error 1: Bad value address for attribute type on element input.
- Fix 1: change type attrivbute value to 'text'
- Error 2: The first child option element of a select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have either an empty value attribute, or must have no text content. Consider either adding a placeholder option label, or adding a size attribute with a value equal to the number of option elements.
- Fix 2: Added an empty value attribute to the placeholder option 'Choose...'

CSS Validator

W3 CSS Validator was the validator I used to ensure the CSS code did not contain errors.

Errors & Fixes:

No errors found in CSS code

Feature Testing:

A beautiful and effective navigation through a navbar across each of the pages on the site.
- Navigation bar worked well and took me to each of the desired pages. The nav bar was tested on each page as well.
A booking form which allows the prospective customer to contact the site owner easily.
- The booking form worked perfectly. All of the required attributes worked other that for the options field.
Links to the site owners social media pages via slick Font Awesome icons. This is important as the site owner has a lot of content here which will give the prospective customers an in-depth view of the quality of the service provided in addition to what is on the website.
- All of the social media link and and icons worked as desired from each individual page's footer. They all open in another tab in the browser.
The site owner's contact information i.e. telephone number and email. These are needed in case the site visitor wants to contact the site owner and not make a booking. These are also displayed with Font Awesome icons.
- The information is dislayed for the site user to see and use manually as well as being functioning links to be clicked which will either call or email depending on which one you click.
A beautiful hero image of the site owner across the home page giving the site visitors positive emotions from the moment they land on the page.
- Upon arriving at the landing page, the user is greeted with a beautiful smiling image of the site owner. If the image does not load, there is still a background colour in place which fits with the colour scheme of the site.
Youtube video of the site owner displayed on the home page so that the site visitors can instantly see the service they will be paying for.
- There are two Youtube videos that display on the landing page function well and are easily found
Audio file teasers of the music that will be sung at their weddings.
- The audio files all labelled and function correctly. The sound quality could be improved however as the recording were done on an iPhoneX and not a studio.
Responsive, mobile first layout that also looks great on tablets and desktops. This was done by using bootstrap's grid layout.
- After using the Bootstrap grid system, the website is fully responsive to all screen sizes.
Bootstrap buttons used to make a booking once the form is filled in. Bootstrap buttons to bring the site user to the 'Songs' & 'About Me' pages from the landing page.
- All buttons used were bootstrap buttons and used bootstrap classes. They all were custome styled thereafter and carried out the desired functions.
An 'About Me' page which gives the potential customers an insight into what kind of person the site owner is as well as the previous work she has done as a singer and what the main achievements are.
- Upon arriving at the landing page, the user is greated with a welcome note by the site owner followed by a button which will take them to the 'About Me' page where they can see some information about the site owner.
A carousel to on the landing page to display the testimonials of the previous customers' positive experiences.
- The user can see the testimonials carousel on the landing page which displays an image of the couple who are giving the testimonial, navigation buttons to go to the next/previous testimonial, the testimonial itself. All of this against a beautiful background container.
A pricing area that displays the prices of the different options available to perspective customers.
- When the user hits the landing page, the will be able to navigate to the Bookings page through the navbar where they will immediately see the pricing details above the booking form.

Lighthouse Testing

Lighthouse was used to assess the level of accessibility, performance and correctness that was provided by the site. This generated a report based on how the page performed against these criteria. It was great to use as, based on the results of the test, I could see where the scores fell down which prompted me to try and improve on the website.

The following are links to the PDF files of the results from Lighthouse testing:

Mobile

Desktop

Compatibility & Responsive Testing:

Devices

I tested the website's compatibility using the Microsoft Edge (Chromium) Developer Tools. The following devices were tested:

Moto G4
Iphone 4
Galaxt S5
Pixel 2
Pixel 2XL
Iphone 5/SE
Iphone 6/7/8
Iphone 6/7/8 Plus
Iphone X
Ipad
Ipad pro
Surface Duo
Galaxy Fold

The compatibility testing was successful on all devices, giving the website an attractive look and feel as well as functionality on all.

Browsers

I tested the website's compatibility using the Microsoft Edge (Chromium) Developer Tools. The following browsers were tested:

Google Chrome
Safari
Microsoft Edge
Mozilla Firefox

The testing was successful on all websites, giving the website an equally attractive look and feel as well as functionality on all browsers.

Bugs

Below are some of the bugs that I came across throughout the development of the website:

Resolved Bugs

Bug: I could not figure out how to change the colour of the navigation items in the nav bar.

Fix: Went onto the chrome dev tools and began to investigate where the issue lay. I found the code that controlled the colour of the nav-items and then added this to my CSS.

Bug: I lost the controls on the testimonials carousel after I input the photos.

Fix: place the previous and next elements into the "carousel-inner" div

Bug: 'Home' nav item on songs page was same colour as 'songs' when in the songs page

Fix: Removed the 'active' class from 'Home nav-item in the html code which gave it a different colour

Bug: Options selector in form on bookings page was not being validated.

Fix: added an empty value attribute to the placeholder option

Bug: One of the testimonials was visible behind the rest of the carousel and you could see this as the next and previous buttons were pressed and the cards slid past.

Fix: Active class was placed in more than one of the testimonial carousel cards which caused the error. Removed from the extra carousel item.

Bug: The footer contact elements (email and phone number) were displaying well in certain screen sizes but then the icon would move to the next line. This did not look well.

Fix: I input a couple of media queries which didn't stop it from happening but just made the overall look of the footer better when it did happen.

Unresolved Bugs

There were no bugs that I encountered that I did not resolve. I found Youtube and the resources that were available to us either by the Coding Institute or through slack or tutoring to be a really big help when problem solving.

Deployment

Online

Of course, this project was built on GitPod and the repository hosted within Github. This meant that it was deployed in Github Pages. There were only a few easy steps involved when deploying the website to Github Pages. They are the following:

Open the browser
Search for Github
Sign-in using my Github account details
Go to repositories page
Open the relevant repository
Go to settings
Scroll until I get to Github pages section
Click into the sources section
Click into branches and select 'master'
Once master is selected, click save
Refresh page to see the confirmation of the deployment

Cloning

To make a clone of the repository to your desktop and begin working on it locally, follow these steps:

Open the browser
Search for Github
Sign-in using my Github account details
Go to repositories page
Open the relevant repository
Click on the 'code' button beside the green 'GitPod' button
Paste the url provided
Open the desktop workspace
Choose the location from where you want to clone the repository
Paste in the url from step 7 into local path
Click clone
Enter

Credits

Code:

Bootstrap - used for enhancing the responsiveness of the website through CSS and Script plug-ins
Font Awesome - used for adding attractive icons into the site
Youtube - Embedded Youtube videos through copying the code

Resources

Youtube - used Youtube to help me solve problems as I went through the development process
Code Institute lecture videos - These were a great help to refer back to
Mentor sessions - Mentor provided great feedback on the ideas I had and then on the website itself when it was more tangible.
Tutors - Tutors are a great resource to have on hand
Slack - fellow student support is both useful and comforting
W3 Schools - This website is a brilliant resource that I used on a very frequent basis.
Coolors - Used this site to get a colour scheme which I liked for the website

Images

I used Unsplashed to get the photos for the testimonials and the background photo
The hero image is an original provided to me by the subject of the photo

Acknowledgements

I would like to thank the following for all of the assistance throughout the development of this project:

Code Institute Tutors
My Mentor Ignatius for all of the great advice
Everybody on the Slack community for always being on hand to answer any questions I had
My family

This website is for educational purposes only!

code-institute-submissions / sarah-gordon-music Goto Github PK