Above: The website's new homepage    Below: The original version

The original Galaxy Hunter website was built in 2001 as a standards-compliant lesson on statistics using the new Hubble Deep Field images to replicate real problems in astronomy research. It was approved for curriculum in schools all across the United States, but thanks to the march of web technology key components no longer worked properly and the site was desperately in need of updating if it would remain useful. In addition to backend changes, the entire interface needed refreshing.

    • Update from original 640x480px target screen size to 1024px wide 

    * Update navigation for modern sensibilites

    • Replace JavaScript pop-up windows with modals

    • Accommodate the addition of several new Deep Field images as user options

    • Make minimal changes to the design elements and theming 

    • Preserve all existing functionality 

Roles: 

The functionality of the existing website and the suggested changes were diagrammed out for both the developer and education team to review. In early stages, screenshots like these were used to help the team visualize how the new workflow related to the original site. 

The new website uses a fixed-width Bootstrap framework, the 1024 px width allowing for much more real estate on the screen than the original 640x480 size. In many cases, supporting information and images that had been relegated to pop-up windows or spread across multiple pages could now be consolidated in one place. Images are larger and more dramatic.

While the linearity of the website was preserved, new scripting capabilities allowed for more robust wayfinding. The return-to-menu feature of the original has been replaced by an interactive pull-up navigation widget that lets the user know exactly how far they've progressed in the activity. 

Before: The menu screen didn't have room for anything else, and the buttons were images. 

After: Buttons created with CSS and room for more features
make the menu screens more accessible and functional.

A slide-out version of the menu lets users make note of their progress
or skip ahead without leaving their place in the activity.

Supporting information such as vocabulary terms, informational sidebars, and feedback responses that had previously required a plethora of pop-up windows are now contained in sleek and efficient modals. 

Before: Clunky JavaScript popups cluttered the screen. 

After: Sliders allow the question-and-answer format of the activity in a more graceful, intuitive way.

After: Most modals, including hints, feedback, and vocabulary terms, are modal overlays.

When the original site was built, there were only two Deep Field images from Hubble. By the time of this redesign there were several more. A new selection screen allows users view and work with any of these Deep Field images. 

After: An entirely new interface to provide context for the new material,
 and modals that allow the user to preview and explore.

The new design preserves the playfulness of the original visual elements, including illustrations by original designer Kathy Cordes, but modernizes the site and smooths out some of its inconsistencies. Elements were rebuilt at higher resolution and new graphics added to enhance the visual appeal. Text embedded into graphics, including headings and buttons, are replaced by webfonts for greater efficiency and accessibility.

Before: layouts were crowded and included out-of-date imagery.

After: Updated graphics and more area allowed both functional and aesthetic enhancements.

The statistics lesson at the heart of the website is preserved, but increased resolution and scripting capabilities allow workflow and transitions to be smoother and more cohesive. 

Before: Complex information would be spread across multiple screens so details could be
large enough to read, requiring some information to be moved or left off. 

After: Dynamic screens allow cumulative information to stay on the same page,
so user can focus only on what's changed. 

Special thanks to Kathy Cordes, who designed the original site and illustrations,
and helped with the updated workflow,