Roland-Garros (French Open): IBM PointStream Web App Redesign
While I was working at IBM, they built a tennis visualization application, called PointStream, that brings scores, statistics and analysis of matches to life. Aces, serve speed, winners and all other key stats are rendered in real time, giving viewers an immediate and accurate visual sense of a match in progress. In addition, data is aggregated into a momentum meter that shows which player has a current statistical edge.
IBM helps run and sponsor all Grand Slam tennis tournaments, including the U.S. Open, Wimbledon, and Roland-Garros. They are contracted to build the official websites and mobile apps for these tournaments. Therefore, IBM is able to embed their innovative PointStream technology into all of them.
As the lead User Experience Designer for IBM’s Events Team, I was asked to help redesign the PointStream user interface for the Roland-Garros website and mobile apps. In my proposed design, I dramatically improved the way the statistics and other data were visually presented to the user.
The Project Story
Challenge and Goals of Redesign
The current PointStream interface had started to look out-dated and long in the tooth. It had too much color saturation and over-usage of dark, gradient backgrounds. Additionally, it wasn’t always easy to navigate through the interface or make sense of the data. My primary objectives in my proposed redesign were to (a) make the UI interactions more simple and intuitive, (b) represent the data in a manner that is easier to quickly scan and comprehend, and (c) produce a much more modern, clean look and feel.
IBM PointStream Timeline View Inspired by Video Editing Software
Inspired by video editing applications, I came up with the idea of sliding notches below the timeline that allow users to manipulate the timeline view (e.g. range/scope) by zooming in from match to set to game level. IBM’s PointStream technology identifies key points in the match, such as forced errors, critical points, etc. These key points are marked on the timeline and can be interacted with. Hovering over a key point reveals details about the event, including who scored, what the serve speed was, and sometimes a description of the player error. If a video clip is available for the key point, then that is also offered in the form of a ‘play’ icon.
Key Point Videos
When a video ‘play’ icon is clicked for a key point on the timeline, this video modal pops up, dimming the screen behind. The details of the key point event are displayed to the right of the video player.
Revamped Match Summary
I revamped the Match Summary completely with a much cleaner and more graphical layout. For each statistic (e.g. Aces, 1st Serve %, etc.), a horizontal bar chart is displayed with red for one player and blue for the other. A pointed endpoint on the bar indicates the player who is currently winning in that stat category. Users can click on any of the stat category bar charts to dig into more details and see a comparison of that stat category for each individual set.
PointStream Score Alerts
I used Apple’s Keynote to create an animated prototype of how I wanted PointStream score alerts to look and feel. Basically, a tennis ball flies in from off the screen and hits the player’s score on the scoreboard, causing it to pulsate and increase. Other PointStream stats related to the score are highlighted with a yellow circle and they also briefly pulsate.
Brand New Feature: Keys to the Match
Keys to the Match was a brand new feature that the IBM PointStream application added in 2011. Based on IBM’s predictive analytics technology, it allows fans to see key factors that are important for each player in order to win their match. More than five years worth of Grand Slam Tennis data (approximately 39 million data points) are mined to determine patterns and styles for players when they win. The user interface shows what sort of numbers IBM PointStream predicts is needed for a given key factor, such as percentage of first serves or threshold percentage of opponent volley shots. I came up with two different design options for visualizing these Keys to the Match. The second option ended up performing better in usability tests, so we went with that one.
Interactive Tennis Draw Sheet Inspired by Edward Tufte’s Information Visualization Techniques
Inspired by an Edward Tufte workshop that I had recently attended, I decided to experiment with new designs for an interactive tennis draw sheet. My goal was to show the path of all players through the tournament bracket, at a glance, without making the interface feel overwhelming. The draw sheet would also indicate which matches were currently live, providing direct access to real-time PointStream data for those live matches. Because of development resource limitations and a tight schedule, we never ended up incorporating this piece into the final product, but the team still found it to be an interesting and valuable design exercise. The proof of concept wireframes allowed us to step outside of the box and think about sports tournament brackets in a brand new way.