Immersive, Responsive Subversive

One of our clients, Ecochlor, is fighting an environmental battle against invasive species. Their ballast water treatment system is used to purify ballast water in ships, and stop any invasive species from being dumped with the ballast water. It’s a sophisticated and rugged system, that ship owners and ship builders need. It’s good for the environment and protecting coastal ecosystems, and new regulations are actually requiring these type of systems, given the horror stories of prior invasions.

Their audience: mostly male, typically 35 to 55 years old, engineering oriented, driven by process, efficiency. “Just the facts, ma’am.” They needed to see the system, see how it fits into their ship plans, see stories of how the system has helped others, get a quick explanation the technology. A few years ago, the marketing mission was more about explaining the problem. The market had moved - now it is more about “how do we solve the problem?”

Immersive

Just the facts, yes - facts, presented well. Facts that are engaging. Engineers are people too! The new design uses animation, transitions, scrolling, and interactive “reveals” to engage the user. The home page included videos: underwater, in the control room, at sea - and then the system. The system itself was rendered in a ship cutaway so it could be quickly understood in context. A “dude” was placed in the cutaway to give a size dimension. The cutaway transitioned into position, pulling the viewer in. Transitions were also effectively used for the important case studies - real ships, real results. There were interactive elements to make the system images larger, and to get more information from 3-D fly-thus of system locations inside a ship. All this, with a simple, clean design and effective use of space.

Responsive

It’s a worldwide audience. It’s a conservative industry (in the good sense). Still, given device proliferation, and an audience on the move, it was important to have the new site responsive across devices. We have a design philosophy of “designing in the device” - the client saw the mobile version, tablet version and desktop version at the same time at the beginning of the process.

Engineers and their tables! We needed to build tables in such a way that they would work across devices, i.e., without a lot of columns. If you are on a desktop, take a look at the tables on this page and reduce the size of your browser, see how they move and stack.

Video playback, automatically, was an issue - devices, to conserve battery power, sometimes do not allow videos to play, so, we needed to have a back-up experience for the mobile home page. In essence,

our front end code would ask “can you play video” and the given the answer from the device, play or not play the video.

Subversive

Well, given the business, should be saying submersive and not subversive, but this site was subversive in a few ways

Small, empowered team. The core client team and agency team was small. The designer was the front-end coder. The writer had worked on new collateral, and was free to interview partners and the front-line sales people. The client kept the design and functionality and content decisions to one person who would solicit marketing and sales and partner input at key milestones, and listen, but who made the decisions and set the direction. The process did not get in the mode of pleasing too many people.

Reuse, revamp, recycle. The system renderings were created for both print and web use, creating efficiencies of scale and delivering branding resonance. They were leveraged in static images, in videos and in interactive functions. These renderings had to be right: the “renderer” and the client went through iterative steps to get to the final accurate solution. The 3-D fly thrus were created for specific customers, initially, in a separate project, but had obvious utility to a broader customer base.

Agile two-step. The site, not large, was created in a “static” responsive HTML-5 mode initially, and early, so the client saw the design iterations in context across devices. Once the complex renderings and videos were done, we wanted to move fast; there was urgency given some market dynamics, so we didn’t wait for the back-end CMS to be hooked up. The user experience was good to go, and we launched.

Effectively subversive.