NOAA GLANSIS Website Redesign

Project Duration: August 2023 - December 2023

Solo Project with Professor and Peer Review

Project Duration: August 2023 - December 2023

Solo Project with Professor and Peer Review

This project aimed to redesign a specific feature on the GLANSIS website in collaboration with the National Oceanic and Atmospheric Association (NOAA), while receiving feedback from students, professors, and NOAA representatives. This individual class project included checkpoints for mobile and web app designs, incorporating feedback for continuous improvement. Problem Statement: Over 30 million people in the Great Lakes Basin are impacted by often unnoticed invasive species, leading to the uninhibited presence of non-indigenous species across various groups. This poses a significant threat to the resources of indigenous species in the region.

What is NOAA GLANSIS?

The GLANSIS website aims to give students, teachers, scientists, and other audiences a place to reference and learn about different nonindigenous species throughout the Great Lakes region. It provides visual map aids, search features, and other resources to serve as a "one-stop shop" for any information users need.

Mobile Designs

Mobile Designs

The first step in the process for this project was the mobile designs. Currently, the NOAA GLANSIS website is not very mobile accessible, so making a mobile app version was very intriguing and new. The flow of the screens I would be redesigning involved the Home page, Species List Generator, Search Results page, and Species Profile page, and I also worked on the FAQ page. Throughout this process, it was very fun to compare how my classmates and I thought differently about this project. The uses of background imaging, image information cards, and lack of color made everyone's designs unique. While I found it difficult to work without color sometimes, it was also very refreshing.

Web App Designs

Web App Designs

The second step in the process was working to translate my mobile designs into a web app version accessible on desktop. While I decided to keep a lot of the orginal design ideas, there were a couple changes to be made between mobile and desktop. Moving the hamburger menu into a navigation bar being the biggest of those. Moving through this transition, I noticed what it was like to manually create media queries between checkpoints for websites. Having had experience with doing so in CSS, it was fun to try to translate everything by hand on Figma.

Final Slide Deck

Final Slide Deck

Summary

Summary

I learned a lot throughout this semester of project work. The importance of feedback, icon matching, and the laws of UX were all stressed at some point which greatly helped me improve my designs and presentation. I look forward to bringing the skills as a solo designer through this project into a team scene!

Tommy Joppich 2025

Tommy Joppich 2025

Tommy Joppich 2025