• Elegance Hair salon is based in the market town of Ledbury; it has been running since 2011. Locally there are eight other salons serving a small market town, competition is high.
• The owner had previously commissioned a website designer to develop thier site; this site no longer fits the business aspirations. Ledbury is a developing small market town; the website needs to be interactive enabling customers in as little steps as possible to book online, call and buy products. This site to be interactive with Elegance’s social media sites and overall marketing strategy. The customer experience is important and needs to be quick and easy to use; we know statistically that we are spending less time on a site, scrolling onto next site unless engaged. The site needs to be connected with the appoitment site of the salon.
• The website will attempt to answer the questions of the customer or direct them to gain the information they require.
• Developing the new Branding of the Salon.

Link to Elegance Salon

• The website has been designed to take up as much google advertising space as possible; in-conjunction with raising their presence online. This is part of the market strategy and working with ‘google my business’.

• Building brand awareness.
• To offer access to the appointments.
• Affilate link to products that the salon uses to gain extra revenue.
• To have alink straight through to the salon so they can convert the traffic to paying customers.
• Have good UX to keep customer engaged until they access 'call for action' buttons.

• Intuitive for new clients to use website easily.
• To gain the information the clients requires to make decisions either on a product, consultation, book an appiontment.
• To access the salon out of hours for appointment booking.
• To purchase products and get them sent to their home; extending the experience from the salon.

1. UX
2. Ideal Customer
3. Client Stories
4. User Stories
5. Wireframe Mockups
6. Features
7. Furture Plans
8. Technologies Used
9. Deployment
10. Testing
11. Acknowledgements

• Customers using this site to purchase their hair products; this income generation is important to the salon.
• Customers gaining inspiration from the hair gallery, clients wishing to try new hair styles, colourings, products.
• Lives or stays regularly in Ledbury.
• Wants more from their salon, an idividual experience.

• Are looking for a local salon.
• Are looking for a unique experience.
• Wanting to purchase JOICO products.
• Wanting to book when they are ready, available 24 hours.

• Links to the Salon's appointment website
• The website has been designed as part of a marketing strategy for the salon to gain new customers, to offer customers to buy products; availability to write weekly blogs.
• For customers unsure what they want to achieve to have the opportunity to look at what the salon offers; then gain opportunity for consultation.
• Telephone link through to the salon' one click to talk with salon.
• Links through to the productlinks through to other social media site where there are blogs and further information on products.
• This website links with other social media, as we access different sites yet customers will be diverted to website.
• Other local websites have not updated their sites to offer these facilities.
• Accomplishing this through a website that is engaging.
• Informative yet not overpowering them with information.
• Constantly guiding them to seek a personal touch.

• The main users are aged 18 and upwards however, their main client group is aged 40 plus, statistically this age group is more likely to view on desktop/ipad.

• Gaining a sense of trust with the owner and stylists.

• To gain either a way to independently book appointments or to call through to the salon.

• For the salon to build on their reputation, by having a website that offers more.

• For clients to know about the competions and training staff are attending and therefore want to try new designs, colourings; this completed through blogs; product page.

• Website not to feel a barrier; to feel a tool and inspiring site.

• I want the client to find the site practical, informative and inspiring. The website must give a clear element of professionalism and trust.

• Separating the information on different pages allows the ease of information provided.

• The user can book appointments at any time of the day through the website.

• They can purchase products anytime of the day, salon can introduce new products.

• Initially I drew my wireframe on paper. I worked out the template I wanted across all the pages. Then developed the ideas for the feature section, as a developer I want each section to be clear, informative and to draw viewer further to other parts of the site. As a developer I wanted the 'call to action' buttons to be clear and user friendly so that they looked part of the page, subtle yet obvious.
• I detailed my ideas and then reflected on these prior to using balsamiq to have a digital version. I would use adobe XD next time as I feel this gives a better user experience for clients.
• I already had some images as I have developed their ‘google my business’ site; in consideration for other projects.
• I also knew the salon was entering a stylist competition so would have further images available; yet were unsure when they will be available.

• Wireframe1

• Wireframe2

• Wireframe3

• wireframe4

• The original wireframes had more images, and this could be a further development yet the images I had presently I have enclosed. The brightness and professional crisp finish. Some images provided I have not put on as they are outdated.
• Having developed the first website and receiving feedback I developed wireframe4 this is the final project.
• From the original sketches my designs have developed. Using Balsamiq offered a digital version yet I would like to upgrade this next time as I feel it would enable me to grow my styles and add value to the project.

The Navagation bar is fixed so that on every section it is available. This mean that on every section the customer can call the salon; reducing button requirement over the website, focusing the customer on options. This page is the opening one. The banner image introduces you to the team members. This image has been chosen to give an impression with the products in background, visually engaging customers. The logo is part of the navagation bar and holds th function to take customer back to the welcome bpage at anytime, this function is a well know link on websites.

This paragraph leads from the banner image to give some information on the salon and what is on offer.The banner image is a focal to engage client as an opening image. The stepdown paragraph has been developed to draw the customer into the words.

This section has an image and paragraph to update information on the salon and it's owner. giving the image and information to build on trust. Placing the image on the right, visually complimenting. The about section has been highlighted to give a seperation and emphasise to paragraph, to enable viewer to see seperation. The website is on one page and offering seperation through shadowing; should enable viewers to categorise sections. The colour follow the branding of the Salon; extending the branding awareness.

This section cards were used, with images of the stylists on top; as a developer offering the layout to be simplistic and informative. The images supports the relationship between customer and stylist prior to appointmnet. The card allows a clear way of showing the prices and enabling the customer to compare and know what they are purchasing. These cards have also been given a showdowing to them, to offer a distiction between the cards, the card set upi is to introduce the staffing team. The booking link enables clients to book anytime on an online system, enabling the website to be a 24 hour access.

Showcase has been set up to show 3x3 design to let the customer visually see the stylist skill and what can be achieved; to offer the customer inspiration. The set up is to have spaces inbetween the im The action buttons at the bottom of each card are there to ensure efficent access to book online. The images have been given a shadow to seperate each image to entice the client into the images seperately.

Contact information was to give further information on times etc.. the image is present so that it is recognisable to the customer. The contact information is on a seperate page to keep the front page focusing on the services being offered. Links on the contact page enable you to book online and there is a map available in this link.

This page shows the products salon uses and that can be purchased. As a developer I wanted to offer a blog, so developed the format of two prodcuts to be showcased.Tthe use of fontawesome scissors were used here. This page has been developed so that on a monthly basis new articles acn be shared. The buttons take the viewer either through to salon landline or to purchase products.

The footer has links to the other social media sites for access through click. This is also access to afflicate link for JOICO products. The buttons are highlighted, all buttons are same colour to offer viewer consistency through site. The curser finger is available so that customers have ease to click through.

• The website has been designed around the branding of the salon; they are in the process of developing this within their marketing strategy and the website is the centre of the launch. Keeping the website crisp and clean with call for action links has been the underpinning intention; key to the market strategy. The images have also been an important consideration as the salon has developed their knowledge and techniques and have not shared this formally; though imagery and showing off!

• Header logo is fixed on every section and takes you to home page. This is where the brand of the company is recognisable. Clicking the logo takes you back to home section.
• Navigation Bar is available on each section.
• Footer contains the copyright information.
• Social icons are avialble in the footer section.
• Call to action is on every section.

• Future plans would be adding FB likes links in the footer.
• To add FB pixel so that through google analytics can provide further information on statistic on site; this will enable the marketing strategy to continually develop and transform the salon. The website is key to this.
• Google analytics is the next part of the market strategy and will inform future developments. Adding links to action buttons on site will inform future changes.
• Speed of the website and images ass this important for user experience especially on mobiles.
• Maps section to be developed.

• HTML
• CSS
• Bootstap
• Google Fonts
• jQuery
• Popper.js
• Font Awesome

• This project uses HTML and CSS programming languages.
• AWS-Cloud9 - AWS was used Cloud9 for the IDE while building the website.
• BootstrapCDN
• The project uses Bootstrap4 to simplify the structure of the website and make the website responsive easily.
• The project also uses BootstrapCDN to provide icons from FontAwesome
• Google Fonts
• The project uses Google Fonts to style the website fonts.
• jquery - The project uses jQuery to reference Javascript needed for the responsive navbar.
• Popper.js - The project uses Popper,js reference Javascript needed for the responsive navbar.
• Favicon links for the logo.
• All external images are stored and linked from ImgBB Media library owned by the Salon.

This project was developed using the Cloud9 IDE, committed to git and pushed to GitHub using the built in function within cloud9. To deploy this page to GitHub Pages from its GitHub repository

1. Log into GitHub.
2. From the list of repositories on the screen, select gristydesigns/elegance-salon.
3. Scroll down to the code tab section.
4. Link branch tab this leads you to the master branch.

• Create a file named .gitignore
• Open the file and add .c9/
• Save the file
• Add the file git add .gitignore
• Then we need to remove it from github by executing the following command git rm -r --cached .c9/
• git add .
• git commit -m "Removed .c9 folder from repo not neded"
• git push origin master

To clone this project from GitHub:

1. Follow this link to the Project GitHub repository.
2. Under the repository name, click "Clone or download".
3. In the Clone with HTTPs section, copy the clone URL for the repository.
4. In your local IDE open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

git clone https://github.com/Gristydesigns/elegance-salon.git

7. Press Enter. Your local clone will be created. Further reading and troubleshooting on cloning a repository from GitHub here.

• Telephone link- I started looking at the fundermental Web page; looking for a way to link through from website to Salon; the information out there is varied. With further guidance the links worked through popperjs.

• Working my way through sites to find up to date information when issues arose through coding e.g gallery configuration. as a student it is having the right tools and web links to make this efficent; i am gaining these.

• Designing the first website with 6 pages and then deciding through design that the website needing to be overhauled and started from scratch. the process of learning and working out how best to deliver the site to meet the needs.

• Images from salon were delayed so many images were the older ones.

• Balsamiq wireframe was not flexible and would use another system next time.

• Find unclosed tags was used to verify correct tags. I used this tool to ensure that the correct tags were inserted and that code flows correctly. This was a valuable resource as a student, accuracy and resourcful on your time.
• W3S validator to ensure code has no errors. The validator highlighted the code that was not working; enabled me to clean the code and then research when required to fix problems. This i learnt I need to do more regularly as a student. Adding this as a git commit
• Initial testing identified telephone coding as an issue. through investigation i realised there was no requirement for meta links in the header.
• Photo quality was a challenge. some issues were resolved through reducing the file size to ensure the speed of the website was good. I used the audit tester on chrome to ensure speed of the website was good; this resource is essential in a competitive market of keeping the clients attention on the site. if site is slow; new research shows we scroll and have less patients to wait.
• Testing with client group informed structural changes such as more images and more emphasis on section dividers in a sensitive way to keep the flow of the site. Using the shadow effect offered me a great solution.
• I tested the website Google Chrome and Safari. I was always using Google Chrome and found no issues when using this browser.
• The website worked to the normal standard on Mozilla Firefox as well. So far, so good.
• Slack group also tested the site and highlighted gutter to right side of site; issues which got resolved through css.

• The text, images have been part of the marketing strategy and are still in development.

• Some of the images have been taken from the old site, some from social media.

• I would like to say thank you to my mentor.Simen Daehlin his support and encouragement has been a great source of help and more importantly humour!.
• The Salon for sharing their images for this project.
• The slack community for their passion in supporting me and others, I have realised how much you can learn from other challenges.
• W3CSchools – I used for reference and guide
• Coding All in One for Dummies – I used this text for reference and to gain a better understanding.
• Web design index series – used for inspiration on designs

The content of the Website I have produced is for educational purposes at this stage.

• How I’d like the website to be perceived:**

• “keep it simple, keep it specialized and make it purposeful” – I hope this is the users experience!

• Remembered

• A site clients are happy to return to and use