HTML5, CSS3, JavaScript, Figma, Adobe Illustrator, Adobe After Effects
See project's images Visit live websiteA new way to learn! Experience a fun and interactive way to explore all about microplastic pollution! You can watch videos, play mini games, or explore an interactive presentation about the health effects of microplastic consumption.
Technical Research
Product Research
Illustration
Animation
Copywriting
Information Architecture
UI/UX Design
User Flow
Design Systems
Paper Prototype
Design QA
Usability Testing
Website Development
17 weeks
-
Only for screen sizes 1440x820px and 892x400px
May 2023
Microplastic pollution has become an increasingly serious topic in Indonesia, especially since littering is still a common behaviour amongst Indonesians. These microplastics are ingested by fish, which potentially impacts our health when we eat these contaminated fish. However, this topic has not been given enough attention by the Indonesian media.
This website aims to educate and raise awareness among the public, especially Indonesians, about microplastic pollution that is caused by their daily habits. Since this topic is more scientific, the interactivity and gamification are aimed to increase the public&s interest and information retention.
Finding a storyline to deliver the information involved a lot of trial and error. Initially, I planned to set the scene in different Indonesian rivers that users can choose from a map. However, the conditions between each of the rivers were too similar.
After gathering feedback, I redesigned the flow to be more general, focusing on three chapters: the source of microplastic, their consumption by fish, and the health effects when consumed by humans. This flow allows users to understand the key issues of microplastic pollution occurring in Indonesia and even globally.
The flow includes a landing page and an experience page, where users can choose one of three topics to explore. Designing an intuitive icon for the experience page, distinct from the landing page button, was challenging.
As a result, the landing page uses a “home” icon, while the experience page's icon mimics the three rounded rectangle layout from the page.
Creating a countdown timer for “The Source” chapter that synced with the play, pause, and restart buttons was challenging. Initial trials had issues like delays and negative values.
I created the countdown using a paragraph with the content “20”. A JavaScript function lowers this number using the “--” command. Additionally, “clearInterval” pauses the timer, and “setInterval” resumes it.
1. Brainstorming gamification methods
To give users a sense of “Control”, there are three chapters that users can choose to customize their learning journey. In “The Effects” chapter, users can choose a presentation theme. To add “Rules/Conflict“, there is a 20 seconds timer as the primary rule of “The Source” chapter. And lastly, to set the ?immersion, the gameplays are supported with background sounds ambience and designed in a related environment.
2. Designing paper prototype and user flow
I did my first paper prototype demonstration using focus group method with my classmates. Then, I gathered feedback on the design, such as adding a “Sign Petition” button, adding sound effects, and making the intro texts skippable. Below is the final user flow, and you can watch the paper prototype demonstration on this link https://youtu.be/o28x_giE0Uw.
3. UI and illustration
I illustrated all the assets and motion graphics videos. After they are ready, I made the UI visuals on Figma while implementing all the feedback from the focus group.
4. Usability testing: Surveys and questionnaires
This test is divided into Pre-Testing Questions to collect general information about respondents and Post-Testing questions to get users' feedback. From the post-testing survey, this project succesfully achieved a 94% user rating of 4 stars or above, with 58% of 5 stars and 35% of 4 stars. Some insights I gathered were that the initial design of the sound button is not intuitive, the placement of the sound and pause button in “The Source” chapter is too out of reach, and all “Skip” button in introduction pop-ups looks disabled because of the colour.
5. Adjusting the design
After the feedback were gathered, I adjusted the designs accordingly. Below are the adjustments made.
I used HTML, CSS, and JavaScript to build this project. To make the fish movements on “The Source” game, I changed the value of “left” and “right” in keyframes animation.
To show the collected fish result, I utilized the browser's local storage. When players click on a fish, it will be stored inside the storage with a unique key and value.
To build “The Effects” chapter's theme button, I made three different containers that have all visual elements, each styled according to the theme. When a theme button is clicked, the appointed container will be displayed and the others will be hidden.