We got ahold of Brothers & Company's sick new site for OERB's Safety campaign. After playing with the many well placed animations and unique user-interactions, we had to get the behind the scenes of http://www.oerb.com/safety/ and get the back story to how the project came about.
Tulsa Egotist: What was the client's initial brief?
Brothers & Company:The creative brief had many message objectives baked in. We always work to distill things down to their basic elements.
In this case, it went something like this:
Students use lease roads and oil and natural gas well sites to hang out and party because they are out of the way and private. We need to demonstrate these areas should be treated like any other industrial site. Without the proper training, well sites are dangerous.
It's a subtle distinction. We want to get the message across that high school students should stay away because of the ever-present dangers, but many students have family members that work in the industry. So, it is possible to safely navigate a well site, if you are properly trained.
TE: What were the largest design challenges with this project ?
BROCO: We rely on research. It helps point us in the right direction and sharpens our message. Our process for this project was no different. We consulted focus group research and message testing to different segments of students.
A common reaction among all groups was the recognition of the graphic, realism of what could happen if things went bad at a well site. Students said they wanted to see and know of the physical danger.
That's tricky. When dealing with a client's brand, you always have to keep a balance between what's best for the message impact and what's best for the tone of the brand.
Our design is reflective of this balance. Black and white, desaturation and strong hints of red give the design a somewhat ominous feel. We also experimented with different icons to represent the dangers, some were much more graphic than others. In the end, we pulled back to make sure the client's brand was not being pushed beyond its comfort zone.
TE: What were the largest technological challenges to this project?
BROCO: In many ways, the technological challenges came from who we were targeting. Students from roughly 13-18 years old have drastically different points of view. But, one common thread this demographic shares is how incredibly sophisticated they are when it comes to digital.
Our goal was to educate visitors first and foremost. However, you lose them at the door if it's not entertaining or interesting. The parallax design, overlaying elements, scrolling navigation, and "easter egg" feel all add to the user's experience.
We also launched with a heavy video element since this is the primary way the millennials like to consume their information.
Another challenge was adjusting our design down from desktop to tablet to mobile. In a tablet environment you don't loose much. When you drop the screen size to mobile, we decided it was a better experience to move to a menu-driven design. It's all about a great user experience, whatever device you are on.
TE: You guys used some serious animations, horizontal scrolling, what kind of HTML5/CSS3 fancies did you use to help you?
BROCO: We called upon the magic of Canvas to draw lines to absolutely positioned anchor points on the page. Those anchor points (along with all other moving bits) were animated using the Skrollr.js framework. As the anchor points moved around, the Canvas lines went along for the ride - constantly being recalculated on the scroll event.
There was lots of heavy lifting going on behind the scenes, so another challenge was trying to achieve a decent frame rate for the end user. For this, we relied upon the power of browser based GPU rendering - triggering it on any element that would be otherwise too heavy to process.
TE: What was one important lesson learned?
BROCO: If great were easy, you'd see more of it.
TE: What's the funniest thing said at Broco this week?
BROCO: "Are we ready to launch the site?"
For more information on Brothers & Company, hit up their Facebook page
This article is a part of our series How we made..." where we explore how local agencies do what they do. If your agency has a sweet project you want to show off or get featured, submit it here