See What’s Under Our Streets + An Interactive Web Experience for Bolton & Menk

Have you ever wondered what’s under your streets? You probably know about the water lines going to hydrants and connecting to storm drains – you can see those.  But what about all the other underground systems around you? We created an interactive web experience for Bolton & Menk to give their clients a peek at what’s going on beneath them.

Bolton & Menk provides public infrastructure solutions to the Midwest. They’re a premier engineering planning and consulting firm whose services include water and civil/municipal engineering.

They act as a liaison between their clients and contractors, offering oversight services like communicating with property owners. An interactive web experience that shows clients what’s going on below them can help ease concerns about construction.

The team at Bolton & Menk asked us to create an interactive experience they could use when talking to customers. That interactive element was key. They wanted their engineers to be able to navigate the scene in real time to show different systems below ground.

At first, they asked us to make changes to what they were currently using. But after taking on the project, we ended up creating something entirely new for them.

To start the project off, Bolton & Menk sent us paper layouts with everything they wanted in the experience.  These visuals included pipes, system labels, and so on.

We had never created a fully interactive web experience like this before. Our team has worked on interactive graphics before, but nothing like this.

But this was a challenge Phong Tran was happy to tackle. It was something Phong had already been dabbling with and wanted to put those skills to use in a real-world application.

Since he was new to building interactive elements, it took some time and trial & error to get it right. Luckily, Bolton & Menk didn’t have a hard deadline for the project. So, Phong could take his time on the R&D to figure out how to get each interactive element to work together.

But one of the more significant challenges Phong faced wasn’t learning how to put all these pieces together. It was making sure the web experience worked for older, “low end” browsers.

Many of the company’s employees were using Internet Explorer as their primary browser. The Web GL engine he used – Play Canvas – uses some features that aren’t available for these browsers.

He needed to make sure that the final interactive web experience was accessible to ALL Bolton & Menk employees. To do that, Phong made sure not to use any fancy tricks or elements that wouldn’t come through on older tech.

So, what’s really going on under our streets?

Going through the interactive elements in this experience, the answer is an awful lot.

Users can interact with this web experience by moving around the street and sidewalk. You can see how different systems connect – like water lines, sanitary and storm drains, and private utilities.

You can then select different lines to see how, for example, water flows from the treatment facility to hydrants and nearby homes.

Each system has animated elements that show how water or other materials flow from one line to the next. You can even zoom in on the house to watch each line flow in and out of different rooms. Or you can return to the street to see how different lines interact with each other.

The project was a great success. When Phong finished, he sent over the interactive piece so they could set it up on their servers to start showing clients right away. The team at Bolton & Menk were pleased with the results.

You can see how this interactive web experience can help Bolton & Menk engineers explain how different systems interact with each other. It’s a helpful visual aid for clients to understand municipal planning and water engineering.

If you’re interested in creating an interactive experience for your clients, we can help. You can also take a look at our work portfolio for more examples of our stunning 3D design work. Combining CGI with interactive elements offers new ways for your customers to engage with your company.