Case Study

Shipyard

Envy built a unique data visualization tool to track water quality and environmental impact.

Mark Kendall Nick Walsh

Project Details

The Client

Ed Kilduff of Camassia Applied Science in Seattle, WA

Shipyard

Project Goals

  1. Make 500,000+ rows of data interactive

    As a U.S. Navy contractor, Ed monitored the former San Francisco Naval Shipyard for 10 years, recording radiation levels from over 800 wells. There were volumes of data, but no easy way to present or publish analyses. If Ed’s team had some visual interface to analyze 500,000 rows of data on the fly, it would save considerable time generating manual reports, as well as save nearly 60,000 printed pages of reports every year.

  2. Effectively pair data with location

    With 638 acres of coverage, coupling data points and their positions on a manipulatable map would represent a huge improvement over the manual GIS to PDF output pipeline.

  3. Bring time into play

    Ed’s team needs the ability to show change over time, but maps are fixed and 2-dimensional in that regard. An interface that can move the map forward and backward through time could reveal patterns previously hidden amongst tables and manual entry.

Research + Prototype

Information Architecture

Letting the data speak for itself was paramount, and the wireframes zeroed in on just that: a localized view of Hunter’s Point sticks around as the focus, while controls and information gracefully enter and exit as necessary.

Wireframes

Brand

Envy crafted Shipyard’s brand alongside the look and feel of the application. Starting with a period engraver’s grotesque font spoke to the history of the site—pairing it with modern colors and animations ensured a clear presentation of the values within.

Logo and brand colors
Design + Build

Interactions

After encountering frame rate issues (a common side-effect of dense information), Envy settled on pairing D3.js with HTML5’s canvas functionality to provide the map a stable and speedy base.

Dealing with Data

To facilitate future data additions, a CSV uploader was incorporated to feed the Rails API layer, ultimately serving as a database for the Angular-fronted application.

Logo and brand colors

Tripping Through Time

A time wheel allows users to scrub through time—like a video—with a spin of the mouse wheel. Never before has the data for this area been so visible.

Deliver

Results

More time to discover

Upon launch, all well information at Hunter’s Point became instantly and intuitively accessible. Ed and his team can now spend most of their time analyzing rather than mocking up reports.

New perspectives

Significant truths often rely less on how much we observe what’s in front of us, and more on where we observe from. Giving Ed’s team a new way to look at the data resulted in immediate improvements to how they make connections within the data.

Concept to product

The application’s continued success has served as a solid proof-of-concept for a larger product, currently under development.

Testimonial

Envy listened, understood what I was trying to do, became enthusiastic about my vision, and turned it into reality.

Ed Kilduff, Founder
Case Study

Barna

Envy helped Barna find a fresh voice from a redesigned online presence and data visualizations.

Learn More
Case Study

Tech Rocket

Envy helped Tech Rocket to teach thousands of kids how to code.

Learn More