Power⚡Pro Electrician Website Milestone 1

Check out the live project here.

This project is from an idea I got after talking to an old friend. He had just started an electrician company but had no website and no idea how to make one, hence why I did this project.

The website is created using the bootstrap framework, meaning it's responsive by default and it's mobile-first design, then working your way up to bigger devices.

The Power⚡Pro website is designed and formed so that customers looking to hire professional electricians quickly can find their way thru on the website.

User Experience (UX)

• User stories

  • First Time Visitor/Customer Goals

    1. As a First Time Customer, I want to easily understand the main purpose of the site, where it's located and learn more about the service offered.
    2. As a First Time Visitor/Customer, I want it to be easy to find the different sections, contact options etc.
    3. As a First Time Visitor/Customer, I want to find testimonials to understand what their customers feel and think of Power⚡Pro, Are they trusted? How is the customer service, Are they cheap or expensive, Do they have Social Media presence?

  • Returning Visitor Goals

    1. As a Returning Visitor/Customer, I want to find more information about the services they offer.
    2. As a Returning Visitor/Customer, I want to find the best way to get in contact with the company with any queries I may have.

  • Frequent User Goals

    1. As a Frequent Customer, I want to get discounts and VIP customer support.
    2. As a Frequent Customer, I want to be contacted if any new products I'm interested in arrives.
    3. As a Frequent Customer, I want to be able to sign up to a Newsletter so that I am emailed if any big updates and/or changes to the website or company.

    • Design

      • Color Scheme

        • The main colors is black/white and yellow, every section also has a unique color touch.

      • Typography

        • The Roboto font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Roboto is a clean font used frequently in programming, so it is both attractive and appropriate.

      • Imagery

        • Images is very important. The large, background hero image is designed to be simple but yet striking and catch the user's attention. It also has a old school, energetic feeling.

    • Wireframes

      • Home Page Desktop Wireframe - View

      • Mobile Wireframe - View

    Features

    • Website is responsive on all device sizes.
    • parallax effect on image, hover items changing colors

    Technologies Used

    Languages Used

    • HTML5
    • CSS3
    • JavaScript

    Frameworks, Libraries & Programs Used

    1. Bootstrap 5.0:
       • Bootstrap was used to assist with the responsiveness and styling of the website, also some icons was used.
    2. Google Fonts:
       • Google fonts were used to import the "Roboto" font into the index.html header section, which is used on all pages throughout the project.
    3. Font Awesome:
       • Font Awesome was used to add Social Media Icons.
    4. jQuery:
       • jQuery came with Bootstrap to make the navbar responsive but was also used for the carousel and smooth scroll function in JavaScript.
    5. Owl Carousel 2:
       • Owl Carousel was used for the testimonials section.
    6. Git
       • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
    7. GitHub:
       • GitHub is used to store the projects code after being pushed from Git.
    8. Atom:
       • The Atom editor to work effectively.
    9. techsini.com:
       • Generating MockUp image for most devices.
    10. Balsamiq:
        • Balsamiq was used to create the Wireframe for Desktops and also the Wireframe for Mobile during the design process.

    Testing

    The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

    • W3C Markup Validator - Results
    • W3C CSS Validator - Results

    Testing User Stories from User Experience (UX) Section

    • First Time Customer Goals

      1. As a First Time Customer, I want to easily understand the main purpose of the site, where it's located and learn more about the service offered.

         1. When entering the site the user/customer is greeted with a clean dark navbar and below that is a Call to Action section covering the whole screen, here the customer can easily call or mail for queries or purchases.

      2. As a First Time Visitor/Customer, I want it to be easy to find the different sections, contact options etc.

         1. The site has been designed to be fluid and never to confuse the customers. At the top of the homepage there is navigation bar for each of the sections available, there is also a clear header describing the section, each link describes what section they will end up at clearly.
         2. The user can always get back to the top with the floating back to top button.
         3. On the Contact Us section, after a form response is submitted, the page scrolls the user to the top of the page where the navigation bar with links are.

      3. As a First Time Visitor/Customer, I want to find testimonials to understand what their customers feel and think of Power⚡Pro, Are they trusted? How is the customer service, Are they cheap or expensive, Do they have Social Media presence?

         1. The Testimonial section can easily be reached from the Navigation bar, scrolling the user directly to the section where other customers describing the service / our company.
         2. Social media links is available in the navigation bar and also in the footer section.
         3. In the Call to Action section and the footer section the user can press a button to call customer support available 24/7.

    • Returning Visitor Goals

      1. As a Returning Visitor/Customer, I want to find more information about the services they offer.

         1. We have a section just for that, click on the link saying Services and you will be taken there.
         2. Customer can also check out recent projects we have been working with lately.

      2. As a Returning Visitor/Customer, I want to find the best way to get in contact with the company with any queries I may have.

         1. The navigation bar clearly highlights the "Contact Us" Section.
         2. The navigation bar and the footer sections contains links to the company's Facebook, Twitter and Instagram page as well as the company's email.
         3. The Call Us button is set up to automatically enter the number to the company.
         4. The email button is set up to automatically open up your email app and autofill there email address in the "To" section.

    • Frequent User Goals

      1. As a Frequent Customer, I want to get discounts and VIP customer support.

         1. Just use the Call Us button in the Call to Action section, we will gladly give you a great discount code.

      2. As a Frequent Customer, I want to be contacted if any new products I'm interested in arrives.

         1. A VIP Section is being developed, just for services like this.

      3. 3. As a Frequent Customer, I want to be able to sign up to a Newsletter so that I am emailed if any big updates and/or changes to the website or company.

         4. We are developing a Newsletter section right now, check back in 1 week.

    Further Testing

    • The Website has been tested with Brave browser, Google Chrome, Mozilla Firefox, Internet Explorer, Microsoft Edge and Safari browsers.
    • The website was viewed on a variety of devices such as Desktop, Laptop, iPad, Samsung Galaxy s10 to s20, iPhone7, iPhone 8 & iPhoneX.
    • A large amount of testing from family and friends was done to ensure that all pages were linking correctly.
    • Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

    Known Bugs

    • No known bugs as of now, have gone through and tested all functions available.

    Deployment

    GitHub Pages

    The project was deployed to GitHub Pages using the following steps...

    1. Log in to GitHub and locate the GitHub Repository
    2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
    • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
    3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
    4. Under "Source", click the dropdown called "None" and select "Master Branch".
    5. The page will automatically refresh.
    6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

    Forking the GitHub Repository

    By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

    1. Log in to GitHub and locate the GitHub Repository
    2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
    3. You should now have a copy of the original repository in your GitHub account.

    Making a Local Clone

    1. Log in to GitHub and locate the GitHub Repository
    2. Under the repository name, click "Clone or download".
    3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
    4. 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/P-Lundkvist/Electrician-website-milestone-project-1.git
    

    7. Press Enter. Your local clone will be created.

    $ git clone https://github.com/P-Lundkvist/Electrician-website-milestone-project-1.git
    > Cloning into `CI-Clone`...
    > remote: Counting objects: 10, done.
    > remote: Compressing objects: 100% (8/8), done.
    > remove: Total 10 (delta 1), reused 10 (delta 1)
    > Unpacking objects: 100% (10/10), done.
    

    Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

    Credits

    Code

    • The Carousel used in testimonials section got it's code from Owl Carousel 2

    • The Back to top button used in testimonials section got it's code from MDBootstrap.com

    • Bootstrap Library used throughout the project mainly to make site responsive and using the Bootstrap Grid System and nice css code. Bootstrap 5

    Content

    • About Us section text was generated using a about us text generator from Volusion.com

    Media

    • The Call to Action image come from Pixabay.com

    • The Project image power-tower come from Pixabay.com

    • The Profile image woman-1 come from Pixabay.com

    • The Profile image woman-2 come from Pixabay.com

    • The Profile image woman-3 come from Pixabay.com

    • The Profile image woman-4 come from Pixabay.com

    • The Profile image woman-5 come from Pixabay.com

    • The Profile image woman-6 come from Pixabay.com

    • The Profile image man-1 come from Pixabay.com

    • The Profile image man-2 come from Pixabay.com

    • The Profile image man-3 come from Pixabay.com

    • The Profile image man-4 come from Pixabay.com

    • The Profile image man-5 come from Pixabay.com

    • The Profile image man6 come from Pixabay.com

    Acknowledgements

    • My Mentor Oluwafemi Medale for advices and feedback.

    • Tutor support at Code Institute for their support.

    • Code Institute Slack channel is a great resource.

    • Thanks to stackoverflow.com community for solutions of problems.