Green Planet Project

This eLearning tab interaction helps children and adults learn about different types of trash disposal options available and why it is important to use them. By using this interactive tool, users can make informed decisions when completing their weekly chore of disposing household trash, thereby making the right choice for the planet.

Audience: People who want to be educated about making informed choices regarding trash disposal 

Responsibilities: Instructional Design, Visual Design, eLearning Development 

Learning Theory: Behaviorism

ID Model: Design Thinking Model (Empathize, Define, Ideate, Prototype, Test)

Tools: Figma, Articulate Storyline, Adobe Illustrator

In order to work towards a greener planet, it is important to know what items can either be recycled, composted, or put in garbage when taking out the weekly trash. Currently, information is available in the form of static job aids, either online or printed. Glancing at a job aid helps store information in short term or working memory but there is a need to constantly refer back to recall. Job aids also do not address the ‘why’ behind trash sorting. 

I designed this tab interaction to address the above mentioned knowledge and motivation gaps. Using an interactive job aid followed by a high context practice activity, I ensured important information is transferred to long term memory for easy retrieval and use. 

Text Based Storyboarding

I researched online to find information about recycling, composting and garbage disposal and broke it down into simple chunks of the most important points. I decided to keep definitions simple and bullet points organized so key information is conveyed with minimal text and reading effort. 

Visual Mockup and Interactive Prototype

I designed the visual elements of this tab interaction on Figma. I chose to include three separate sections on the panel, one for each type of garbage disposal. For each section, I decided to present the information in the form of questions on individual buttons and answers on a common panel below. For each section, I chose colors that convey symbolism of the earth. Blue represents the ocean, green indictaes vegetation and yellow/brown represents dirt. 

To depict items to be recycled, composted or trashed, I decided to convey information visually using images, which are easier to remember and recall than words. 

Finally, for the 'Try It' button I used lightboxing technique to open a fresh panel where learners are presented with a high context practice activity. Users will simulate dropping items in a bin using a 'drag and drop' activity and are presented with approrpiate feedback depending on the items they chose.

For the graphic elements of the project, I used visually apealing vector graphics which I edited on Adobe Illustrator and exported to Storyline to incorporate in the learning interaction.   

After completing the design, I created a working prototype, also on Figma, enabling all connections and triggers. This helped me visualize workings of the end product to a large extent. 

Development

I developed this project on Articulate Storyline. I created a base layer with the main components and added layers for each answer section panel. Enabling the question buttons involved incorporating a lot of triggers and ensuring all triggers work correctly on the different layers. I also added a hover effect on the buttons using states. 

To depict items to be recycled, composted or put in garbage, I used states for a display box within the answer panel and ensured the correct states with images get displayed when the corresponding buttons are clicked by the learner. 

For the practice activity, I used a combination of light-boxing, hotspots, animation & motion path techniques to enable the drag and drop activity. I used realistic bin images to keep the learning interaction high context.

I kept the feedback for the practice activity user friendly by making the bin blink green or red depending on a correct or wrong choice. I encountered a technical challenge to develop this feature but devised a clever workaround using a dummy, invisible animation to trigger the appropriate bin states. 

I published the project and learnt how to upload the files to a server so the project can be accessed on the portfolio. 

Project Management

I managed this project on Trello by creating lists for each important milestone in the development process and creating cards within each list for sub tasks. Trello allows numerous features such as marking deadlines, setting reminders, collaboration, adding comments/notes as development proceeds, color coding to track progress etc., all of which I utilized to keep things on track. At any point of time, the dashboard gave a useful overview of how far along I was and what were the key pending milestones. 

This project involved important steps in the instructional design process such as defining a problem, envisioning a solution, text storyboarding, visual mockup, prototyping, development and deployment. 

On Figma I got to learn a lot of techniques such as frames, layers, shapes & text, overlays, designing and prototyping.

On Articulate Storyline I learned numerous techniques and got comfortable with the use of states, layers, triggers and much more. 

On Trello I kept the project organized and on track using lists, cards and various easy to learn features.