Homepage > Portfolio > User Interface for Multimedia Jumbotron System

User Interface for Multimedia Jumbotron System

Creating an interactive web-application for the users to take part in the online auction during the football match.

CUSTOMER

Besides broadcasting the games, the leaders of Levi’s Stadium (a football stadium located in Santa Clara, California, in the San Francisco Bay Area) wanted to increasingly attract spectators to the game itself, as well as to provide themselves with a necessary item that they could get in a matter of seconds. In other words, they could succumb to a happy accident, a miracle, and a moment that could turn the vector of a participant’s life in a completely different direction.

Objective

The purchase of goods and services is even more jarring when it is presented in the form of a competition or auction. But the excitement comes precisely when the consumer really believes he needs it, and without it he will find it difficult, because it will be able to close certain of his needs.

After numerous advertising campaigns and audience warm-ups, it would be impractical to conduct an auction in an unorganized, poor quality and without any interest for the audience. The goal of developing the web space was to provide everything necessary for participation, to show excitement and intrigue, and to call for participation itself without loss through image.

CHALLENGE

The San-Francisco company desired to hold an advertising game during the match – an auction to sell several items, including the new car. Only those visitors who have registered at the company’s site were allowed to take part in the game (of course, a massive advertising campaign was held beforehand).

Here is the plot of the game:

Interactive video starts on all the devices of all the logged in users simultaneously, as well as on the huge stadium jumbotron screen. After a few seconds of Levi’s commercial, the photos of the auction item are displayed. During the 10-second countdown the price of the item is dropping, so that any visitor might press the button to buy at the current price. One who pressed the button first is the winner and his/her name is shown on every device.

The main challenge was to create a pixel-perfect picture for all possible desktop resolutions and mobile devices, including stadium jumbotron with a very specific resolution of 1,120 × 4,648 pixels.

BENEFITS

Our developers proposed the solution that will perfectly match the existing ecosystem: we decided to use modern web technologies with the advantages they provide. The front-end of the application was built with HTML5, CSS3, and AngularJS due to that technology being fully responsible at every resolution.

Such an approach helped the client to solve the business goal without additional expenses on software development and disruption of the existing infrastructure.

During the development process, our developers practiced the SCRUM.

Solution

  • The front-end part of the project was created using AngularJS framework;
  • Pixel-perfect quality of the application was achieved using CSS technique – CSS3 Media Queries;
  • We’ve managed to run the web application simultaneously on every device due to the WebSocket API (which establishes connections between a web browser and a server).

Technologies

 
 
 
 

SCREENSHOTS

Drop us a line

If you are interested in the development of a custom solution - send us the message and we'll schedule a talk about it.