Alyssa Spickermann


ECOMAKER



creative engagement with ecosystems and their species



problem statement



HOW MIGHT WE EDUCATE CHILDREN ABOUT THE ENVIRONMENT?



SKILLS

User research, Product design, Prototyping


TOOLS

Adobe Illustrator, Figma


TEAM​

2 person team, individually updated in 2022



Biomes, defined by their physical climates, are an important way to understand the success of life on Earth. Educating future generations about biomes and the species that live within them is a step towards reducing humanity’s environmental impact. Engaging with information about the individual animals, in a creative way, can enhance children’s interests.


​EcoMaker is an app that gives children the opportunity to creatively engage with various biomes, ecosystems, and species found around the world. The app aims to encourage exploration and interest towards various species and ecosystems through creativity.



FINAL PROTOTYPE VIDEO



RESEARCH



user research



User interviews were conducted and analyzed through personas, scenarios, and storyboards, providing insight into ways to motivate and engage children. The ideation session, that used the data from interviews of parents and educators, led to three themes about activity elements.



creativity



creativity enhances learning experiences



rewards



rewards should be visual, immediate, and work towards a larger goal



time



content should be accommodating to a wide range of play times



storyboards



Two storyboards depict cases where an adult is searching for, or researching about, the app. This helped demonstrate the potential use cases and what an adult guardian might want to see in an exploratory, creative, and educational app.



key takeaways



The research conducted led to prioritizing two aspects of learning techniques that were missing.

  1. creating educational an experience reliant on intrinsic motivation
  2. user autonomy

These two aspects guided EcoMaker's concept and design.


* a competitive analysis was completed, but was conducted with the original problem statement in mind, focusing on the importance of biodiversity. personas and scenarios were also created. all three can be found in the document below.


research document

DESIGN



concept inspiration



EcoMaker's concept was largely inspired by the need for autonomy and creativity in an activity. Creating an environment seemed like a natural way to engage children with the environment while letting them make something they can call their own. Ecosystems house many different species, and children often engage with animals in varying contexts (books, toys, zoos, etc.), making an activity revolving around animals more relevant.



process



user flow



The following user flow diagram displays the interactions and pages experienced once an ecosystem is selected, when placing an animal in an ecosystem, and learning information about that animal. A full user flow diagram can be found in the "usability test documentation," below.



main activity



EcoMaker provides children the ability to make their own ecosystems while learning basic information about selected species. The main activity of the app involves placing animals onto an ecosystem, and learning information about the species.



key interactions



Over the course of the project, three key interactions experienced design changes based on design analyses, user feedback, and peer evaluations.



usability testing and evaluations



The paper prototypes provided a basic understanding of the potential interactions that users would have with the application, and served as a starting point for the wireframes. The wireframes were evaluated using user feedback that focused on Nielsen's Usability Heuristics, leading to design changes for the high fidelity prototypes. Finally, a usability inspection was conducted to identify potential usability issues.


usability test documentation

low fidelity prototype testing



Nielsen's Usability Heuristics guided the low fidelity prototype testing of the wireframes. The study revealed struggles with the app's UX design, noting that some choices were difficult to understand or achieve.



high fidelity prototype analysis



After creating the high fidelity prototype, some design changes were necessary both in the UX and background Figma prototyping.



usability inspection



Users were instructed to navigate to an ecosystem and place an animal during the usability testing. Key changes were made to the UI elements, as well as the interactions on the "Animals" page.



animal information



When placing an animal correctly (the animal naturally lives in the ecosystem), the user is presented with a card of information about the animal. When incorrectly placed, the user is told where the animal lives. Changes were made to address accessibility and differentiating correct and incorrect placements.



paper prototype



pop-up on the side, correctness indicated by a colored border, paragraph of information about the animal



wireframe



removal of paragraph-style information



high fidelity (correct animal)



removal of color indicator, addition of a smaller version of the digital animal



high fidelity (incorrect animal)



addition of a different information card for animals that belong in other habitats



ecosystem selection



The home screen has buttons for each biome, and the user chooses an ecosystem to create. Changes were inspired by Hick-Hyman Law, which focuses on the number of options included.



paper prototype



square-shaped icons, pop-up menu uses a drop-down menu on the biome icon



wireframe



circle-shaped icons, pop-up menu separated "random" from the drop-down menu



high fidelity



pop-up menu appears in the middle of the screen, pop-up displays all choices, "random" option moved to it's own biome button, biome buttons include "biome" and ecosystem pop-up includes "ecosystem", icons added to the ecosystem names, settings is only language



instructions



The instructions, detailing how to play the game, appear when the user begins, and can be accessed from the hamburger menu. This change caused several UX-related changes. These changes were implemented based on Nielsen's help and documentation principle.



paper prototype



instructions live on the "settings" page, along with music and language options



wireframe



instructions moved to be accessible in-game, added area for visual example



high fidelity



instructions function as a pop-up upon beginning, uses the whole screen to visually show user how to play in relation to the screen they will see upon closing pop-up



additional changes



The following screens present additional changes made that were not part of the three main interactions found in the application.



"animals" page



previously a continuous scrolling page with animals from all biomes together, the page gained tabs so that the animals would be organized by biome



settings



originally only accessible from home screen, added "help" button



language



the option existed on a settings page, and has been moved to the home screen



IMPACT



education



The application is intended to encourage environmentalism, by creatively engaging users with biomes, ecosystems, and the species that live within them. In doing so, the app can lead to increased interest in the subject matter. The users’ subsequent actions may vary, ranging from incorporating sustainable actions in everyday life to inspiring career goals. For the environment, it brings to the user a greater awareness of the organisms and their natural environment.



metrics



An extension of the project could lead to additional data, guiding the educational and exploration aspects of the application.



user satisfaction.



hold user interview sessions to learn about their experience using the app and engaging with the content



topic interest



conduct a long-term diary study, learning from the adult guardians' perspectives and interactions with the child before, during, and after use



usability



conduct usability tests to determine the age-appropriateness of the application's UX design



retention rate



collect data about how many users return to create additional ecosystems



edge cases



Some edge cases should be considered in any further work on the project. These edge cases deal with the interpretation and use of information learned in the application.



misinterpretation



users may believe that the animals included in the application is a comprehensive list, causing other species to be unacknowledged



animal conservation status



some generalizations may be made in the species classification, causing some protected species to be confused with non-endangered species



context



the lack of context leaves out the importance of biodiversity



REFLECTIONS



next steps



Several ideas were considered, most commonly discovered during the usability inspection, but unable to be pursued due to the project's scope. These include animal resizing and using external links to resources about various biomes, ecosystems, and animals.


If I were to extend this project, I would explore the inclusion of relationships between species, their ecosystems, and human impacts. This extension would help emphasize the importance of conservation efforts through a creative and engaging experience.



reflection



This project allowed me to combine my passions of education and the environment to create an interactive experience. Over the course of this semester, I gained a better understanding about prioritizing functions and features. While designing this project, I learned how to create and use interactive components. I wish I created and used a UI kit for the project, as I was often manually designing the various screens and visual elements.



additional changes



After the conclusion of this project, I decided to continue working on the project to further my practice and experience with designing the UI and UX of the application.



animal information cards



created cards for all marine animals



settings



changed the settings icon from the flag back to a gear, settings pop-up created to include language and sounds, changed hamburger menu