I turned my horror experience with cockroaches into a new website for adera.

Solving the structure

On this project I teamed up with my friend and great UX designer Radek Schenk who help me with the UX. 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

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

Having the "luck" of experiencing a cockroach infestation myself gave me the opportunity to base the story on my own experience.

I 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, I needed something to illustrate the 51 sections of the website.

I created mini illustrations in a kind of 60's style. It turned out to be lots of fun and in the end I 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

I 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. I 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. I then decided to use WebGL framework Three.js which handled everything with great performance across all devices. The backend is powered by Wordpress.

Bug illustration for Adera

What fancy thing can I make for you?