Our Oceans, Our Plastic is a fictional organisation that aims to inform the general public about plastic waste in our oceans. My aim with this project was to create a website that allows to user to learn more about the issues of plastic waste in an interactive way, keeping them interested, inspired and motivated to continue to learn more.
The idea for this project came to me as I believe that plastic waste in our oceans is an important topic to discuss and I wanted to create an unintimidating environment to learn more about it. As I had just completed an introductory module on JavaScript, I decided to implement JavaScript in different ways throughout my project: with a Google Maps API, a short interactive quiz, animated arrows to guide the user on and a form to subscribe to a fictional newsletter.
This was the second of four Milestone Projects that made up the Full Stack Web Development Program at The Code Institute. The main requirements were to make an interactive and responsive website with HTML5, CSS3 and JavaScript.
Click here to view the project live.
-
To provide a platform for users to learn more about plastic waste in the oceans in an interactive and intuitive way.
-
To make the website interactive through the use of JavaScript, with a Google Maps API feature, a quiz and the chance to sign up to a newsletter.
-
To make learning about the plastic waste problem seem exiting to users, by creating a project that both teaches and then tests the user on what they've learnt.
-
To make it easy for users to make their way through each feature on the website, by having a clear menu bar but also including links to different parts of the website throughout with a consistent design.
-
To create a design that would be fully responsive on all devices and screen sizes.
The following User Stories helped me to create a design that would satisfy the needs of several different types of users.
- I am one of the creators of this platform and want to see it succeed. I would like to attract users in the hope of raising awarenss about plastic waste in our oceans and increasing our newsletter followers in order to make a difference.
- I am a user who has never really considered that plastic waste in our oceans might be a problem. I want to use this website to learn more about the problem and want to see how much I've actually now learnt by taking the quiz.
- I am a user who wants to stay up to date on the plastic waste problem, preferably with the latest news and tips on what I can do to help.
- I am a primary school teacher who wants to discuss plastic waste with my students. I often rely on interactive sources online to do so, and have returned to this website again as I find it useful to be able to introduce my students to the topic before testing them on what they've learnt.
- I have used this website to learn about gyres before and now want to remind myself of where the five largest are located.
- I am a user who primarily uses an iPad Pro to browse websites. I want to have a good experience on this website and view all the features in an equally aesthetic way.
-
Strategy plane: From the onset, I knew that my primary aim was to educate users about plastic waste in the oceans, in a way that was fun, engaging and memorable. However, as I had just begun to develop my JavaScript skills, my aim for this particular project was to also design a project where I could combine these two. I therefore started the UX process by creating the list of User Stories above, as they helped me crystalise who this project was aimed for and what would be neccessary to successfully satisfy them.
-
Scope plane: Having decided the main aim for the project, I began outlining the key features that I wanted my website to have. To do so, I focused on the JavaScript that I wanted to experiment with and ultimately implement, as I knew this would be crucial to the aim of making the website interactive. This led me to decide that I wanted to focus on three key features: a page with a Google Maps API, a quiz to test users and the chance for them to sign up to a newsletter.
-
Strcuture plane: Once I had narrowed down what features I wanted to include, I began to formulate the structure of my design into five seperate pages: 'Home', 'A Plastic Problem', 'Quiz', 'Results', 'Newsletter'. These seemed logical to me, as the 'Home' page would welcome users to the project with a brief overview of the organisation's aims. They would then continue to 'A Plastic Problem' to learn about the issues of plastic waste in preparation for taking the quiz on the next page: 'Quiz'. Once the user completes the quiz, they can move on to see the correct answers on the 'Results' page. With their newfound knowledge, it seems logical to move on to the 'Newsletter' page where they can sign up to the newsletter to keep in touch. As well as using the menu bar, I also decided that I wanted to include strategically placed buttons to encourage the user to go on to the next step and stay motivated whilst doing so.
-
Skeleton plane: As mentioned in the Structure Plane, I had begun to consider including two main ways for the user to navigate the website: both the menu bar, and additional buttons as prompts. I came to this decision whilst considering the pace that I wanted the user to navigate the website. I wanted it to be easy for them to use the menu to move between each page, but that they would mostly rely on the buttons placed at the end of their current section to take them through each page in order. This would keep the pace going as they swiftly move through the design, learning throughout the process before ultimately signing up to the newsletter. However, as well as deciding on the menu bar and buttons, this stage of my design process also helped me to think of the blinking arrow pointing downwards, urging the user on. The idea was also that if the button were clicked, it would scroll smoothly to down the page to the next section, creating a fun and positive user experience.
-
Surface plane:
- For my design to work, I knew that it would be important to create a theme that would keep the user interested in the topic. Thinking of plastic waste can feel overwhelming, as it is such an intimidating topic with solutions that are not yet fully clear to us. My first design decision was therefore to make the website seem welcoming, rather than daunting, with light colours and images of plastic waste that would not be shocking enough to prevent the user from continuing on (as this would of course prevent them from learning, which is one of the main aims of this project).
- With this in mind, I started a workspace on Figma and began experimenting with my wireframe. As with my first Milestone Project, I found it useful to have my hero image in place to extract complementary colors for the theme from it. I also began designing my logo ideas on Canva as I felt this would be important to the theme of the design. In the end I settled with a blue and yellow theme: the blue (#528FCB) was extracted from the hero image and represents the ocean, whilst the yellow (#F5F862) complements the blue color well and sybolises the hope of solving this problem. As hope is important to keep the user engaged in such a difficult subject, I thought it would be good to balance the blue and yellow together in this way.
- I turned to Google Fonts to select the fonts for my project. I wanted to find two compatible fonts that would help to both make the design look credible (so users would take it seriously as a source of information), but that would not be intimidating as I want the users to feel motivated to read on. As a result, I settled for Montserrat for my titles and Raleway for the content.
- With the wireframes complete, I began experimenting with the quiz in a seperate workspace to create the JavaScript needed to make this aspect of my project work. I created the basic structure and code with HTML and JavaScript and the repository can be found on GitHub here.
Note: Throughout the design process, I kept referring back to my original 'Main Aims' and 'User Stories' to make sure that my project was developing as intended.
Design for desktop devices:
Design for mobile devices:
Design for tablet devices:
The entire workspace can be viewed on Figma with this link.
This project consists of five pages, four of which can be reached through the menu bar and one which is accessed after submitting the quiz answers.
- The menu at the top of the page and footer are consistent and responsive throughout the website.
- Each page uses interactive arrows to visually encourage the user to scroll down. These can also be clicked on to take them further down the page. The arrows are either the theme blue or yellow to remain consistent on each page.
- Certain images are used more than once at various points in the website for consistency and familiarity.
- Each page begins with an image with a fixed background and is then divided into clear sections in a similar pattern.
- The user meets a simple title that explains the purpose of the website and encourages them to read on.
- The user is then presented with a fact about ocean waste and the mission of Our Oceans, Our Plastic.
- The end of the page provides three links for the user: to learn more, take the quiz or sign up to the newsletter.
- The title section introduces the user to more facts about plastic waste.
- They are then presented with facts about gyres (areas of plastic and waste in our oceans).
- An interactive map (Google Maps API) follows with the location of the five largest gyres in our oceans. These markers can be clicked on to reveal their name and a link to their corresponding Wikipedia page.
- The section ends with two buttons for the user to choose between: a link to take the quiz or a link to the organisation The Ocean CleanUp to learn more about plastic waste.
Note: The structure of the quiz differs slightly from the idea I had when creating my wireframes. Instead of only having three main sections for the six questions in total, I realised that it would be a better user experience if each question had its own clear section. With this new idea, I have clearly divided the sections between each question with alternating backgound colors: either the theme yellow, or a white background.
- The quiz features a title to welcome the users to the quiz.
- The quiz is then divided into six sections (five questions and one bonus question) with a question and the choice of answers to choose between.
- The answers change color depending on whether the correct one is selected, and all other answers for that question fade out. Each correct answer adds a point to the user's score and the bonus question adds an additional point if correct.
- At the end the user can click on the 'submit' button to view their results in a section that emerges from being hidden. The user's score is presented here along with a button to refresh the score. The message above the button varies depending on the user's score.
- The final section features a link to a page with the correct answers - a page that can only be accessed once the 'submit' button has been pressed.
- This page is hidden from the user until they have submitted their results, but features the same menu bar and footer as the other pages for ease of navigation and consistency.
- The first section contains a title and then a box with a list of the correct answers.
- The page ends with a link to return to the quiz or to sign up to the newsletter.
- The first section of this page features a title and information about the newsletter.
- It also features a form that the user's can complete to register, created with EmailJS.
- Submitting the form correctly leads to a modal popup with a thank you message personalised with the user's name.
- It ends with a section thanking the user for their time. This section provides three quick steps they can take to make a difference to the plastic waste in our oceans.
-
A future feature could be to create a way for the user to download a copy of their results by making a form that fills in with their quiz results and name - much like a certificate or personalised score card. Initially I had planned to add this feature, but quickly realised that this would go beyond the scope and time frame given for this project.
-
As this website aims to educate users about plastic waste, I think it could be interesting to add another game to this website. Before deciding on a quiz, I had also considered making a memory game with flip cards, as this would be an interactive way for the user to learn about plastic waste whilst having fun. This could be added in a seperate page after the quiz if the project were revisited.
-
Another additional feature that could be added would be to make the quiz multiplayer, by allowing one user after the other to answer the quiz with both results saved. Once both players have finished, the results could be compared side by side.
- HTML5
- The language used to create the form and add content to the website.
- CSS3
- The language used to style the HTML5 elements according to the design colour scheme.
- JavaScript
- The languge used to create the quiz, implement the Google Maps API feature, send emails with EmailJS and animate the clickable arrows throughout the project.
- jQuery
- I used the jQuery library to help write the code for my quiz and animated arrows.
- Bootstrap framework
- I decided to use Bootstrap's grid container system as I wanted to design my project with a 'mobile first' approach.
- Gitpod
- I relied on Gitpod's dev environment to write the code for my project.
- Git Version Control
- I used Git for Version Control to track and record changes to my code and refer back when needed.
- GitHub
- I hosted my deployed website to GitHub, with previous versions of my code stored through the commit history.
- Google Maps API
- I used the Google Maps API to create the interactive map feature on the page 'A Plastic Problem' as this would allow user's to view the locations of plastic waste in the oceans and access more information about each one by clicking on its marker.
- EmailJS
- EmailJS allowed me to include a feature that submits a user's details once they have completed the contact form on the 'Newsletter' page, thereby signing them up to a fictitious newsletter service.
- Figma
- Figma helped me design my project, by creating wireframes for desktop, tablet and mobile devices.
- Canva
- I used Canva to create the logo for Our Oceans, Our Plastic and imported the logo into my project when complete.
- FontAwesome
- I relied on a free FontAwesome arrow icon to create the animated blue and yellow icons for my project. I also used three social media icons for Twitter, LinkedIn and Facebook.
- Pexels
- This was the source of several of the images used in my project, fully referenced in the 'Media' section below.
- TinyPNG
- I used TinyPNG to compress my image files to try to reduce the loading time for each page.
- Google Fonts
- I used two complementary fonts from Google for my project: Montserrat and Raleway.
- Gauger Fonticon Generator
- This free interactive Fonticon Generator allowed me to create a fonticon with a Font Awesome icon and style it with the colours from my colour scheme.
- W3C Markup Validation Service
- This was a great tool throughout the project to check whether there were any errors in my HTML and CSS code (as discussed in more detail below).
- JSHint
- This tool helped me test my JavaScript and jQuery code (explained in more detail in the Testing section below).
Please view the complete testing process in this separate document here.
I created my project on GitHub and used GitPod's development environment to write my code. Use the following link to view my live project: Our Oceans, Our Plastic
To make my project viewable to others, I deployed my project to GitHub Pages with the following process:
- I opened the 'Settings' section of my project repository in GitHub.
- From there, I scrolled to the 'GitHub Pages' section.
- Here I selected 'master branch' as my Source.
- This deployed my project on GitHub Pages and allowed me to share the live website with others.
More information about this process can be found on the following link: Configuring a publishing source for your GitHub Pages site
For this project, I also used a Google Maps API. I integrated this to my website in the following way:
- I navigated to Gooogle's Getting started with Google Maps Platform, where I set up an account my account.
- From there I decided to use the 'Maps JavaScript API' and an API key with these steps on here.
- Once I had set up my Google Maps feature in my project as described here, I restricted the key's access to only my project's URL to limit its use for no other purposes.
The above process can be copied if you would like to deploy a project with the Google Maps API feature.
I used EmailJS to automatically send me an email each time a user submits the Newsletter form. This feature can be implemented as follows:
- I created an account with EmailJS and navigated to this page
- I followed the steps from the tutorial, creating a template and adding the EmailJS javascript library to my project.
- I chose to stay with a free account, which limits my monthly quota to 200 emails per month.
The above process can be copied if you would like to deploy a project with the EmailJS service.
If you would like to work on my project further you can clone it to your local machine using the following steps:
- Scroll to the top of my repository and click on the "clone or download button"
- Decide whether you want to clone the project using HTTPS or an SSH key and do the following:
- HTTPS: click on the checklist icon to the right of the URL
- SSH key: first click on 'Use SSH' then click on the same icon as above
- Open the 'Terminal'
- Change the current working directory to the location where you want the cloned directory
- Type 'git clone', and then paste the URL you copied earlier.
- Press 'Enter' to create your local clone.
You can find both the source of this information and learn more about the process on the following link: Cloning a Repository
The content of this website is entirely fictional and written by myself.
The images are from Pexels, The National Geographic and The Ocean Cleanup and are referenced below.
- Image of a plastic bottle on the beach
- Image of several bottle caps
- Image of yellow recycling bag
- Image of a plastic cup on the beach
- Image of clear plastic bottles
- Image of the seashore
Thank you to the following people who helped with support, inspiration and guidance at different stages in the project:
- The guidance and support of my mentor Seun Owonikoko
- The supportive Code Institute community, including my fellow students and the tutor support team
- My family and friends for their patience and honest critique throughout
Note: Please be aware that this website was made for educational purposes only and that I wrote the content when creating this project. The facts came from several sources online to add content, and although they were correct at the time of writing, they should not be followed without own research.