UEFA Match Logging iPad App

UI Centric was commissioned by the Union of European Football Associations (UEFA), which oversees Europe’s soccer leagues, to build an iPad app prototype for video tagging and tracking of soccer match highlights. The intent behind the tool was to create an app that would allow users to “tag” match highlights and save a log of those events with the appropriate keywords naming the players involved and the type of highlight. These tags would then be used to make these video clips and match highlights searchable, allowing UEFA to create a database of video clips for the media to license.

Main DashboardMain Dashboard

The user’s experience begins at a dashboard screen where he or she can quickly resume viewing and logging a match video that was previously started or quickly find other match videos to watch.

My Clips DashboardMy Clips Dashboard

Users can also save and organize video clips into folders in the "My Clips" section of the app, to quickly find and rewatch or resume watching them later.

The video logging app features a main dashboard for selecting clips or entire matches to view and log as well as a “My Clips” section where users can resume viewing previously watched matches and see a list of the clips they have chosen to save. However, the real standout portions of the experience are the actual video player as well as the clip logging and telestrating portions of the app.

By default the video playback mode features minimal UI chrome to ensure no crucial footage is covered with noisy buttons or distracting toolbars. However, a few simple gestures allow the user to quickly access the primary controls of the player. Swiping up from the lower edge of the screen brings up a video timeline that lets the user jump to a particular time stamp in the match, as well as seeing markers for each point in the clip where a log or telestration was added. A simple tap on the screen during playback pauses the video and shifts the user into logging mode.

Play Video ScreenPlay Video Screen

By default video plays edge to edge on the screen of the iPad, but since most video is shot in 16x9 while the iPad has an aspect ratio of 3x4, the edges of the video are cut off. Users can toggle out of this mode by tapping the zoom out arrows in the lower right corners.

Play Video Screen with TimelinePlay Video Screen with Timeline

Whenever a log or telestration is created, it appears on the timeline with a custom icon to indicate whether it’s a logged clip or a telestration.

Upon entering the logging mode view, the UI shifts, revealing a list of keywords that can be used to log a match highlight from the point of pause. The video camera also decreases in size and up to alternate camera angles will display below if additional angles are available.

When it comes to actually logging a clip, the goal was to keep the user from needing to type on the iPad’s touchscreen, since that can be a difficult task. To do this we used a smart taxonomy of words, and a syntax of actor, action, outcome. To start, the app displays a list of players on the two teams involved in the match. Once a player has been selected, the app automatically displays a list of actions, sorted by the frequency with which they are used over time. Once an action is selected, a list of outcome words displays. In other words, based on each word or phrase the user selects, the app automatically filters the keywords to show those that would make the most sense. So if the user selects an action like “shot on goal,” the app knows to suggest outcomes that would be tied to this action such as “wide right,” “over the net,” or “on target - blocked.” However, if the word the user is looking for does not automatically appear high up on the list of suggested words, the user can scroll down through the list of words. Additionally, to more quickly reach an obscure word or phrase, the user can use category filters to jump to things like actions or players or emotion.

Keyword Logging Mode Timeline CollapsedKeyword Logging Mode Timeline Collapsed

As much as possible, user input was designed to be minimal and intuitive such as dragging to fast forward or rewind video, swiping up and down to toggle the visibility of the video timeline and even tapping to select keywords for logging as opposed to using a keyboard to type out a log.

In addition to tagging match highlights, many other key actions can be performed from the logging screen. For example, the user can switch camera angles from this screen, or tap and drag his or her finger on the primary video screen to scrub through the clip. Dragging the screen to the right scrubs forward in time while dragging to the left scrubs backwards in time. There’s also a telestration mode that can be accessed via the icon nav in the top right of the logging mode screen. In telestration mode, users can add a variety of illustrations, including both pre-set shapes as well as freehand drawings, to a still video frame.

Telestration with Color PickerTelestration with Color Picker

To begin telestrating, the user first selects a shape or the pen tool (which allows for free form drawing). The user can also customize the color he or she is using for telestrations.

Telestration with Shape on ScreenTelestration with Shape on Screen

Once a user drags and drops a shape onto the screen to set its general size and placement, he or she can fine tune the size by touching and dragging a single corner or rotate or reposition the  shape by touching and dragging multiple corners at the same time.