Tennis Tracker
Product design of an iOS tennis tracking app that I designed for a private client in Greenwich, Connecticut. (Jan - April 2018)
Problem statement
Watching your kids play tennis and at the same time recording as much data as possible about the match for later analysis is not an easy task. Parents do it with pen and paper or they use one of the many tennis scoring apps for iOS and Android. But these methods have shortcomings:
data entry is time consuming and makes it hard to concentrate on the match
captured data is not analyzed
match data and match analysis sharing with family, friends and trainers is not possible
Therefore, my client asked me to design an iOS app that allows parents to capture a significant amount of match data quickly and easily and that takes the captured data, analyses and visualizes it and allows parents to share it with others.
Home Page
The home page is an expendable scroll feed that can be customized by the user. It could, for example, look like this:
The expendable scroll feed to the left shows the My players section to which users add those children whose matches they usually track.
This is the Start new match section, a shortcut for users to start a match without having first created a match record with info about players, location and date/time.
This third section shows upcoming matches for the user's players for the next seven days.
M players
To the left is the expanded My players section.
Here the user can add additional players to the section and get an overview of the most important player info.
From here the user can also access the Players page where all players - My players and other players - are managed.
The main access point to the Players page is via the group symbol in the toolbar at the bottom of the home page.
Upcoming Matches
The expanded Upcoming matches section shows the players' names, date, day of the week, time and location.
Here, the user can also add future matches by tapping the floating action button.
Tapping anywhere within the expanded section opens the calendar page which is usually accessed via the calendar icon in the toolbar on the bottom of the page.
The Tracker
The tennis tracker's core and data mine is the data tracking component. Use of the tracking component must be super easy so that parents can watch the match and not have to stare at their iPhones to enter data.
Proto.io
This prototype requires a truly functional tracker so that parents can try out a real tracker - not a fake one - on the court while watching their kids play.
Therefore I decided to build the prototype with an exceptionally powerful and stable prototyping software: Proto.io.
UX designers can build pretty much anything they desire with this amazing tool. With proto.io you can easily create animations, transitions and interactions. You can define your own variables to use in complex logic flows that govern state and screen changes. Interactions can consist of long chains of callback functions that allow the execution of complex app behavior depending on users' actions and inputs.
Given the complexity of what happens under the hood of the tennis tracker, the speed of the prototype is not bad at all. It's not lighting fast, but hey - considering the hundreds of callback functions that are at work here it's pretty decent. And you build the logic without any coding. But it's a pretty steep learning curve and you need to invest the time required to grasp the myriad possibilities that this tool delivers into your hands. It's an investment you won't regret.
Proto.io has a clean and intuitive user interface and it's not at all difficult to do easy and also not so easy stuff. The steep learning curve only kicks in for advanced logic flows and it's worth every minute learning how to build astonishingly complex app behavior. Coming from Invision, I was blown away by the power and beauty of this tool.
Last not least, Proto.io has an awesome support team! I peppered Akis and Costas with questions and invariably received very helpful and very polite answers to each and every one of them within at most 24 hours.
To make data entry quick and intuitive, I designed the tracking component as a tennis court in landscape bird's eye view:
Orange Court and Green Court
The user can choose among three different courts: orange court, green court and yellow court. Above is the standard yellow court with the standard yellow ball.
When the user taps on the ball in the middle of the court, an orange and green ball slide out below the yellow ball:
Now the user can tap on the orange ball if the match is played on an orange court. The orange court is smaller in size and comes with an orange marked tennis ball that is slower than the regular tennis ball:
The user can zoom into the orange court with a two finger spread gesture in order to make the court larger and easier tappable.
The green court is for slightly older players who play on a standard sized tennis court but use a green marked ball that is not as fast as the standard yellow ball:
Video: Onboarding
When users use the app for the first time, they will go through an onboarding sequence in the tracker.
The onboarding video shows users how to pick a court, how to pick a server, how to start the match and how to serve.
Input of match data
The user taps on one of the players to pick the server:
The players can be dragged around the court to change their positions. The user can also tap on the player label to change servers. Then the user taps on the start button and the match begins.
The user taps on the tennis ball for the first or second serve.Once the ball is served, the court shows in red all fault areas and in light green the non fault area:
The user taps on the court where the serve ball lands. The colors provide guidance to the user when tapping the part of the court where the serve ball lands.
After the user tapped where the serve ball lands, it might look like this:
Here, the user tapped on the net since Alexander's ball landed in the net. Since this was the second faulty serve for Alexander, the tracker registers a double fault and the game counter increases for Lee.
Video: How to track the serve
This video shows how the user tracks the serve: fault (net and out), double fault, ace, first serve in and second serve in.
When Alexander's serve ball lands in the serve box, the court changes to rally mode.
Here again, the out areas are shown in red and the in areas for both players in light green. During a rally, the user can simply watch or take pictures or use the voice interface to make comments.
When the rally ends, the user taps the court where the ball landed. The tracker registers where exactly an out ball lands. Below, Lee's ball landed out long left:
If the ball is good and the opponent was unable to return the ball, a modal dialog box appears where the user can provide information about the point ball:
At the end of a game, the tracker knows if players have to switch ends of court or not. If it was the end of an odd game and players must switch ends, the user will see this alert:
Then the players slide to the opposite end of court and the next game begins.
At the end of the first set, the top bar section changes to display the results from the first set above the second set counters. Kids usually play only one or two sets per match:
At the end of the match, the user has without great effort and distraction entered a large amount of data: aces, double faults, out balls and their precise locations, point balls and what kind of point balls, 1st serve, 2nd serve, winners, length of match, length of sets and length of games. This data is stored in a match database that can store data points for hundreds of matches. The data is accessible to the user via the Analytics section of the app where individual match data is shown as well as data over time for individual players to visualize player development.
Video: Capturing Match Data
Play the video to see how users track point balls, out balls and net balls.
Captured data include:
net balls and their exact location
out balls and their exact location
point balls and the type of point ball
long rally/short rally
voice comments
pictures
game, set, server, server position
Match Data Analytics
When the user scrolls further down in the scroll feed, it will look similar to this:
The expendable Past matches section allows the user to quickly access match analytics of last week's matches.
Lee's latest match and Maud's latest match show an overview of the most important match statistics of Lee's last match. When the user taps on the card, it expands to show match analytics in greater detail. From the expanded card the user can access match analytics of other matches as well as Lee's development analytics.
The user decides which match analytics to show on the home page.
The last section in this user's scroll feed gives an overview of Win summaries for the user's players over the last two quarters:
Players, their matches and their match analytics are color coded and color matched so that users can quickly find the player info they are interested in. The user decides which color belongs to which player. Here, for example, Lee is blue and Maud is orange.
Opponents that are not included in the My players list are color coded in a light grey.
Win summaries show stacked the number of won and lost matches per current and last quarter for each of the user's My Players.
If a user has more than four players in the My Players list, only the current quarter match results are shown.
Match Setup
A few words about how a match is set up and started other than using the Start new match shortcut in the scroll feed.
If users want or need to create one or a whole bunch of upcoming matches (perhaps for a tournament) beforehand, they tap on the ball icon in the toolbar to get to the Upcoming Matches screen. The page below show a list of upcoming matches which the user created already:
To start tracking a match, users tap on the start button next to the match they want to track.
To see the match entry's info, users tap on a match entry.
To create a new match entry, users tap on the floating action button.
When the user taps on the start button, a modal dialog appears asking the user to turn the phone to horizontal position.
In a later version of the Tennis Tracker, users will also be able to use the tracker in portrait orientation. This is important since depending on the user's position relative to the tennis court where the match takes place, it could be easier to enter match data in portrait or in landscape mode:
When the user taps anywhere on a Match entry, the following screen comes up where match data can be viewed and edited:
To create a new match entry, the user taps on the blue floating action button on the Upcoming Matches screen:
As soon as the user has filled all mandatory fields on the screen, the Done button becomes enabled.
