- Project Goals
- User Experience UX
- Features
- Testing
- Usability Testing
- Github Deployment
- Acknowledgements
- To attract customers to book an appointment at the salon
- To give customers inspiration on nail art designs through the gallery page
- To help customers decide what treatment is best for them
- To give them the contact information of the salon
- To be able to learn more about the salon
- To view the pricing of the treatments
- To get help with what treatment service they would like if they are unsure with the gallery page and the quiz
- To contact the salon through various channels once they have decided what treatment option they would like
Considering the core UX principles I first started to think about the strategy for this website and defined who the target users would be and what features/technologies they would want.
Beau Belle target users are:
Aged 20-60 primarily women
What these users would be looking for:
Clear, concise, easy-to-read information on the pricing
Great photos of treatments that show off the beauticians work
Help with what treatments are better for them
Somewhere to contact us
Wireframes
I chose a colour palette based around the logo colours, I put the image into a search engine and copied the colour of the logo. I wanted this to be reflected on the website. I paired these colours with a dark grey and black font to stand out around the base colour.
Using the colormind palette on the Beau Belle Logo I selected the colours from this palette and also darker and lighter shades of these colours to create a better contrast.
I used Google fonts 'Montserrat', I felt 'Montserrat' was very easy to read and looks professional.
This is a fully responsive website that was designed mobile-first as this is the most likely way it will be viewed; the website is divided into the five pages listed in the navbar. All of the headings use the font Montserrat and the body too, this consistency has been used across the website to create a coherent design.
The navbar is comprised of a logo and navigation links to the other pages on the site. You can see how the navbar turns into a toggled dropdown menu when viewed on mobile.
The home page is made with warm and calm colours to entice customers to the website and show the calming feminine energy of the studio. It gives an overview of the salon and gives you the option to go straight to the contact page if you know what treatment you are looking to book.
Features:
- Navbar with logo, name of nail salon and nav bar links to other pages
- A paragraph about the nail salon
- Footer with copyright and social media links
This is a gallery page of the work the beauticians have completed at the Beau Belle salon. It shows customers the quality of work provided and gives them inspiration for looks they may want to try out.
Features:
- A gallery of images of previous nail art completed by the beau belle salon
- This page will give inspiration images to people wanting to get their nails done
- This page has a lazy loading feature that loads the images in a lower quality with a blurred effect before appearing with the full quality image.
This page displays all of the treatment options available at the beau belle salon and their prices.
Features:
- A pdf document with a breakdown of pricing for the nail services provided by beau belle
This page is an interactive quiz for users who are unsure on what treatment they require at Beau Belle salon. There are so many different types of gel treatments in the world of beauty that it can be confusing to customers who are not experienced in the beauty world. This quiz aims to find the best treatment for them in a fun way.
Features:
- A page where users can complete a quiz to see what treatment would be best suited to them
- The quiz will return treatment options to the user
- The page will then let them retake the quiz or link to the contact option for them to either call, email or use the contact form to contact the salon
The quiz is compromised over several possible outcomes to ensure you book the correct treatment for your nails.
This is a contact page for people to contact us regarding further information or booking a treatment with the salon.
Features:
- A contact form for people to contact the salon to query any of the services
- A place where people can request to book with the salon if they don't want to call and book an appointment
- The contact number and email of the salon will also be available here for customers to book an appointment
These tests have been completed on mobile and desktop.
| Page | Test | Result |
|---|---|---|
| Website | Navbar | No Issues |
| Website | Footer | No Issues |
| Website | Logo Link to Homepage | No Issues |
| Website | Menu Collapses on Smaller Screen | No Issues |
| Website | Spelling & Viewing | No Issues |
| Index | Page Responsiveness | No Issues |
| Index | Navigation Links Correctly | No Issues |
| Gallery | Page Responsiveness | No Issues |
| Gallery | Image Grid Responsiveness | No Issues |
| Pricing | Image Grid Responsiveness | No Issues |
| Quiz | Page Responsiveness | No Issues |
| Quiz | Quiz Functions on One Run Through | No Issues |
| Quiz | Quiz Functions on Subsequent Run Through | No Issues |
| Contact | Page Responsiveness | No Issues |
| Contact | Contact Form Submits | No Issues |
| Contact | Contact Form Clears | No Issues |
| Contact | Data Returns | No Issues |
I did not add alt tags to the gallery page and this caused a few errors that were easily fixed. This allowed me to incrementally improve my code and upon completion, there were 0 errors found.
| Page | Test | Result |
|---|---|---|
| Index | Validator HTML | 0 Errors |
| Index | Validator CSS | 0 Errors |
| Gallery | Validator HTML | 0 Errors |
| Gallery | Validator CSS | 0 Errors |
| Pricing | Validator HTML | 0 Errors |
| Pricing | Validator CSS | 0 Errors |
| Quiz | Validator HTML | 0 Errors |
| Quiz | Validator CSS | 0 Errors |
| Quiz | JSLint | 0 Errors |
| Contact | Validator HTML | 0 Errors |
| Contact | Validator CSS | 0 Errors |
| Contact | JSHint | 2 Errors |
The website was tested on the following browsers:
- Google Chrome
- Safari
- Microsoft Edge
The site worked well across all browsers and discrepancies were not found.
The website was tested on the following devices:
- iPhone SE
- iPhone XR
- iPhone 12 Pro
- Pixel 5
- Samsung Galaxy S8+
- Samsung Galaxy S20 Ultra
- iPad Air
- iPad Mini
- Surface Pro 7
- Surface Duo
- Galaxy Fold
- Samsung Galaxy A51
- Nest Hub
- Nest Hub Max
| Issue | Fix |
|---|---|
| Alt Tags not added to the gallery page | This error was easily fixed by adding alt tags |
| Spacing errors in code | Removed the checks of spacing between characters as unnecessary |
| Var errors | Replaced var errors with let which corrected this error |
| Missing ; | ; added to places where it was supposed to be |
| iPad Air incompatibility | Expanded the hero images on pages that contained them to rectify this with a media query |
| Buttons on quiz had no feedback | Added the same transition as the start button to subsequent questions |
| Contact page image not loading | Image path incorrect, updated and now working |
| Area | Issue | Comments |
|---|---|---|
| JSHint | One undefined variable: Line 15 emailjs | These are both being used in the contact.html but are not visible in this javascript code. |
| JSHint | One unused variable: Line 1 sendMail | These are both being used in the contact.html but are not visible in this javascript code. |
| PageSpeed Insights | Eliminate render blocking resources | I have tried creating a critical path to no avail, ran out of time to fix this. |
| 404 Redirect | Redirect 404 errors to homepage | After a final readthrough of the assessment I noticed that this was requested but did not have time to successfully complete this. |
I tested the navigation with the test subject being a user who wants to book in a nail treatment with Beau Belle Salon for the first time but is unsure what to book.
On opening the website there is initial information on the salon with a clear button that takes you to the booking page if you were confident in the treatment you wanted to book.
The gallery page shows the skills of the nail artist at the salon clearly, it is responsive to mobile and desktop.
The pricing page has a very clear layout of the treatment options available.
The quiz page functions well on mobile and desktop, it helps users by allowing them to select options they prefer and provided the perfect treatment option for them.
The contact page is clear in the navbar, you can click and get in contact with the team. Either by using the contact information provided or using the contact form that currently redirects to my email address.
Accessibility tested using Lighthouse (Google Chrome Developer Tool)
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
- To prepare for using GitHub, you can either copy or clone the repository for direct deployment.
- To get started, you'll need a free GitHub account, a free EmailJS account and preferably some kind of image editor.
- To set up your repository on GitHub, log in to your account and navigate to https://github.com/nccadman19/beau-belle.
- You can either create your own repository and copy or clone it, or you can fork the existing repository.
- Use the git add, git commit, and git push commands to upload your files to the repository.
- By default, GitHub Pages updates from the master branch. To make your website live, go to the Settings page of the repository and scroll down to the GitHub Pages section.
- Select the Master Branch as the source and confirm your selection. After a minute or two, your website should be live and ready to view.
- You can see an example of this by visiting my own website. https://nccadman19.github.io/beau-belle/index.html
A guide on how to setup and link the external services, google API for email: https://developers.google.com/gmail/api/quickstart/js
All hero images were downloaded from sources with a free license and do not require attribution. I chose images that matched with the logo to create a The gallery images and logo were taken from the Beau Belle Facebook Page (this was verbally authorised by the manager for use on my project). The images were resized and compressed using Adobe Photoshop. The favicon media at the footer was generated from the stock images on the Favicon Website. The pricing guide was created on Canva Website using a free price list template. Lastly, I used Adobe Dreamweaver to create the wireframes for this site.
| Issue | Guidance |
|---|---|
| Help needed to create gallery | https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp |
| Tutorial on setting up EmailJS | https://www.youtube.com/watch?v=5EZsRnJpUNU |
| Favicon error | https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests?noredirect=1&lq=1 |
| Templated event listener quiz | https://stackoverflow.com/questions/27336182/javascript-event-listener-quiz |
| Event listener error help | https://stackoverflow.com/questions/26107125/cannot-read-property-addeventlistener-of-null |
| README accessibility & table templated | https://github.com/FlashDrag/barber-shop/blob/master/documentation/TESTING.md |
| README template | https://github.com/othneildrew/Best-README-Template |
| Lazy loading template | https://stackoverflow.com/questions/52682522/how-to-lazy-load-component-and-template |
| Lazy loading tutorial | https://www.youtube.com/watch?v=mC93zsEsSrg&t=534s |
| Stock Images Adobe | https://stock.adobe.com/uk/ |
| Stock Images Pexels | https://pexels.com/ |