Discoveries Abound

UI, UX, Front‑end

An exploration of research and the ways that the Pacific Northwest National Laboratory, PNNL, is working to advance the fields of science, energy, environment and national security. The site acts as a stepping stone to describe the work PNNL does to investors and the public.

I was tasked with the creation of the wireframes, design and the code for the front-end portion of the site. The design heavily features imagery from the physical brochure as the two are meant to coexist.

Screenshot of a finished section page
Screenshot of a finished article page
Screenshot of a finished video modal

It was imperative that the site work on machines that have may have program restrictions such as in government agencies or corporate entities. Due to this Internet Explorer 9 was chosen as the lowest target browser.

Keeping the experience identical rather than providing a stripped down version to older browsers was important for the project. During the wireframing phase time was spent testing on virtual machines to uncover what would be possible within IE9 to ensure everything in the final product would be feasible across all browsers.

Wireframe for the section page
Wireframe for the article page
Sketch of the navigation molecule

Initial sketch of the navigation molecule

The end product is fully responsive utilizing ajax to provide smooth transitioning between each section. To keep it as light as possible in such an image heavy site there are multiple sets of image sizes to choose from to avoid serving an overly large image where it isn't necessary.

Screenshot of a finished section page on a phone
Screenshot of a finished article page on a phone
Screenshot of the finished molecule menu on a phone

Credits

  • Client

    Pacific Northwest National Laboratory

  • Agency

    Stepframe