GUI design for interactive touchscreen kiosks at the 2010 U.S. Open at Pebble Beach

Project

The USGA teamed up with American Express and JESS3 to create touchscreen kiosks and a data wall installation with live feeds from the golf tournament (on-site) of tweets, photos, videos, live stats, player profiles and hole information, which debuted at the 2010 U.S. Open at Pebble Beach.

Design

The data wall had already been signed-off, so I was tasked with concept designs from a set of wireframes (adding my own ideas/screens too) for the touchscreen media kiosks that fans at the tournament could interact with. The touchscreen's navigation and branding/sponsors are missing in my visuals shown here, as the interface had to be later adapted.

Involvement

Design

Client

American Express
USGA (The United States Golf Association)

Date

May 2010

Agency

JESS3

Media

A timeline of photos from the tournament that can be filtered by day, player, hole etc...

Golfers

A horizontal 'carousel' gallery of all the golfers. Via a subtle slider bar, or by swiping left-to-right on the screen the user can cycle through all the players competing in the tournament. Each player is cut-out and artworked on a subtle backdrop of the golf course. Tapping a player takes the user to their profile (see next screen).

Scoreboard

At the foot of the screen is a real-time leaderboard (carousel), showing each players current score.

Profile

Each golfer has a profile screen with biographical information, all of which can be shared.

Tournament card

Via the real-time scoreboard (carousel) at the bottom of the screen, the user (on-tap) can access a 'tournament card' screen for each golfer, which shows an overview of media and stats relating to them so far. They can catch up on (watch) video clips, view photos, scorecard etc...

Tweets

Aggregating tweets mentioning either the tournament or specific players. The top ten trending topics are pulled out as filter links to the left, and all the tweets are colour-coded by topic. The user can either view a live stream, or filter by golfer, topic etc...

Timeline

The timeline at the bottom allows the user to go back in time to view, for example, a large volume of tweets yesterday, to see what the fuss was about, or see 'the conversation' surrounding Tiger Woods missing that crucial putt on the 18th hole a couple of hours ago...

Final interface

When I was designing the GUI screens, the navigation and branding (sponsors etc...) had yet to be decided. When it finally surfaced, my designs had to be adapted slightly to fit into a smaller space to accommodate the social and information stream/navigation below. This was designed by Knight Studios.

Enlarged

The full scale of my original design comes into play more when the user opts to see a detailed view of the content, only the colours were tweaked to fit the new, branded interface.

In situ

The final installation(s) at the 2010 U.S. Open at Pebble Beach, with the accompanying media wall with further data visualisations and a similar live stream.