biomebox

An immersive web application to explore Earth's biomes.

Comment

Note: I have completed this challenge during the time of FuturistFest. With the extra time I had at FuturistFest, I added more sustainable goals to the Right sidebar so the user can get a greater diversity of random challenges to help the environment. I have also added adjustments to equalize the audio, for a smoother balance of sounds.

My Inspiration for biomebox 🏞

I've always loved the outdoors and have been fascinated with the beauty of nature. As a result, I based my project on Earth's biomes: a unique region of land characterized by its plants, animals, and climate. I wanted to showcase a scenery that felt immersive and calming, but also give a platform to educate others on what actions they can take to make our biomes prosperous. Due to climate change and human activity, many of the species in biomes have become extinct or endangered. Because of this, I wanted to include a way for users to be able to know how they can change to make a positive impact on nature.

What biomebox does 🌟

Left Sidebar: What biomes are there, and what animals inhabit that biome?

  • Contains 3 biomes users can discover: The Amazon Rainforest, African Serengeti Grassland, and the Florida Everglades.
  • Each biome has a description of itself and its impact and effects on climate change.
  • Each biome has 6 animal buttons to represent its inhabitants. When these buttons are clicked, they play its animal sound and show a description of the animal's role in the ecosystem, its conservation status, and a fun fact. We can click the button again to stop that animal’s sound and hide its description.
  • Click the “-/+” button to hide and show the sidebars

Right sidebar: Now that I know what biomes are, what can I do to keep them prosperous?

  • Gives an opportunity for the user to take action to improve earth’s current conditions and learn ways to fight climate change to keep our biomes alive.
  • When they click to generate a sustainable goal, the box switches to show one action they can take, and a justification for how this will help the environment.
  • Press the reload icon to get a new goal!

How I built it 🔨

I built this project using HTML, CSS, and JS. Initially, I began on FigJam to create user empathy maps and emotional journeys to better understand the user's goals, perspectives, and actions. This helped me have generate more direct goals to my project. Next, I started wireframing this project on Figma to get my thoughts running and have a clear picture of what I wanted to include. My priorities were to have a clean user interface, big visuals that told what biomes were, and auditory elements that helped add dimension to the environment. With this in mind, I set forth to create a concise design that described three unique biomes. I used Sublime Text and my browser to write my designs into code, using HTML/CSS/JS. I used audio and video tags to play each animal’s audio clip and show the videos of each biome in action. I used Javascript to write functions to press the different biomes and animals, minimizing and maximizing the sidebars, and generating a random sustainable goal.

My FigJam maps

My Figma wireframes

Challenges I ran into ⛳️

My biggest challenge was learning Javascript, as it was a language I had little experience in. The logic of being able to select multiple animal sounds and putting them together was tough to think about in a user-friendly way. At first, I tried to display each selected animal’s description, but the information got too long and scrolled far off the page. I also tried putting the animal’s description to the center of the page as a popup, but it looked too messy and blocked the view of the video. Through drafts of wireframes and going back to the drawing board, I created an array that stored all of the selected animals similar to a stack, where it was sorted based on arrival time. Then, I would only display the most recent animal’s description on the screen, and show the next most recent animal’s description if the user unclicked the most recent one. This gave a much simpler look to the website, which makes it much more navigable and user-friendly, and less overwhelming.

Accomplishments that I'm proud of 💡

I'm proud of how my UI design evolved in this project to be more elegant than I had originally envisioned. Additionally, I am proud of learning Javascript functions, as it is not a language I am very familiar with. Working on this project allowed me to learn more about Javascript and expand upon my code. Due to this, I've realized how valuable Javascript is when coding websites, as it allows for interactivity. My endeavors with code will be aided by the knowledge I gained here!

What's next for biomebox 🚀

I'd like to finish my implementation of the mute/unmute button, which I didn't have the chance to fully complete in this version. I would also like to include all 8 biome types in my website, to provide a comprehensive view of the earth’s biomes.

Built With

Share this project:

Updates