Content: fanpictor

Fanpictor - An online tool to design fan choreographies that come alive in the stadium


An online tool to design fan choreographies that come alive in the stadium


When Fanpictor approached us with their idea we were thrilled to start working on the project and since then we are keep doing conceptual, design and development works together with them. Finally, a tool for sport fans to become part of the action at any event! 

Visit website

Fanpictor provides a brand new way for fans to participate in sporting events, in which they are not mere spectators, but performers in their own right, who are a part of the events that they enjoy. The Fanpictor site can also be branded in team colours, and a microsite can be created to showcase choreographies from a large event. The main features of this project are the Choreos Editor and the Stadium Editor.

Using the Choreos Editor a series of messages or images can be 'painted' onto a venue's seating plan to create choreographies, or 'choreos', to be executed by the spectators during an event. The application offers a variety of familiar text and image-editing tools including brushes, pens, pre-defined icons and shapes and more. The choreography can then be visualised using a preview function that animates the entire sequence.

The website main features are:

  • Choreo Editor
  • Stadium Editor
  • Sponsored pages

Meanwhile with the Stadium Editor the administrators at Fanpictor can manage (create, copy, edit) the seat maps of different stadium layouts within the application, including event-dependent custom layouts. The system is flexible enough to work for any kind of venue and any kind of event.

Both tools are built in the Ember.js framework. They use advanced HTML5 techniques and the fabric.js canvas library to create an immediately-usable and familiar drawing-based interface. The applications are supported by an integrated help tour, implemented using an adapted version of ZURB Joyride. Behind the scenes, Python/Django applications provide storage and management, integrating with the Ember applications via clean APIs.

Automated testing is central to our development process, as a guarantee of quality and reliability. Fanpictor's sophisticated suite of integrated server and client-side applications presented a number of equally complex testing challenges. We built a testing system that covers backend Python/Django applications, frontend components and the interaction between them. Notable aspects of this include screenshot testing with CasperJS, unit testing with Karma and Jasmine, and continuous integration testing for frontend systems.

Fanpictor is also at the center of media attention, especially after the event organized by the Federer Foundation "Match for Africa 2", a project with two Swiss icons, Roger Federer and Lindt. Roger Federer played an exhibition match with Stanislas Wawrinka, another giant of Swiss tennis, to raise funds for children's projects in Africa. We created a microsite dedicated to the event, including a custom choreography editor. Roger Federer publicly encouraged fans to create a choreography for the event, following which the site received more than a thousand proposed choreos, drawing tens of thousands visitors. We worked with Lindt to create the dedicated microsite, starring Federer as Lindt ambassador, and to develop the successful marketing strategy that played out across several online spaces and helped bring as many visitors to the site as possible.

Fanpictor new website and web application screens by Divio



Working with Divio was a lot of fun. Being a start-up we simply couldn’t internalise every discipline needed to develop our service. With Divio we found a broad and sophisticated knowledge in all aspects we needed: web design, UX, frontend and backend development. The development process was smooth and we have been able to come up with a product that is more then satisfying.

Reto Scheidegger, Co-founder of Fanpictor

Visit website

Can we help you with your project?

let's work together