Responses by Fritz Klaetke, design director, Visual Dialogue

Background: Hood Park is a new 20-acre, mixed-use development in the Charlestown neighborhood of Boston located on the site of the historic H.P. Hood dairy company. As development in the Boston area rapidly expands, this once off-the-beaten-path industrial zone has become a desirable alternative to the high costs in nearby Downtown Boston and Kendall Square in Cambridge. Primarily aimed at companies seeking labs or office space connected to public transportation, the website needed to help change the perception of Hood Park by emphasizing its prime location at the center of it all.

Highlights: The new brand identity we created for Hood Park leverages the Hood dairy heritage, with the prominent use of red and circular letterforms, and the website takes the identity a step further. Starting with the 360-degree view drone videography by OLP Creative demonstrating the central location, the responsive, single-page scrolling site highlights all the key information potential tenants want to see as they imagine what this area will become. The architectural renderings were also created by SMMA.

Challenges: Presenting a large amount of information—video, interactive map, phases of development, individual building features and floor plans, community updates, news and press, current tenants and contact forms—in a way that loaded quickly, especially on mobile, and wasn’t overwhelming.

Favorite details: The auto-playing drone video, shot by Lee Hopkins, really captures the central location of Hood Park in a way that’s engaging and illustrates the key selling point for the development. It was also our first time using motion-tracked type with video, which helps reinforce all the key locations that surround the property.

Technical features: The Vision section of the site allows users to see the current and upcoming stages of development through a bird’s eye view rendering. By clicking the tabs of the different phases, the site “grows” before your eyes using just a standard slider on the back-end.

Anything new: To build the transportation layer of the interactive map, we discovered the rich resources of the Massachusetts Bay Transit Authority (MBTA) API. Without its path data for bus and subway routes, it would have been impossible to create. The MBTA also included helpful SVG icons in its style guide.