This is my first milestone project. Edinburgh Surface Repairs is a new small start up company based in Edinburgh. They repair surfaces for construction and domestic customers and since it’s launched the owner has seen a lot of demand. I’ve designed and build this website as a simple three-page site promoting the company’s work, giving an overview of what services they provide and also another way for potential customers.

Edinburgh Surface Repairs website has been created with a focus on what exactly Edinburgh Surface Repair does and its contact details. Most of ESR’s work customers have been driven from social media so it was important that the website had relevant links to these. The concept for ECR was to demonstrate to potential customers examples of there work and another way of potentially getting new customers. The website contains three pages. The Index gives page gives a summary of what sectors the business covers, and a services section which also gives a summary of what specific services they offer. There is a modal on this page purposely for people to click to retrieve the company’s contact details. The second page simply demonstrated work examples using bootstrap’s carousel. Before and after pictures The third page shows some customer review’s taken from the companys facebook.

Throughout the site the navbar, social media links, contact details, company logo, and jumbotron are a fixed template across the whole site. This website helps ECR achieve its goals from a user to use, user friendly, responsive design website. Due to the company only having one logo I felt that the white and red complement each other well on the website alongside the social media icons being red also.

1. As a user I want to see exactly what the company does.
2. As a user I don’t want to see an overcrowded website.
3. As a user I want to be able to access the contact details easily.
4. As a user I want to see examples work this company does.
5. As a user it would be good to see customer reviews. Company Owner
6. As the owner I want to explain what services my company provides.
7. As the owner I want to see my contact details.
8. As the owner I want to see links to my Facebook and Instagram as they are popular.
9. As the owner I want to see an easy to navigate site.
10. As the owner I would like to see examples of my work.

Wireframes were completed using Balsamiq. [https://github.com/tdignan87/ESRWireframes]

There were informal chats with the company’s owner. Throughout the process though, the owner was involved in what content the site had and provided user acceptance feedback alongside a few other people in the company. This feedback was considered, and the site was adjusted as required. Features

1. Index page contains a contact us button – Allows users to have a pop-up window with simple contact details. (Modal)
2. The social media buttons in the navbar open the relevant social media link in a separate file.
3. The services section on the index page contrasts with the white area to demonstrate what type of services the company provides.
4. The work examples page contains bootstraps carousel showing before and after picture of some of ESR’s work. This allows user to quickly see examples of the company’s work without being overloaded with different images.
5. The site is fully responsive for mobile users and navbar collapses. ##Features Left to Implement ##
6. Modal opens a contact us form which when the customer enters their details, the company will be alerted to this. I want to implement this once I learn about JavaScript later in this course.
7. I would like to add another page with costings for a typical repair. This is at the request of ESR although will be completed at a later date.

1. HTML
2. CSS
3. Bootstrap for responsive design and controls
4. Font awesome for social media icons
5. Google fonts for fonts
6. Javascript for bootstrap libraries
7. Git for version control
8. Chrome Dev tools for testing different breakpoints etc

All testing has been done using chrome developer tools for the responsive UI checks as well as general debugging. Gitpod was the IDE used for developing the webpage. Chrome developer tools was used for checking the breakpoints. Acceptance user testing was also completed where I shared my github link with the company’s owner who provided feedback prior to publish. (Owner is my brother). We also got other family members to check on various devices. Users were asked to try all the links across the three pages, and this included the social media links and the button which launches the modal. There were issues with the pictures in the work examples page where they were too “blown up” for mobile view. User testing enabled me to identify this and rectify before release.

1. No overcrowding of content on the site.
2. Ease of accessing contact details quickly.
3. Carousel working with clear pictures on all devices for users to see before and after pictures.
4. Customer reviews is clear on all devices.

The site is hosted on Github and deployed from the master branch. When new commit is done on Github then this site will update. To run locally I took a copy of the Github repository and copied directly into my editor.

• The content on the page is created by me however sections of my page were copied from the official bootstrap site. An example would be the navbar, jumbotron and carousel.

The photos used in this site were obtained from [https://www.facebook.com/edinburghsurfacerepairs/] with full permission from the owner. Acknowledgements • I want to thank the Slack community for being really helpful throughout this process. I think without Slack and members such as @eventyret_mentor this would have not been possible. [https://www.linkedin.com/in/simendaehlin/] - Credit