weather.gov redesign

I created a working prototype of a new weather.gov in Figma for both desktop and mobile sizes. The current UI of weather.gov is difficult to follow and is not compatible with mobile browsers.

Comment

Inspiration

I was inspired by the prize category "Best Hack for Recruiting Public Servants" by Accenture Federal Services. I looked up a couple federal agency websites online, and saw a lot of room for modernization in the National Weather Service website at weather.gov.

What it does

My interactive prototypes simulate a new look and feel for the website on both mobile and desktop computers. The current version of the website is not mobile friendly and is extremely disorganized. Furthermore, information about careers is hidden at the bottom footer of the page and I elevated it to the navbar and built out that section.

How we built it

I built the basics by redesigning the logo to make it more modern and fit better with the theme of the updated NOAA and Commerce.gov logos. I also reorganized the webpages into a new navbar that replaced the confusing two-nav layout of the original website. I completed the basic structure by linking the pages where they would logically go. I duplicated this basic layout on mobile.

Then, with the time I had remaining, I decided to fill in the careers page, staff spotlight, and office locations because of the Accenture prompt. The remaining pages just have wireframe ideas of where the UI cards or text boxes would go.

Challenges we ran into

Time was my biggest challenge because I was working solo and trying to implement a prototype with so many pages. I decided to prioritize the desktop over mobile after showing the basic layout on mobile, but I had wanted to do them side by side.

I also received some user test case feedback that I didn't have time to address - such as creating a distinct visual difference between clickable and nonclickable boxes.

Accomplishments that we're proud of

I'm really happy with the look of the prototype and how everything links back to where it should be. I'm especially happy with the mobile navbar and staff spotlight popups I designed.

What we learned

This was my first big project in Figma, so there was a lot of troubleshooting involved when things didn't work the way I thought they would.

What's next for weather.gov redesign

I'll continue building out the main pages to include photos and more specific text and put some additional work into the mobile version!

Built With

Share this project:

Updates