Jered Danielson
Lead UX Developer

Selected Work

APOD 2.0 Thumbnail

APOD 2.0

View Live

APOD 2.0 is a solo personal design project to update NASA's Astronomy Picture of the Day website for the modern web.

Launched in 1995, apod.nasa.gov serves a new beautiful astronomy picture every day, but the interface has not been updated for the last 21 years.

My goal is to enhance the user experience and image gallery navigation of APOD. To that end I have modernized it with a scrolling filmstrip, keyboard navigation, asynchronous image preloading, and more.

APOD 2.0

Updating NASA's website for the modern web.

View Live
APOD 2.0 Hero
Tech
  • React.js
  • jQuery
  • REST API
Roles
  • Project Manager
  • UX Designer
  • Programmer
Client
  • Personal Project

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.

The original Astornomy Picture of the Day on NASA's website.
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 APOD 2.0 interface.
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.

APOD 2.0 Fullscreen Image
Click an image to quickly view a high resolution full screen version
APOD 2.0 Image Description Open
Detailed image description is revealed by hovering the title
APOD 2.0 Datebox Year Picker Open
Specific dates can be navigated to in seconds via dropdown

Past Partnerships

Napster
Amazon
Bang & Olufsen
Cisco
HBO
Microsoft

Skills

  • JavaScript
  • HTML5
  • CSS3/Sass/CSS-in-JS
  • React
  • Node
  • Processing.js
  • Java
  • Python
  • CI/CD
  • Testing
  • Webpack
  • NPM
  • Git
  • Storybook
  • Figma

Currently Loving

React
The modern gold standard
Firebase
Elegant cloud toolkit
Three.js
3D on the web made accessible

Contact

Jered Danielson is a user experience developer, leader, prototyper, mentor, designer, maker, problem solver, and University of Washington graduate currently residing in Seattle, WA.