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.