Project: OXEN Car Service

View this website on GitHub Pages

The primary goal of the website is to represent OXEN Car Service garage on the web and to attract new customers through Google search. And to interact with existing and potential customers.

The website will tell short story about the garage. Provides information about most popular services and special offers as well as describes full range of services. On the website customers can find short information about garage team and read reviews. Also find contact details (address, phone number, location) and opening hours.

UX

1. Target client:

Our potential client:

• The website will focus on a car owner looking for car repairs or maintenance.
• Current clients who buying garage services

Our demographic:

• Car owners – private or/and commercial.
• Car owners age between 25 – 65 years
• Living in Galway city and surrounding areas.

2. Our client is looking to achieve:

• Our client is looking for a car repair garage in local area. Garage that can offer full range car repair services on all kind of cars. Client expects great value for money and that he can trust to garage team.

3. How this website will help clients

• On the website client can quickly find all popular services garage provides as well as short brief of main services.
• The website has quick story about the business, also customer can find pictures of owner and employees as well as their short “about” stories - this will help to build trust.
• On the website customer can find testimonials, links to social media accounts - customer can check reviews and stay connected. To receive news, offers, new available services.

User stories:

• As a customer, I want to know what kind of services garage provides, to be sure if you have the one, I’m looking for?
• As a user, I want to know people’s opinion about the garage, to understand if I can trust?
• As a user, I want to know location of the garage, to find out if the garage is close enough to me?
• As a customer, I want to know opening hours, to schedule my time.

4. Wireframe

• Below are the desktop, tablet and mobile wireframes. These are wireframes of landing page of five sections created with the Balsamiq Wireframes application.

Link to my Balsamiq Wireframes

Features

Initial Existing Features

• Responsive - A fully responsive landing page will rescale itself to preserve the user experience.

• Navigation - Fixed navigation allows the user to easily navigate. Allows the user quick accessibility to social media links, location and, phone, opening hours.

• Animation - CSS animation to represent garage name and logo to user.

• Promo label - promotes special week offer to users.

• Welcome section - User can read a brief story about the business.

• Our Services - User can find popular and main services garage can offer.

• About Us - User can see employee’s pictures and find what kind of knowledge they have. have.

• Testimonials - User can read garage customers reviews.

• Contact Us - User can contact garage if his looking for some specific service or feature. Opening hours, address, location represented as well.

• Footer - User can access menu.

Features Left to Implement

• Implement "Contact form" submission function.

Technologies Used

Languages

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs

• Bootstrap - The project uses Bootstrap facilitate a responsive mobile-first design and user experience.
• HTML Agility Pack / / Agility DOCS - HAP is an HTML parser written in C# to read/write DOM and supports plain XPATH or XSLT.
• Balsamiq Wireframes - To create wireframes.
• GitHub - Used to store the project's code.
• Git / GitPod - Used for version control.
• Google Fonts - To style the website fonts.
• Google Chrome DevTools - Helps you edit pages on-the-fly and diagnose problems quickly.
• Autoprefixer - Parses CSS and adds vendor prefixes.
• Dillinger - Online README editor
• Am I Responsive - Screen shots of the various device breakpoints for responsive design.

Testing

• W3C - HTML Validator
• W3C - CSS Validator
• Closing Tag Checker - Closing Tag Checker for HTML5
• Google Mobile-Friendly Test - Mobile-friendly check.
• Google Lighthouse - To see how well your website performs OXEN Performance.
• Online-Spellcheck Online spelling and grammar checks.

1. Code & Responsivnes.

   • Website was test and working well in browsers (Chrome, Safari, FireFox, Opera, IE).
   • Responsivnes was tested on a variety of devices (Desctops, laptops and mobile phones).
   • Website tested with Google Mobile-Friendly Test - website is mobile friendly.
   • CSS code ran through Autoprefixer and copied.
   • HTML Validator - code OK.
   • CSS Validator - code OK.
   • Closing Tag Checker - code OK.

2. Links.

   • I tested logo (top left) to ensure it reloads the webpage.
   • "OXEN Garage" location link (top left beside Logo) opens new tab in the browser with google map location.
   • Tested each navigation link to ensure it is working correctly and navigates to correct web page section.
   • Social Media links (right top and in Contact Us section) were tested, each link open a new tab in the browser with correct page.
   • Footer navigation links - working correctly and navigates to correct web page section.
   • Copyright lynx (footer) - each link open a new tab in the browser with correct page.

3. Contact Form. ("Contact form" submission function not implemented)

   • Try to submit the empty form - popup error message regarding required fields.
   • Try to submit the form with an invalid email - popup error message that email address is incoplete.
   • Try to submit the form with all valid inputs - website reloads.

4. Performance.

   • Google Lighthouse - The Website Performance

Deployment

Project has been deployed on GitHub Pages:

1. Code was written using Gitpod.
2. During development code was committed and pushed to GitHub repository.
3. In the current repository click on "Settings".
4. Scroll down to "GitHub Pages" section
5. Select "Master" from dropdown menu and click Save.
6. This will publishes the project to GitHub Pages and displays the link.

To run my code locally - in repository simply click "CODE" button and select an option "Clone" or "Download". Clone - provides a URL, which you can use in your IDE. Download - provides a link to ZIP file which can be unzipped on your local machine.

Credits

Content

• The text for Offer was copied from GROUPON
• The text for Welcome Section was copied from Ward's Garage
• The text for About Us Section was partially copied from Hectors Auto Repair
• The text for Testimonials was copied from Leveso

Media

• Fontawesome - Used for the icons.
• Pixabay - Stunning free images (team and Customers picktures).
• Flaticon - Database of free icons.
• Vecteezy - Free vector art used for backgrounds.
• VectoStock - Free vector images used for background
• Pixlr - Online Photo Editor.

Acknowledgements

• Thanks to w3schools.com for help with filter, forwards attributes.
• Thanks to Bootstrap DOCS
• Thanks to YouTube chanel Coder Coder for the transparent background.
• Thanks to YouTube chanel Online Tutorials for ideas.
• Thanks to Code Institute
• Thanks to My mentor, Ignatius Ukwuoma, for his guidance throughout this project.

Disclaimer:

Please note, this project was created in education purpose.