Animated Product Spotlight Connected Update

To coincide with the release of the Botvac™ Connected, we updated the Animated Product Spotlight to show off the new connected features of the product.

Visit Website
https://neatorobotics.com/robot-vacuum/botvac-connected-series/
Animated product spotlight

Launched

Summer 2015

Services

Web & Mobile Development, Creative Design, Graphic Design, Custom Programming

Industry

Robotics,
Home Cleaning

The Challenge

The animation on this page was already in place, but there were still some changes that needed to be made. We wanted the robot in the animation to be changed to the Botvac™ Connected robot and we also wanted to include an additional animation that shows off how the robot can be controlled by the app.

Our Approach

We allocated tasks to appropriate teams in order to accomplish this task with efficiency and ease. Our design team handled the graphic assets and our development team adjusted code related to the animation.

Graphics

There were a few tasks related to the graphics of the animation. First, our team needed to replace the image of the robot with an image of the new robot. We took a promotional press image of the Botvac™ Connected that was taken from the same angle as the previous robot and masked the image, making the background transparent. We also made changes to the background, which consists of different types of surfaces, to better show how the robot is capable of navigating over them. Finally, we wanted to show off the most impressive part of the new product- smartphone app integration.

Since the robot can be told to clean remotely via the app, we wanted to add an animation that shows somebody initiating the cleaning by pressing a button within the app. We combined video of a finger touching the screen of a smartphone with images of the app that change when the finger touches the screen. To display it, we created an image sprite consisting of frames of a video. The animation is triggered when the user begins scrolling. Once the new animation of the smartphone activation is complete, the page animation essentially runs the same as it did before the update.

Development

Most of the development was already in place from the animation that we had used for the D Series robot. However, with the addition of keyframe animation, our team needed to make the frames within the sprite appear to play as a video and trigger the rest of the animation. Our development team used Javascript and CSS to add this new scene as well as make a few minor adjustments to get things to align with the image of the new robot.

Start Your Next Project With Us

From marketing strategies to web development, logo design to mobile app development, we have solutions for all of your needs. Get in touch with us to find out how we can assist you in building a better brand.

Contact Us