Blue Beetle is a web design & digital marketing agency from Dubai with 17 years of experience and passion for turning great ideas into compelling websites, apps, and digital marketing solutions that help you reach your goals. Their sweet spot is the hospitality and leisure sector where they are on a mission to improve the Internet, one site at a time.

We were approached by their founder to create an interactive motion animation for their website with the aim of updating the page experience and explaining to their users in an easy yet modern way how they can be of service to them.

After a couple of discovery sessions, we outlined our goals and creative direction in order to kick off the project.

We started with outlining the goals for both sides and discussed the style direction we will have to take in order to set the project ground and make sure what we will produce will be the best fitting solution for both sides.

The pre-production phase started with a couple of discovery sessions to get to know the client, the brand, and the project in more detail.

In this first phase, we make sure that we have everything in place from our discovery sessions before starting production.

After this is set to go, according to all the gathered insights we proceed with developing different style mood boards, present and discuss with the client which is the right direction to take on in the next phase. The next step is finalising and sketching the outlined storyboard we agreed on from the beginning.

This helps us make sure we are on the same page with our partner in terms of the storyboard and visual direction from the beginning and reduces the risk of going into endless revisions, be out of scope and budget.

When we now have a clear direction of the visual style we can jump in to finalising the storyboard using sketches. This is where the actual creative production phase is starting.

We go through 3 rounds of sketching until the final result is the closest we can get to the desired outcome. This way we add or remove layers to the illustrations along with the client and together we get to a final decision that we present before animation.

Scroll down to have a glimpse of what this looks like from the first to the last phase of sketching and how all this is coming to life afterward.

After we have closed the illustration phase with the final look, feel, ideas, and structure of the video we then jump into animating the vector files according to the outlined requirements of the video.

In this phase, we are working again with 3 rounds of revisions of the demo animations, where at each stage we discuss and decide are we in the right direction with the product.

After the final demo is confirmed we send all the required files and formats to the client. In this case, we had to export the video in a format that is suitable for the BlueBeetle dev team to implement into their website and create that scrolling effect that you saw at the beginning of the case study.

Jan-Mar 2021

Discovery

Moodboard Development

Storyboard Sketches

Digital Illustration

Motion Animation

Website Interactive Animated Video

Client - Blue Beetle Agency

Mark Birch - Storyboard & Animation Implementation

Nikolay Petkov - Strategy + Project Management

Milko Marinov - Sketches & Motion Animation

Rumyana Sokolova - Illustrations