My Rigs
(Developer: Benjamin Draper)
Table of Content
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
Project Goals
User Goals
- Finding a website that offers a range of gaming computers for children.
- See list of the available products and designs.
- Find information about the company.
- Find the location of the company.
Site Owner Goals
- Increase in the number of customers visiting the website.
- Promote the company to customers.
- Provide a way for new and existing customers to contact the business for sales and support queries.
- Provide essential information about the business to customers.
User Experience
Target Audience
- People looking for a computer for a child.
- People looking to buy a computer that is capable but have a limited budget.
- People looking for a themed computer for their child.
- People who are looking for an easy and jargon free service.
User Requirements and Expectations
- An Intuitive and accessible navigation system.
- Easily find relevant information relating to the company and the products.
- All links work as expected and functions perform their tasks correctly.
- Presentation is in line with the company guidelines and the website is visually appealing on all screen sizes.
- Easy access to contact information.
- Easy to read Headings to draw attention to the areas of interest to the customer.
- Accessibility features.
User Stories
First-time User
- As a first-time user, I want to know where the company is located.
- As a first-time user, I want to know the range of their products.
- As a first-time user, I want to know more about what the company does.
- As a first-time user, I want to get an idea of what to expect from the look and ability of my computer.
Returning User
- As a returning user, I want to see easy access to the support area.
- As a returning user, I want to know how to contact customer support.
- As a returning user, I want to find a phone number to call for ongoing support queries.
- As a returning user, I want to see any new products that are available.
- As a returning user, I want to leave some comment, suggestion, or message to the staff.
- As a returning user, I want to find the company on social media.
- As a returning user, I want to know who owns the company.
- As a returning user, I want to get directions to the offices.
Company Owner
- As the company owner, I want users to find information about the products available from the company.
- As the company owner, I want users to get to know the website.
- As the company owner, I want the users to be able to contact us easily.
- As the company owner, I want the website to act in a responsive manner on all devices.
- As the company owner, I want users to get redirected to a custom 404 error page if they type in a wrong link into thier browser.
Design
Design Choices
The website was designed to reflect the industrial design of most computers. The company does add a vinyl skin to their computers depending upon the chosen design and to reflect this I have added some imagery and colour that the gaming industry uses to reflect computer gaming.
Colour
For the colour scheme the company owners chose to use a grey theme and highlight with mainly red and a little bit of blue to draw attention to certain areas while still reflecting both the industrial and gaming themes. To narrow down the colours I used https://coolors.co/.
Fonts
The business owners preferred the use of Inter font as the main, with a backup of sans-serif across the website. This is used to maintain a Consistent and professional look with an easily readable format.
For the Secondary font the owners decided to use Quicksand with a backup of sans-serif, this will be used for emphasis and future changes to the website should there be major content updates.
Structure
The page is structured in a regularly used, well know, user friendly, and easy to navigate. Upon arriving to the website, the user sees a familiar type of navigation bar with the company name on the left side and the navigation links to the links along the top. The website consists of four separate pages:
- A homepage with a section for “What We Do”, “Cheap and Powerful Gaming” and “Your PC Your Way”.
- A products page with a carousel and information about all the products available.
- A contact us page with a contact form, a map, and the company office location.
- An about us page with the information about the owners, the security measures they take and the additional services they can offer.
Wireframes
Mobile Design
Desktop Design
Technologies Used
Languages
- HTML
- CSS
Frameworks & Tools
- Bootstrap v5.0
- Git
- GitHub
- Gitpod
- JustInMind
- Google Fonts
- Favicon.io
- coolors
- Am I Responsive?
Features
Logo and Navigation Bar
- Featured on all four pages.
- The navigation bar is fully responsive and changes to a toggler (hamburger menu) on smaller screens and includes links to the Homepage, Products, Contact Us and About Us page.
- It allows users to easily navigate the website.
- The link for the page the user is currently hovering over is underlined.
- User stories covered: 5,6,14
Carousel
- Introduces the user to the range of products with pictures and a title for each.
- arrow selectors to allow the user to navigate the slide show back and forward.
- User stories covered: 2,4,8,13
Google Maps API
- Allows the user to see the location of the company offices and the surrounding area
- User stories covered: 1,12,15
Footer
- Featured on all four pages
- Consists of two separate divs: contact information, and social media links
- User stories covered: 7,10,15
Company address
- The Company Address allows users to find the company by their address, this can be used by some users with a Satnav or externally in Google maps.
- User stories covered: 1,12,15
Products
- Gives an overview of the products in three sections one for each product currently available. This allows the website to be easily expanded later as more products are added.
- Each product is accompanied with two images one of each design type to allow the users to make a better choice.
- Features description of design.
- User stories covered: 2,3,4,8,13
Accordion
- Provides the user with information about the company while not displaying too much information at once, this is easily expandable in later versions should the site owner wish to do so.
- User stories covered: 3,11
About Us
- Gives a description of the services the company can offer, the security measures they take to keep customers safe and an introduction to the owners of the company.
- User stories covered: 3,11,13
Meet the Owner
- Features a short story about how the two owners of the website got together and decided to create the company.
- User stories covered: 11
Contact form
- Allows users to contact customer support for sales and support queries, this initiates an email conversation between the user and the support team.
- User stories covered: 6,9,15
Customer support
- Allows users to contact customer support for sales and support queries, this can be done through the contact form, over email, social media and by phone.
- User stories covered: 5,6,7,9,10,15
Review
- Allows users to contact customer support and leave a review through the contact form on the contact us page.
- User stories covered: 6,9
Responsive Design
- Allows the webpage to resize to be easilly viewed on all types on devices with different types of viewports.
- User stories covered: 16
404 Error page
- Prevents the user from getting lost by entering a url that does not exist and redirecting them to a custom error page directing them back to the main website.
- User stories covered: 17
Validation
HTML Validation
I used the W3C Validation Service to validate the HTML of the website. The Product page passed validation with no errors, The Home, Contact Us and About Us pages passed with one warning where teh hero image had no header, this was intentional as it is only used to display the hero image.
CSS Validation
I used the W3C Jigsaw CSS Validation Service to validate the CSS of the website. My CSS passed with no errors and one warning relating to impoting of external stylesheets.
Accessibility
I used WAVE WebAIM web accessibility evaluation tool to ensure the website met high accessibility standards. All pages passed with no errors and minimal warnings.
Performance
Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website.
Performing tests on various devices
The website was tested on the following devices:
- HP Envy X360 (both in pc and tablet mode)
- MacBook Pro 13” 2019
- Samsung Galaxy S21 FE 5G
In addition, the website was tested using Google Chrome Developer Tools Device Toggling option for all available device options.
Browser compatibility
The website was tested on the following browsers:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
Testing user stories
- As a first-time user, I want to know where the company is located.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Google Maps API | Navigate to the Contact Us page, locate the Google Map | Locating a map showing the location of the company. | Works as expected |
- As a first-time user, I want to know the range of their products.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Products | Navigate to the Products page | See the Products on the products page | Works as expected |
- As a first-time user, I want to know more about what the company does.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About Us | Navigate to the About page | Find description of what services the company offers, the security measures they take and the information about the owners | Works as expected |
- As a first-time user, I want to get an idea of what to expect from the look and ability of my computer.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Products | Navigate to the Products page | Find pictures and information of the products on offer from the company | Works as expected |
- As a returning user, I want to see easy access to the support area.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Customer support | Navigate to the Contact Us page and locate the contact form | Find the contact form on Contact Us page | Works as expected |
- As a returning user, I want to know how to leave a review.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Review | Navigate to the contact us page and use the form to leave a review | The user finds the form and form data is sent to the company. | Works as expected |
- As a returning user, I want to find a phone number to call for ongoing support queries.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Footer | On all pages scroll to the footer | See the phone number | Works as expected |
- As a returning user, I want to see any new products that are available.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Carousel | Navigate to the Products page | See any new available products | Works as expected |
- As a returning user, I want to leave some comment, suggestion, or message to the staff.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact Form | Navigate to the Contact Us Page and locate the contact form, fill out and submit contact form | Data submitted via contact form | Works as expected |
- As a returning user, I want to find the company on social media.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Footer | On all pages scroll to the footer of the page | Click on one of the three social media links | Works as expected |
- As a returning user, I want to know who owns the company.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Meet the owner | Navigate to the About Us page and scroll down and open the Meet the Owner section of the accordion | Find brief introduction to the owners and the company | Works as expected |
- As a returning user, I want to get directions to the offices.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Company address | Navigate to the Contact Us page, locate the company address | See address to the company offices | Works as expected |
- As the company owner, I want users to find information about the products available from the company.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Products | Navigate to the Products page | See the information available products for the products on offer | Works as expected |
- As the company owner, I want users to get to know the website.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
About Us | Navigate to About page and locate Accordion information | See relevant information about the company | Works as expected |
- As the company owner, I want the users to be able to contact us easily.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact Form | Navigate to the Contact Us Page, locate the contact form and submit a completed contact form | Data submitted via contact form | Works as expected |
Footer | On all pages scroll to the footer of the page | Click on one of the three social media links | Works as expected |
Footer | On any page scroll down to the footer | Find the phone number | Works as expected |
- As the company owner, I want the website to act in a responsive manner on all devices.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Responsive Design | View the Website on various devices, desktop, laptop and mobile. | Website is responsive and re-sizes depending upon the viewport. | Works as expected. |
- As the company owner, I want users to get redirected to a custom 404 error page if they type in a wrong link into thier browser.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
404 Feature | Navigate to the any page of the website and type in to the address bar of the browser an incorrect url | User is redirected to the 404.html page | Works as expected |
Bugs
Bug | Fix |
---|---|
The user can submit a contact form input without a message | Add required attribute to message input field |
The Social media icons took the current tab to the new website instead of opening in a new tab | Add target="_blank" attribute to 'a' tag |
When viewed on tablets, the google maps API I used moved the pin around on the map | Swap to a iframe embedded version of google maps |
Navbar divides into two rows on xs screen size | Using bootstrap to create a burger style dropdown menu when the screen is too small |
Removed whitespace after footer but body contents overlaps with footer | Removed "position: absolute" from footer |
Deployment
The website was deployed using GitHub Pages by following these steps:
- In the GitHub repository navigate to the Settings tab
- On the left-hand menu select Pages
- For the source select Branch: master
- After the webpage refreshes automatically you will see a ribbon on the top saying: "Your site is published at https://benjamindraper1996.github.io/CI_PP1_MyRigs/
You can fork the repository by following these steps:
- Go to the GitHub repository
- Click on Fork button in upper right-hand corner
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash
- Change the current working directory to the one where you want the cloned directory
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY) 7.Press Enter to create your local clone.
Credits
Images and Logos not referenced below are owned by the developer.
Media
Some of the pictures below were edited after being sourced from the following resources, this was either to aid in the website design or to allow for proper mockups of the company products to be created in the absence of final versions.
In order of apearance:
- home-screen-hero : Photo by Sergei Tokmakov on Pixabay
- gamer-boy-2 : Photo by Tomasz Mikołajczyk on Pixabay
- computer-repair : Photo by Jan Vašek on Pixabay
- gamer-girl : Photo by Tomasz Mikołajczyk on Pixabay
- two-graphics-cards : Photo by Nana Dua on Pixabay
- computer-parts : Photo by marijana1 on Pixabay
- computer-desk : Photo by Hamza Boukhou on Pixabay
- facebook : Photo by Sasithon Prehofer on Pixabay
- twitter : Photo by Sasithon Prehofer on Pixabay
- instagram : Photo by Sasithon Prehofer on Pixabay
- lego-brick-pc : Photo by EuroPC on EuroPC
- lego-brick-wall-pc : Photo by EuroPC on EuroPC
- minecraft-grass-pc : Photo by EuroPC on EuroPC
- minecraft-ore-pc : Photo by EuroPC on EuroPC
- freaky-forts-black : Photo by EuroPC on EuroPC
- freaky-forts-green : Photo by EuroPC on EuroPC
- contact-us-hero : Photo by jessica45 on Pixabay
- about-us-hero : Photo by Gerd Altmann on Pixabay
- keyboard-questionmark : Photo by Gerd Altmann on Pixabay
- support : Photo by Sabine Kroschel on Pixabay
- secuity : Photo by Werner Moser on Pixabay
- gamer-boy : Photo by ExplorerBob on Pixabay
- model-owner-jake : Photo by Royal Anwar on Pixabay
- model-owner-diana : Photo by Gerd Altmann on Pixabay
- 404-page : Photo by Shelby Weers on Pixabay
Code
In order of appearance:
- The HTML responsive and toggling Navbar from bootstrap was used from the bootstrap v5.1 documentation code documentation and added to each header page of the website.
- The HTML Carousel from bootstrap was used to display new products available from the company, i used the dark variant and added the "carousel-fade" attribute and accompanying CSS code into my own style.css for a custom slide change.
- The embedded iframe Google map HTML was generated using Google's map generator, this allows me to add a map to the page without the need for my own API.
- The HTML for the toggling accordion was used from the bootstrap v5.1 documentation code documentation and added to the about us page of the website.
- The 404 page was made using the build guide on GitHub Docs, I then reused the header, footer and found a relevant image for the body.
Acknowledgements
I would like to take the opportunity to thank:
- My mentor Mo Shami, for his feedback, advice, guidance and support.
- My partner Megan Fox, for her support advice, help testing and allowing me the free time to work on my project.
- Lee Webb on slack (lee webb2015) for his help pointing me in the right direction towards bootstrap.
- To the Code Institute Slack community for providing help and support.
- To Dominic Wingfield who is the real owner of the company but did not opt to be the face of of it only the inspiration behind it.