Every so often, a client comes along with a dilemma that forces you to break the mold. For Reusser Design, Iotron Industries is one of our favorite examples of this scenario. I wasn’t personally around for this project, but I’m going to use the Reusser royal “we” to keep things from getting too confusing.
Isolating the Problem
In the fall of 2014, Vancouver-based Iotron Industries, the global leader in electron-powered material sterilization and modification, reached out to us with a problem—their U.S. and Canadian websites had all of the technical lingo that their peers understood to the letter. Meanwhile for potential clients (and anyone visiting their site who wanted to learn about what they do), all of that rich, expert-level information was as good as gibberish. Iotron essentially needed to convert their technical industry vernacular into layman’s terms while keeping the information true to the process.
Understandably, they had no idea how to best accomplish that. After all, it’s one thing to explain that the IMPELA® Electron Beam technology they use “modifies the physical, chemical, molecular, and biological properties of materials and products, improving their usefulness and value” and largely another to explain exactly how that works and why it’s important with the same amount of clarity.
In order to understand the process internally, we had to do some serious research and a tour of the facility was the first stop. Luckily, their second location happens to be in Columbia City, Indiana. Our goal was to ensure that users understood the basic principles of the services—the problem was still to do that in the most simplistic, accurate way possible. Seeing the explanation worded on a site only does so much. Actually seeing and touring the facility turned out to be the missing piece to understanding the work. Because of this, we realized that telling a visual story to explain a complex process was the key.
The initial solution was to add a virtual spin to what would be the site’s new “Take a Tour” page. Photography would guide site visitors through the tunnel and give them a real look into the facility and the process from the operating floor (and hopefully put contextual visuals to copious textual explanation).
The problem? Photos of a concrete tunnel didn’t exactly have the “wow” factor we wanted to complement the awesome process we were trying to convey. It also didn’t really stand out from what Iotron’s competitors were doing on their own sites. The dilemma of explaining the process had now become how can we still walk people through this process, but maybe without actually walking them through this process?
Answer: Make the virtual tour more virtual.
In other words, take the idea of the tour and everything we absorbed from that experience and present it in a way that’s eye-catching, engaging, and that makes Iotron stand out from its competitors—many of whom were still attempting the photographed virtual tour we didn’t feel so great about.
Industry-wide, there was nothing in existence like what we wanted to do. In fact, we could only find a few examples to get started. However, the good (and sometimes scary) thing about a blank slate is you can make of it what you want.
Illustrating the Solution
So photographs were nixed. In fact, we used as few photos as possible sitewide after originally committing to photo and video as our media of choice. The simplification of a complicated process stayed in focus, however, and was now more in sight than ever with the new plan.
According to Nate, our fearless leader, it was a struggle to not be super literal with the process explanation, but to still stay as accurate as possible simultaneously. After going on-site at Iotron’s Columbia City plant and taking a tour to understand the process and get that all-important hands-on experience (along with all the photography, research, questions, and documentation that followed), it was finally time to get started.
First thing’s first—a story was being told, so we were in need of a script.
There was a consistent drive throughout the scriptwriting process to not only outline the concept well enough to bring it into being, but to also keep track of talking points so nothing vital to the process was skipped over accidentally or cluttered in the illustration process. The illustration portion began and that was then matched exactly with the scenes and transitions from the script, bringing the conceptual into focus.
It was perhaps around this stage that the possibility of a fixed element of scrolling came into play. What if you started with a block of contaminated material (as you might in real life when you come to Iotron for their services) and, instead of having to keep track of it as you move from panel to panel, you and the block both travel at your own pace through Iotron’s process and you see your virtual material purified right before your eyes?
Now that was the type of draw the team was going for.
With all of our projects, there are checkpoints at which we touch base with the client, however in this case Iotron was along for the ride throughout the entire process.
Creating the Conceptual
Once everything was approved and set to start moving, development could begin. Everything was exported from Adobe Illustrator and SVG graphics were implemented so everything (yes, everything) would be scalable, which is a core feature of the responsive designs we create for our clients. Coding alone took about 140 hours. Post-polishing and finishing touches, we were ready to go live.
Problem solved—and our client wasn’t the only one who noticed. Reusser Design received a Gold Ad Honor in the 2016 Fort Wayne Advertising Honors award series for Online Advertising and User Experience/User Interface and Silver Winner in the national 2015 W3 Awards. Both proudly sit in our front lobby at the office.
We met this challenge head-on and we’re always looking forward to the next project our clients bring to the table that make us step out of the box and try new things. At Reusser Design, we’re always ready to come up with unique, innovative solutions to your virtual dilemmas.