Design that captivates users, specifications that guide developers

Problem

A Hub for Nature Enthusiasts

Going on a trip? Excited to explore, but worried about disrupting native environments? Know Before You Go offers the perfect solution. This website offers real-time data about endangered species reported anywhere in the United States. With one search, users explore entire lists of a variety of endangered species, educating themselves and ensuring that they’re traveling with awareness and respect of their surroundings.

The inspiration for this project comes from Goal 15 of the 17 Sustainable Development Goals (SDG) created by the United Nations. Goal 15 focuses on sustainability and ecosystem restoration and protection. With this in mind, my group decided to come up with a website that travelers, outdoor enthusiasts, and even children can use to educate themselves about endangered species in the United States.

Process

Diving in

In my team of five, we had a project manager, three developers, and the designer — me. As the team designer, I faced the heaviest workload in the early stages of our project, planning and designing a mockup of our website, and creating a detailed spec for the developers to build from. I first created an interactive prototype using Figma Make which was extensively used in the development process. I wanted a heavily interactive website design, with a map that users can navigate and species icons they can click on to learn about each plant and animal. Along with that, I wanted to offer users opportunities to educate themselves. For this I added additional menu options for users to read FAQs and learn about the different levels of endangerment.

Next I created a detailed specification file for developers to better understand my vision. It included visuals demonstrated in the prototype, and a problem statement that summarizes the issue that inspired our solution. The spec was easily the most tedious and time consuming part of the project, as I described every page, action, and button in extensive detail. Most sections were also supported with images from the prototype to help illustrate the design for the developers. It’s important to note that not all details in the spec are accurate to the finalized website version, and the problem statement only talks about environmental concerns in Hawaii, however my team later decided to expand our location to the entire United States.

During the design process, I worked with my team to ensure proper user accessibility. In the prototype, users could navigate using their mousepad, clicking and dragging, and by clicking arrow keys on the map. In the early stages of development, we briefly removed the arrow keys from the website because we believed that they ruined the aesthetic. However, I later argued that clickable arrow keys are essential to an accessible map design, and we added them back to the website.

Later in development I also branched out to other roles, working with our project manager to create functionality tests that were used by the developers, and added HTML and CSS to the website as needed.

Outcome

My thoughts

I’m extremely happy with how the project turned out. After launching our website my group received a huge amount of positive feedback. Users complimented the real-time data accessibility as well as the clean design, which I am extremely proud of. This project is especially exciting as the developers chose datasets that are updated based on human sightings of endangered species, meaning that our website’s species results will be automatically updated based on the reported data as time goes on. This allows data to remain accurate and for the website to stay functional with minimal maintenance.