{"id":231,"date":"2025-02-09T04:10:17","date_gmt":"2025-02-09T04:10:17","guid":{"rendered":"https:\/\/alemu.ca\/?page_id=231"},"modified":"2025-03-25T00:15:59","modified_gmt":"2025-03-25T00:15:59","slug":"trash-scavengers","status":"publish","type":"page","link":"https:\/\/alemu.ca\/?page_id=231","title":{"rendered":"Trash Scavengers"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-1cd70c73 wp-block-group-is-layout-constrained\">\n<html>\n    <head>\n        <style>\n            body {background-color: #FFFFFF;}\n            .main-content {padding: 10em; display: flex; justify-content: center; flex-direction: column; align-items: center; row-gap: 2em;}\n            h1   {color: #1A0B12; font-family: \"Clash Display Variable\"; font-weight: 800;}\n            p    {color: #1A0B12; font-family: Ubuntu;}\n            .description-blocks {display: flex; flex-direction: row; column-gap: 3em; justify-content: space-evenly; flex: 1 0;}\n            .project-description {display: flex; flex-direction: column; flex: 1 0; box-shadow: 0 4px 4px 0 rgb(0 0 0 \/ 0.3); border-radius: 10px; padding: 1em 1em 1em 2em}\n            .text-block {\n                display: flex;\n                flex-direction: column;\n                flex: 1 0;\n                box-shadow: 0 4px 4px 0 rgb(0 0 0 \/ 0.3);\n                border-radius: 10px;\n                padding: 1em 1em 1em 2em;\n                align-items: center;\n                text-align: center;\n            }\n            .subheading {color: #1A0B12; font-family: \"Clash Display Variable\"; font-weight: 500;}\n            .timeline {display: flex; flex-direction: column; text-align: right; flex: 1 0; box-shadow: 0 4px 4px 0 rgb(0 0 0 \/ 0.3); border-radius: 10px; padding: 1em 2em 1em 1em}\n            .img-label {display: flex; box-shadow: 0 4px 4px 0 rgb(0 0 0 \/ 0.3); border-radius: 10px; padding: 0.5em 3em 0.5em 3em; flex: 1}\n            .mockup-photos {display: flex; flex-direction: row; justify-content: center; column-gap: 1em;}\n            .poster {max-width: 650px;}\n            .full-width {\n                max-width: 1200px;\n            }\n            .column-text {\n                display: flex;\n                flex-direction: row;\n                column-gap: 3em;\n            }\n            .slideshow-container {\n                max-width: 1000px;\n                position: relative;\n                margin: auto;\n            }\n            .prev, .next {\n                cursor: pointer;\n                position: absolute;\n                top: 50%;\n                width: auto;\n                padding: 16px;\n                margin-top: -22px;\n                color: white;\n                font-weight: bold;\n                font-size: 18px;\n                transition: 0.6s ease;\n                border-radius: 0 3px 3px 0;\n                user-select: none;\n            }\n            .next {\n                right: 0;\n                border-radius: 3px 0 0 3px;\n            }\n            .prev:hover, .next:hover {\n                background-color: rgba(0,0,0,0.8);\n            }\n            .text {\n                color: #f2f2f2;\n                font-size: 15px;\n                padding: 8px 12px;\n                position: absolute;\n                bottom: 8px;\n                width: 100%;\n                text-align: center;\n            }\n            .numbertext {\n                color: #f2f2f2;\n                font-size: 12px;\n                padding: 8px 12px;\n                position: absolute;\n                top: 0;\n            }\n            .dot {\n                cursor: pointer;\n                height: 15px;\n                width: 15px;\n                margin: 0 2px;\n                background-color: #bbb;\n                border-radius: 50%;\n                display: inline-block;\n                transition: background-color 0.6s ease;\n            }\n            .active, .dot:hover {\n                background-color: #717171;\n            }\n            .fade {\n                animation-name: fade;\n                animation-duration: 1.5s;\n            }\n\n            @keyframes fade {\n                from {opacity: .4} \n                to {opacity: 1}\n            }\n            div.scroll-container {\n                background-color: #333;\n                overflow: auto;\n                white-space: nowrap;\n                padding: 10px;\n            }\n\n            div.scroll-container img {\n                padding: 10px;\n            }\n            .hifi-paragraphs {\n                max-width: 80%;\n            }\n            .game-block {\n                display: flex;\n                flex-direction: row;\n                gap: 2em;\n                max-width: 80%;\n            }\n            .game-img {\n                max-width: 35%;\n            }\n            .game-paragraphs {\n                display: flex;\n                flex-direction: column;\n            }\n            .challenge-blocks {\n                display: flex;\n                flex-direction: row;\n                max-height: 600px;\n                gap: 5em;\n            }\n            .challenge-blocks-1 {\n                display: flex;\n                flex-direction: column;\n                max-width: 400px;\n                gap: 1em;\n                align-items: center;\n            }\n            .challenge-blocks-2 {\n                display: flex;\n                flex-direction: column;\n                align-content: center;\n            }\n            .raccoon {\n                max-width: 300px;\n                max-height: 400px;\n            }\n            .couch-mockup {\n                max-width: 400px;\n            }\n            .contentinventory-desc {\n                text-align: center;\n            }\n            .demo {\n                font-family: \"Clash Display Variable\";\n            }\n            .demo-link {\n                color: #000000;\n            }\n            .demo-link:hover {\n                animation: linkFade 0.5s;\n            }\n            @keyframes linkFade {\n                from {color: #000000;}\n                to {color: #D81129;}\n            }\n            @media only screen and (max-width: 300px) {\n                .prev, .next,.text {font-size: 11px}\n            }\n            @media screen and (max-width: 400px) {\n                .main-content {padding: 1em; display: flex; justify-content: center; flex-direction: column; align-items: center}\n                .description-blocks {display: flex; flex-direction: column; row-gap: 3px; justify-content: space-evenly;}\n                .timeline {display: flex; flex-direction: column; text-align: left;}\n                .mockup-photos {display: flex; flex-direction: column; justify-content: center; row-gap: 1em;}\n                .full-width {max-width: 350px;}\n                .column-text {display: flex; flex-direction: column;}\n                div.scroll-container {display: flex; flex-direction: column; background-color: none;}\n                .game-block {display: flex; flex-direction: column;}\n                .game-img {width: 350px;}\n                .challenge-blocks {display: flex; flex-direction: column;}\n            }\n        <\/style>\n    <\/head>\n    <body>\n        <div class=\"main-content\">\n            <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/ts-mockup.png\" class=\"full-width\"\/>\n            <div class=\"description-blocks\">\n                <div class=\"project-description\">\n                    <h2 class=\"subheading\">Project Description<\/h2>\n                    <p>Trash Scavengers is a mobile web app dedicated to educating residents of the Lower Mainland area about their recycling system, with focus on correctly sorting different recycling items, finding local depots, and alerting users of their local recycling and trash pickup schedule.<\/p>\n                <\/div>\n                <div class=\"timeline\">\n                    <h2 class=\"subheading\">Timeline<\/h2>\n                    <p>15 Weeks<\/p>\n                    <h2 class=\"subheading\">Programs Used<\/h2>\n                    <p>Figma, Adobe Illustrator, Vercel<\/p>\n                    <h2 class=\"subheading\">Role<\/h2>\n                    <p>Lead UI\/UX Designer, Lead Developer<\/p>\n                <\/div>\n            <\/div>\n            <h2 class=\"demo\">Try our demo <a href=\"https:\/\/trash-scavengers.vercel.app\/\" class=\"demo-link\">here!<\/a><\/h2>\n            <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/ts-mockup3.png\" class=\"full-width\"\/>\n            <div class=\"text-block\">\n                <h2 class=\"subheading\">The Problem and Our Solution<\/h2>\n                <p>When it comes to recycling, the Lower Mainland has an in-depth system that it takes quite seriously- however, the more complicated it is, the harder it is for residents to understand how to use this system properly. It may be difficult for longtime residents to understand which items go into which bins, and for people new to the area, it can be much worse. The solution is Trash Scavengers- an app dedicated to absolving any confusion and answering any questions anyone residing in the Lower Mainland might have about its recycling system, as well as educating the public through entertainment with a game. Trash Scavengers aims to make recycling feel like less of a chore, or something that requires lots of reading to figure out, and something anyone can get into with the help of this app and their city.<\/p>\n            <\/div>\n            <div class=\"img-label\">\n                <p>User Research and Findings<\/p>\n            <\/div>\n            <div class=\"column-text\">\n                <div class=\"column-text-1\">\n                    <p>Four participants were interviewed for our usability tests, all coming from a multitude of age ranges, genders, and computer experience. Diversity in the participants was essential so that Trash Scavengers could be used by anyone that lives in the Lower Mainland, as it is important for as many people as possible to be educated on the recycling system. During the test, users were read the introduction script, then given a list of tasks to complete inside the app. The team member overseeing the test would observe and write down any observations or issues had during the test, while allowing the tester to complete the tasks on their own. Afterwards, testers were asked questions about their experience using the app, the tasks they completed, and their overall thoughts and feelings on the app. The answers to these questions were recorded and then sorted into problems and feedback.<\/p>\n                <\/div>\n                <div class=\"column-text-2\">\n                    <p>Our team objective for these tests is to make sure that our web app is as accessible and clear as possible to all users. We want to make sure that nothing in our app is confusing to use or hard to navigate, so we will test for efficient navigation, clear in-app objectives, and user interface. After our testing concluded, three main problems were clear: users were having trouble with finding the store button, found issue with the design of the navigation bar, and noted that there was no way to access the game feature without going through a quiz first. Once this feedback had been recorded, all of these issues were quickly redone according to the findings from the report.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"scroll-container\">\n                <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/TrashScavengers-A6-UsabilityReport.png\" width:=\"80%\" height=\"90%\"\/>\n                <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/TrashScavengers-A6-UsabilityReport1.png\" width=\"90%\" height=\"90%\"\/>\n            <\/div>\n            <div class=\"img-label\">\n                <p>Site Map<\/p>\n            <\/div>\n            <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Trash-Scavengers-Site-Map.png\" class=\"full-width\"\/>\n            <div class=\"img-label\">\n                <p>User Persona<\/p>\n            <\/div>\n            <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/03\/Design-2-Project3-e1740873927528.png\" class=\"full-width\"\/>\n            <div class=\"img-label\">\n                <p>Content Inventory<\/p>\n            <\/div>\n            <p class=\"contentinventory-desc\">To develop the content, design, and components of Trash Scavengers, a content inventory was created. Content inventories help keep track of exactly what needs to be created for the app, how the app will look, and what is going to be in the app itself.<\/p>\n            <div class=\"slideshow-container\">\n                <div class=\"mySlides fade\">\n                    <div class=\"numbertext\">\n                        1\/6\n                    <\/div>\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Copy-of-TrashScavengers-A3Inventory.png\" style=\"width:100%\"\/>\n                <\/div>\n                <div class=\"mySlides fade\">\n                    <div class=\"numbertext\">\n                        2\/6\n                    <\/div>\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Copy-of-TrashScavengers-A3Inventory1.png\" style=\"width:100%\"\/>\n                <\/div>\n                <div class=\"mySlides fade\">\n                    <div class=\"numbertext\">\n                        3\/6\n                    <\/div>\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Copy-of-TrashScavengers-A3Inventory2.png\" style=\"width:100%\"\/>\n                <\/div>\n                <div class=\"mySlides fade\">\n                    <div class=\"numbertext\">\n                        4\/6\n                    <\/div>\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Copy-of-TrashScavengers-A3Inventory3.png\" style=\"width:100%\"\/>\n                <\/div>\n                <div class=\"mySlides fade\">\n                    <div class=\"numbertext\">\n                        5\/6\n                    <\/div>\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Copy-of-TrashScavengers-A3Inventory4.png\" style=\"width:100%\"\/>\n                <\/div>\n                <div class=\"mySlides fade\">\n                    <div class=\"numbertext\">\n                        6\/6\n                    <\/div>\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Copy-of-TrashScavengers-A3Inventory5.png\" style=\"width:100%\"\/>\n                <\/div>\n                <a class=\"prev\" onclick=\"plusSlides(-1)\">\u276e<\/a>\n                <a class=\"next\" onclick=\"plusSlides(1)\">\u276f<\/a>\n            <\/div>\n            <br\/>\n            <div style=\"text-align:center\">\n                <span class=\"dot\" onclick=\"currentSlide(1)\"><\/span> \n                <span class=\"dot\" onclick=\"currentSlide(2)\"><\/span> \n                <span class=\"dot\" onclick=\"currentSlide(3)\"><\/span>\n                <span class=\"dot\" onclick=\"currentSlide(4)\"><\/span>\n                <span class=\"dot\" onclick=\"currentSlide(5)\"><\/span>\n                <span class=\"dot\" onclick=\"currentSlide(6)\"><\/span> \n            <\/div>\n            <div class=\"img-label\">\n                <p>Hi-Fi Prototype<\/p>\n            <\/div>\n            <div class=\"hifi-paragraphs\">\n                <p>Using the information from both the user research and the recently created content inventory, a Hi-Fi prototype was quickly developed. As Trash Scavenger&#8217;s main intention is to educate its users on the sometimes-confusing recycling system of the Lower Mainland, its design was made to be clean and simple so that users won&#8217;t feel overwhelmed. The main colour palette of the app is based off of the many types of recycling bins seen in the Lower Mainland- the blue bin, green compost bin, yellow paper bag, and the black trash bag.<\/p>\n            <\/div>\n            <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/Group-32.png\" class=\"full-width\"\/>\n            <div class=\"game-block\">\n                <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/phone-on-wireless-charger-mockup.png\" class=\"game-img\"\/>\n                <div class=\"game-paragraphs\">\n                    <p>As a way to make the education of Trash Scavengers more accessible to individuals of all ages, a game was developed to provide a fun way to learn about the Lower Mainland&#8217;s recycling system, and what goes in what bin. It presents itself as a simple quiz game featuring the mascot of Trash Scavengers: Scrappy Sammy.<\/p>\n                    <p>As players progress through the quiz, Sammy&#8217;s health will increase or decrease depending on whether the correct answer to the question was selected. Once the player has finished the quiz, they will be rewarded with coins that they are able to use for Sammy, in order to buy him things like food or toys to keep him happy.<\/p>\n                    <p>The game was developed with HTML, CSS, React.js, and Javascript. <\/p>\n                <\/div>\n            <\/div>\n            <div class=\"challenge-blocks\">\n                <div class=\"challenge-blocks-1\">\n                    <div class=\"img-label\">\n                        <p>Challenges<\/p>\n                    <\/div>\n                    <p>Not every feature that was designed was able to be implemented in the final product, namely the settings feature of the app. Though it was non-functional in the end, designing a proper settings page for a mobile web app gave the team proper insight into how accessibility and customizability is an essential part of the user experience. The development of the quiz and game features posed a large challenge as well, and the team worked tirelessly to make an experience that is not only educational, but well-designed and appealing to many different demographics.<\/p>\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/fluent-emoji-flat_raccoon.png\" class=\"raccoon\"\/>\n                <\/div>\n                <div class=\"challenge-blocks-2\">\n                    <img decoding=\"async\" src=\"https:\/\/alemu.ca\/wp-content\/uploads\/2025\/02\/mockup2.png\" class=\"couch-mockup\"\/>\n                <\/div>\n            <\/div>\n        <\/div>\n        <script>\n            let slideIndex = 1;\n            showSlides(slideIndex);\n            \n            function plusSlides(n) {\n              showSlides(slideIndex += n);\n            }\n            \n            function currentSlide(n) {\n              showSlides(slideIndex = n);\n            }\n            \n            function showSlides(n) {\n              let i;\n              let slides = document.getElementsByClassName(\"mySlides\");\n              let dots = document.getElementsByClassName(\"dot\");\n              if (n > slides.length) {slideIndex = 1}    \n              if (n < 1) {slideIndex = slides.length}\n              for (i = 0; i < slides.length; i++) {\n                slides[i].style.display = \"none\";  \n              }\n              for (i = 0; i < dots.length; i++) {\n                dots[i].className = dots[i].className.replace(\" active\", \"\");\n              }\n              slides[slideIndex-1].style.display = \"block\";  \n              dots[slideIndex-1].className += \" active\";\n            }\n            <\/script>\n    <\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Project Description Trash Scavengers is a mobile web app dedicated to educating residents of the Lower Mainland area about their recycling system, with focus on correctly sorting different recycling items, finding local depots, and alerting users of their local recycling and trash pickup schedule. Timeline 15 Weeks Programs Used Figma, Adobe Illustrator, Vercel Role Lead [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-231","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alemu.ca\/index.php?rest_route=\/wp\/v2\/pages\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alemu.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alemu.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alemu.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alemu.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=231"}],"version-history":[{"count":5,"href":"https:\/\/alemu.ca\/index.php?rest_route=\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/alemu.ca\/index.php?rest_route=\/wp\/v2\/pages\/231\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/alemu.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}