Animated Product Spotlight

For Neato’s “Robot Vacuums” page we wanted customers to be able to experience the product in a fun and meaningful way so our team decided to use an animation and scrolling effect that would show their new robot vacuum moving along the page, just like the floor of a room.

Visit Website
https://neatorobotics.com/
Full scrolling website animation

Launched

Spring 2015

Services

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

Industry

Robotics,
Home Cleaning

The Challenge

Illustrate how Neato’s new product works and deliver detailed product information to their customers without them feeling overwhelmed by technical specifications.

Our Approach

Create an attention-grabbing and energetic feature that would be realistic, aesthetically appealing, and informative. Javascript was used to animate this feature, which manipulated HTML and CSS to achieve the desired effect. With this effect, we were able to enrich an existing page, inform the user of a new product, and add to the overall visual identity of the site.

The Story

Our team engineered the bot to systematically clear the debris and trash on its way down the page, while avoiding any obstacles. As the robot vacuum travels down the screen, there are animations of the features that are triggered based on the user’s scroll position. We believe this to be an effective and interactive way to inform potential customers of their products’ abilities.

First, we show a laser scanning the area to illustrate how the robot maps its path to avoid hitting objects as it cleans.

Then, the robot continues, picking up cereal and pet hair. The cereal being picked up shows off the SpinFlow Power Clean feature which helps the robot clean large objects. The pet hair being picked up shows off how well the vacuum performs in homes with pets, since that is one of the top qualities Neato’s products are known for.

Finally, when reaching the end of the path, the robot maneuvers into a corner, showing off its “D-Shape with CornerClever technology” feature. There is an area with text next to each feature, explaining how they work. There is also a link to another page with a more in-depth analysis of these elements.

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