We turned our own horror experience with cockroaches into a new website for adera.

Solving the structure

We dug deep into the analytics data and found out that what Adera had thought for years to be the correct structure for their website was in fact completely wrong.

In the beginning, we pulled out Google Analytics data from previous years and found out that visitors weren't searching for pest control service but rather for a specific pest. This was to be the key for the new structure. We got rid of most pages offering pest control services like "bug control" and created a pest atlas instead. Each pest has its own page with all related information. Visitors can order extermination services while staying on one page. This turned out to be the "supercaliflawjalisticexpialadoshus" decision which dramatically increased conversion rate.

The Story

We considered many different ways and styles to create the headers, ranging from filming live pests to using puppets. But to stay within the budget we decided to go with illustrations.

Having the "luck" of experiencing a cockroach infestation ourselves gave us the opportunity to base the story on our own experience.

We made a horror story of a family that has their life taken over by all sorts of pests and turned these into "still life" images moving on hover (or swipe) with paralax effect.

 

Homepage

A family comes home for dinner only to find out that they have been replaced by a cockroach family. Based on a true story.

Initial sketch

Pest control for businesses

Mom comes to her shop only to find out that her business has been taken over by rats.

Pest control workshops

Dad is also not having a good day at work! Oh my!

Initial sketch

Hazardous clearing

The parents asked their daughter to help clean up the basement that they rented out. The whole place is now a bacteria infested drug lab. No a big deal for Adera.

51 Mini illustrations

Sticking with the classic horror theme, we needed something to illustrate the 51 sections of the website.

We created mini illustrations in a kind of 60's style. It turned out to be lots of fun and in the end we worked with Adera to use these in future promotional materials.

Vintage style illustration of a character with no hands.
Little 50's style illustration set 1 Little 50's style illustration set 2 Little 50's style illustration set 3

Custom icons

We also designed a set of icons that represent each category of pests and some system icons too. Adera now uses them in print as part of their visual identity.

Code

Paralax magic done with the power of WebGL.

The biggest challenge was to have all paralax scrolling headers animating smoothly across all devices. We first tried to use regular CSS and Javascript to animate the headers but after some test runs the animation was too slow on mobile devices. We then decided to use WebGL framework Three.js which handled everything with great performance on all devices. The backend is powered by Wordpress.

Credits

Tom Cech Illustration & Design Radek Schenk UX Design Martin Tomčík SEO & Copywriting Martin Matějů Wordpress implementation

What fancy thing can we make for you?

Let's
Talk