Wave Your Flag

Cheer for your favourite football team with Ambilight!

Ambilight is a unique selling point of Philips TVs, and TP Vision decided to leverage this feature to add another dimension to the overall user experience. They needed an app that allowed the user to change the TV's surrounding Ambilight, initially in their favourite sports team's colors, and trigger Ambilight animations during the game. We decided to start out from a football perspective. I was in charge of the app design, and acted as the main reference for all design related issues.

What I did

Ideation
Wireframing
Concept design
Agile development

The idea

An engaging and fun design for an app

The main purpose of the app was to select the teams's flags, and interact with the app during the football game. We wanted to create an immersive experience during the football game, that would bring the ambiance of the stadum to the living room. We decided to go for an approach that mimicked the team selection process of current football video games. For the interactive, in-game part, we were inspired by a common sound-board, of which many physical and digital versions already exist. As an addition, we incorporated a passive mode, that would listen to the noise in the living room, and react to increased noise.

Interaction Design

Keeping the flow simple and straight-forward

The entire app flow needed to be as simple as possible.. I defined 2 phases: the Ambilight setup phase, and the in-game event phase. The first phase is the one where the users sets the colours surrounding the TV. This can be done by swiping between either one or two flags, or upload a custom image of the device's gallery. To give immediate feedback about the visual look, we enabled the TV to respond practically immediately to any selection in this screen, and update the Ambilight colours accordingly. So no user confirmation was needed to update the colours, this was done immediately after the user stopped swiping. The second phase is the event phase. This is the screen which the user will interact during the football game. Using this screen is simple and intuitive, tapping one of the 6 action buttons triggers an Ambilight animation. An on-screen animation is triggered simultaneously, mimicking the ongoing animation of the Ambilight. The bottom buttons can be used to set the mode of the Ambilight, giving it a more dynamic effect.

Design and implementation

Maintaining the visual style and overall experience of the future Philips TV apps.

In the visual design and implementation phase, I acted as the design lead of this project. These activities were outsourced to reliable partners. The visual designer reported back to me, and I made sure he adhered to the existing design guidelines and visual style, while still granting him creative liberty. The final designs were approved by me before delivering them to the development team. During the development phase I acted as a Q&A to resolve the minor issues that emerged.

The final product

A framework for future event-related Ambilight apps

With the Wave Your Flag app we did not only deliver a sports event related Ambilight app, but we designed a framework for future Ambilight apps as well. The app structure can be used for any special occasion or event. Elements and components of this app can be used in other Ambilight related apps as well.