Ask any space, science, or astronomy enthusiast about NASA's Asronomy Picture of the Day and they will probably gush about it. Launched in 1995, APOD has served the public with a new beautiful astronomy-related picture every day for the last 21 years. APOD is one of the most popular government websites, drawing over 1.5 million visitors per month.
For being such a beloved government service, the visual design and UI of Astronomy Picture of the Day is outdated to say the least. The interface has not been significantly updated in decades, and visiting the site is like going back to a time when dial-up modems ruled the land and Google hadn't been invented yet.
NASA's current Astronomy Picture of the Day interface
I decided to apply my skills as a UX designer and frontend developer to update the APOD website for the modern web. My goal was to make browsing the image gallery more streamlined, intuitive, and accessible. I call my new and improved version "APOD 2.0". Many improvements have been made, including:
- Dark color scheme better showcases space imagery
- Keyboard arrow key navigation enables rapid browsing
- Scrollable filmstrip gives a preview of dozens of images
- Intelligent image preloading increases speed
- Dropdown selection makes it easy to select a specific date
- Nonessential info is hidden in hover states to keep focus on the imagery
My updated Astronomy Picture of the Day interface, "APOD 2.0"
The heavy lifting in the project is done by React.js, Facebook's amazing UI library. I chose React.js because it let me easily encapsulate interactive components like the filmstrip, thumbnails, and date picker. jQuery was also used for its convenient AJAX capabilities, and GreenSock Animation Platform (GSAP) provides some animation muscle.
Special thanks goes to NASA for making their APOD API public, without which this project would not be possible.
APOD 2.0 is open source under the GNU GPL 3.0 license, and is available on github.com. It is an ongoing project which I am constantly trying to improve upon. Future feature TODO list includes search, tagging, slideshow, and alternate navigation modes.
Click an image to quickly view a high resolution full screen version
Detailed image description is revealed by hovering the title
Specific dates can be navigated to in seconds via dropdown