Waste Matters

Project purpose
UX
- User stories
- Strategy
- Scope
- Surface
- Wireframes
Features
Technologies Used
- Languages used
- Frameworks, Libraries & Programs Used
Testing
Deployment to Github Pages
Clone
Credits
- Media
- Acknowledgments

Table of contents generated with markdown-toc

Project purpose

Waste matters Ltd. offers waste and recycling solutions to Irish businesses. The interactive demo aims to advertise and sell polystyrene compactors. The demo will guide the user through a mini-game in which they will drag and drop polystyrene blocks into a compactor machine before turning it on. While interacting with the demo, the user will receive key facts about polystyrene recycling and waste matters. On completion of the demo, the user will have the option to ‘learn more’ which will lead them to the current waste matters website.

UX

User stories

As a user, I would like the user experience on the website to be intuitive.
- The interactive demo guides users using clear instructions
As a user, I want to learn about polystyrene compactors and how they work.
- The demo demonstrates how the polystyrene compactors work
As a user, I want to learn about polystyrene recycling in an engaging manor.
- The interactive demo requires user engagement while displaying the information in a clear manor
As a user, I want my experience on the website to be enjoyable.
- The interactive demo is built on a rigid body physics engine. Interacting with the polystyrene blocks can elicit a positive emotional response.

Strategy

Goal: To inform users about polystyrene recycling in an engaging manor and sell polystyrene compactors through waste matters Ltd.

Scope

An interactive demo utilizing Matter.js, a 2D rigid body JavaScript physics engine.

Surface

Color Scheme

Font color: #f0f8ff
background color: #14151F
User instructions: #ff0000

Typography

Roboto Mono is the font used on the webpage with monospace as the fallback font in the case of the default font failing to load correctly. The default font weight of 400 is used throughout the page.

Imagery

The imagery is cartoon-like in style.

Wireframes

Features

This project is an interactive game built on the 2d physics engine matter.js. It allows users to place polystyrene objects into a compactor and turn it on. This game serves the purpose of engaging the user and allowing for an alternative way of imparting information. Facts about polystyrene recycling, polystyrene compactors and waste matters appear as the user interacts with the demo.

Technologies Used

Languages used

HTML5
CSS3
JavaScript

Frameworks, Libraries & Programs Used

Testing

Code Validation

HTML was validated using W3C Markup Validation Service.
CSS was validated using W3C CSS Validation Service - Jigsaw
JavaScript was passed through the linter jshint with no warnings

Functionality test

Num	Test	Action	Outcome Image	Result	Notes
1	On page-load a user notification appears	Load page on devices with a variety of resolutions	Image of user notification	Pass
2	The 'next' button makes a user instruction arrow appear	Click next button	Image of user instruction arrow	Pass
3	The 'P' button when clicked, moves the user instruction arrow, spawns a polystyrene block and presents a new user message	Click spawn button	Image of user instruction arrow, polystyrene block and new message	Pass
4	The 'P' button when clicked immediately after next button behaves as expected	Click spawn button immediately after next button	Image of user instruction arrow frozen on spawn button	Fail	User instruction arrow freezes on spawn button
5	The compactor switch ejects compacted polystyrene from the machine	Click compaction switch	Image of compacted polystyrene ejected from the machine	Pass
6	The compactor switch triggers the final user message	Click compaction switch	Image of final user message	Pass
7	The 'Learn more' button when clicked opens in a separate tab and brings users to wastematters.ie	Click Learn more button	Image of wastematters.ie opening in a new tab	Pass

Problems during development

Num	Problem	Fix
1	Textures not appearing on matter.js shapes	Disable wireframes under render.options.wireframes
2	Polystyrene blocks not appearing behind the compactor image in the canvas (3D effect)	The order in which you add objects to the world determines the z-index. Adding the foreground image of the compactor after the polystyrene blocks allows the blocks to appear behind the image, giving the desired 3D effect.
3	When user creates a polystyrene block, they appear in-front of the	Use add to world method within the polystyrene creation function and re-add
	images, giving no 3D effect.	the images on each call.
4	On-screen messages were interfering with the mouse drag function	Add a style attribute of 'pointer-events: none;' to the message div
	Image of mouse drag bug	Image of mouse drag bug fix
5	Could not get vertices to work correctly on matter.js	This problem was not resolved.
	Image of vertices bug

Browser Compatibility

Num	Browser	Test result
1	Chrome	Passed
2	Opera	Passed
3	Mozzilla	Passed

Responsiveness Testing

Chrome developer tools was used to test a wide variety of device sizes and resolutions.
The website has been tested on an iPhone 5, Samsung Galaxy s10, Acer swift 3 and a desktop PC with a 1080p and 4k monitor.
Am I responsive image

Unresolved Bugs

Users can turn on the compactor before placing any objects into it.
When smaller devices are in horizontal view mode it can break the responsiveness due to canvas limitations with matter.js. However, as this website is primarily targeted to professionals looking to buy polystyrene compactors it is very likely it will be viewed on a desktop.

Google Lighthouse Scores

Deployment to Github Pages

Create a Github account at github.com
Click on the 'New' button in the top left corner
Enter a name for the repository, check the 'Add a README file' box
Click 'Create repository'
Open the repository in preferred integrated development environment
Save changes by clicking the save button
Once a feature has been successfully created using the 'git add .' command to stage the changes made
Then use the command 'git commit -m"[enter commit title here]"'
All meaningful changes to the code should have its own commit
To push the commits to Github use the command 'git push'
Once the website is ready for deployment return to github.com
Click on the 'settings' tab
Scroll down to the 'GitHub Pages' section
Click the 'None' dropdown button
Select the master branch
Click save
After a few minutes, the site will be published to GitHub pages and can be accessed using the URL at the GitHub Pages section

Clone

Follow this link to my Github Repository.
Click 'Clone or Download'.
In the Clone with HTTPs section, click the 'copy' icon.
In your local Integrated Development Environment open Git Bash.
Change the current working directory to where you want the cloned directory to be located.
Type 'git clone', and paste the URL you copied before.
Press enter and your local clone will be available.

Credits

Media

Compactor image: https://wastematters.ie
Styrofoam texture: https://3dtextures.me/2019/03/21/styrofoam-001/
P button image: https://www.pngkey.com/detail/u2w7q8e6y3e6a9a9_pow-button-mario-pixel-art-mario-christmas-pixel/
Floor block image: https://webstockreview.net/image/brick-clipart-super-mario/125781.html
Lever image: https://www.kissclipart.com/cartoon-lever-png-clipart-computer-icons-clip-art-1f8vxo/s
Refresh-arrow: http://clipart-library.com/clipart/8T68KdEGc.html
Green pipe: https://publicdomainvectors.org/en/free-clipart/Green-pipe/39369.html

Acknowledgments

Stackoverflow as a resource for learning and troubleshooting.
Matter.js documentation
The coding train YouTube channel
A special thanks to my mentor Brian Macharia for his invaluable guidance throughout this project.
Thanks to Simen Daehlin for his very helpful feedback on the project.

code-institute-submissions / waste-matters Goto Github PK

waste-matters's Introduction