Neev developed a portal for Google India named ‘MobileMoves’, where users could upload their videos showing use of Google products. Through this portal, Google wanted to educate users on how the use of its products on mobile phones could make life fun and simple. The portal had high-end animations with videos being pulled in and out by vehicles. The videos were also uploaded to Mobile Moves Youtube channel.

The Client

Google Inc., a US-based internet giant, incorporated in 1998 is in the internet-related services and products domain. Its offerings include a range of products for search, Cloud computing, online advertising products etc. Today, its flagship product, Google search engine and the corresponding site, google.com is the most visited site in the world.

Business Need

Realizing the revolutionary power of mobile phones, Google wanted to depict how the use of its products on mobile phones could make everyday life fun and simpler. Google India decided create a portal called ‘MobileMoves’ to showcase this. Google required Neev to create this portal where users could create and share videos of their usage of Google’s products. The video would also feature on Google Mobile Moves Youtube channel and help promote them. Google targeted young film students to create videos with its products in them and upload the same on the portal. Since it was open for anyone to post content, the feature to moderate what went up on the site was a mandate.

Neev Solution

The client approached Neev with a high-end design requirement that demanded moving graphical animation. The design was done by a third-party vendor which provided us the PSDs. Neev then began animating it.

The design visualised was a vehicle (car, truck, plane etc) pulling into the screen videos that the user could watch. Once the video ended, the vehicle would continue its journey exiting the screen dragging the videos. A different animation was used for each product. Since it was moving graphics, the relative speed of movement of each element of the visual had to be calculated and then implemented to ensure synchronisation, consistency and fluidity in the animation. CSS sprites along with JQuery and HTML5 enabled us create the desired visuals. The front end was made responsive for both tablets and desktop.

At the backend, once the user uploads the videos on the site, it simultaneously gets uploaded onto Google MobileMoves Youtube channel as well. But, it stays private till the moderator approves it. Once approved, it is public on Youtube and the MobileMoves portal and can be viewed by everyone. Youtube Python API was used to push videos to Youtube for upload and pull videos for streaming. The API was also used to make the uploaded videos private on Youtube by default. Having leveraged Youtube’s inbuilt features, we did not face issues on the file format compatibility front. We used Django framework for dynamic loading on front end of the admin interface. Google Analytics was integrated with the portal. MobileMoves was hosted on Google App Engine.

Technology footprint

• Python Django framework
• HTML5, CSS3
• CSS3 Sprites
• JQuery
• Youtube Python API
• Google App Engine

Top features

• CSS Sprite-based animations.
• In order to upload videos, users were required to sign-in through their Google account.
• Simultaneous upload of videos on Youtube and Mobile Moves.
• Videos could be shared through Gmail and Google Plus.
• Ability to vote for uploaded videos.
• Categorization of videos based on product categories.

Top Challenges

• Computing relative speed of movement of individual elements in the animation and synchronizing the speed of all elements.
• Simultaneous video upload on Mobile Moves and Youtube while keeping it private pending moderator approval.