Jered Danielson
UX Design
Prototyping
Development

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
UW Design 2015 Thumbnail

UW Design 2015

View Live
  • jQuery
  • Isotope Masonry
  • REST API

This website showcases the student profiles and work of the University of Washington Department of Design's 2015 graduating class.

I worked with a team of seven other students and was the primary person responsible for coding the site. I also managed the project to enforce task deadlines and coordinate student submission of content to the site.

UW Design 2015

Showing off the University of Washington's Class of 2015

View Live
UW Design 2015 Splash Page
Tech
  • jQuery
  • Isotope Masonry
  • REST API
Roles
  • Project Manager
  • Programmer
Client
  • University of Washington

I graduated from the University of Washington in 2015 with a Bachelor of Design in Interaction Design. As my capstone project, I worked with a team of seven other graduating seniors to design and build our class website. The purpose of the website is to show off the personalities and portfolios of the graduating student body.

This project was part of a larger class-wide effort by over 50 students to create a visual identity for our senior design exhibition. It was a coordinated effort between visual, industrial, and interaction designers.

IXD student interactive portraits
Student portraits can be interacted with by mousing over them

My role in designing the website was twofold: lead programmer and project manager.

As lead programmer I was responsible for designing and implementing the site's code. One of the main challenges was how to allow 56 individuals to submit, edit, and organize their work on the site. I proposed using tumblr.com as a platform for this. Tumblr allows users to easily submit their own content, which greatly streamlined the process. In total 133 entries were submitted to the site. Tumblr was also a good fit because it's free, stable, offers an open REST API, and can be customized using their proprietary templating system. In particular I leaned heavily on the REST API to dynamically load data as needed.

Student work in a masonry grid
Student work is displayed in a dynamically loading masonry grid

As a project manager I ensured that students were submitting their work to the site in a timely manner and conforming to style guidelines that made the presentation of our work consistent. I wrote a 27 page PDF outlining how to submit work to the site and what guidelines to follow. Finally I was the primary point of contact for the entire website team and enforced deadlines for tasks such as visual design and content submission.

Jered Danielson student profile
Each student has a profile page with information and work that they have submitted

The website launched ahead of the 2015 Senior Design Show and was a huge success. The site helped to drive interest and contributed to hundreds of people visiting the exhibition. Since launching in June 2015 the website itself has attracted over 55,000 pageviews.

Tectonic Newsletter Thumbnail

Tectonic Newsletter

View Archive

While at Tectonic I helped to roll out a brand new weekly newsletter to promote the company brand and enterain the public.

I worked closely with two visual designers to create the newsletter while accounting for modern HTML email constraints. I built a template using Zurb Foundation to maximize responsiveness and consistency.

I also built an interactive form that enables users to fill in the template with arbitrary content and export the result. This greatly streamlined the frequent production of newsletter campaigns.

Tectonic Newsletter

A weekly design newsletter and the tools to publish it

View Archive
Tectonic Newsletter Banner
Tech
  • React.js
  • Firebase
  • Bootstrap
  • Zurb Foundation
  • REST API
Roles
  • UX Designer
  • Programmer
Client
  • Tectonic

I worked at Tectonic as a Design Technologist for two years, and while there I helped develop several in-house projects to enhance productivity and promote the Tectonic brand. This particular project was an email newsletter featuring design-related articles from around the web. It was conceived as a way to express Tectonic's personality, entertain the public, and promote the company.

This project had two main challenges associated with it. The first was designing a beautiful and engaging email newsletter within the constraints of modern email standards (or lack thereof). The second challenge was designing an internal tool for creating and formatting newsletter content that would streamline the publishing process and save time.

Tectonic Newsletter Email
A Tectonic Newsletter as it looks in the browser

When designing the newsletter, a whole host of constraints were considered. The state of HTML email is pretty sad. Standards have not been updated since 1999 and every browser, email client, and device has its own quirks to deal with. Responsive design is difficult with dodgy media query support, and JavaScript is right out due to security reasons. Getting emails to look consistent often means designing for the lowest common denominator.

Fortunately, Zurb Foundation took a lot of the pain out of creating an email template. Using their proprietary markup system "Inky" it was possible to design a responsive, great-looking email that matched what our visual designers had composed.

An early visual comp created while we were testing the limits of HTML email design

With a Zurb Foundation email template in hand, I set out to create a tool for quickly and easily filling in arbitrary content. Each newsletter would be curated by Tectonic's Creative Director Ben Shown, and being a busy man he did not have time to manually write Zurb Foundation markup every time a new newsletter was to be sent. He needed a tool that would save him time in a few key ways:

  • Avoid manually downloading and processing article thumbnail images
  • Write email content without needing Inky markup
  • Export HTML in a format directly usable by MailChimp

To address these needs I wrote a web application that greatly simplified the publication of Tectonic email newsletters.

Unfilled newsletter template
The Newsletter template editor before any content has been entered

This app uses React.js to manage and render UI elements. React.js was a perfect fit for this project because it let me encapsulate and reuse UI functionality like image cropping, entry controls, and the entries themselves.

Embed.ly helped to automatically parse article URLs for images to use as thumbnails, saving Ben from having to manually download and process them. Firebase was also an important tool; I used it to automatically upload the images obtained from Embed.ly, saving yet another step in the publishing process.

Filled newsletter template
The Newsletter template editor after being filled in

The resulting tool is a huge asset for Tectonic, an investment of development time that will pay dividends in the long run. By simply filling out an online form and clicking a button, anyone at Tectonic can quickly create and publish an email newsletter campaign in a fraction of the time it would have taken manually.

Past Clients

Amazon
Bang & Olufsen
Cisco
HBO
Microsoft
Napster

Skills

UX

  • Research
  • Concepting
  • Wireframing
  • Storyboarding
  • Prototyping
  • Motion Design

Development

  • JavaScript/jQuery
  • HTML5
  • CSS3/Sass
  • React.js
  • Node.js
  • Processing
  • Java
  • Python

Software

  • Adobe Illustrator
  • Adobe After Effects
  • Sketch
  • Unity
  • Webpack
  • NPM
  • Git

Currently Loving

React
Super-powered UI rendering and encapsulation
Firebase
Don't worry about the backend - put it in the cloud!
Three.js
3D on the web made ultra accessible

Contact

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