Zepp Play Soccer is an existing mobile companion app that tracks the real-time performance of a player while simultaneously providing them with relevant statistics.

Zepp Play Soccer is an existing mobile companion app that tracks the real-time performance of a player while simultaneously providing them with relevant statistics.

Role

Product Design
User Experience
Data Visualization
Ideation
Research

Timeline

October 2018
[2 Weeks]

Course

Advanced Models &
Speculative Interfaces

Tools

Photoshop
Sketch
Illustrator
InVision Studio

Design Objective

The purpose of this project was to perform a case study on an existing mobile companion application to explore the limitations within traditional data visualization approaches. Through research and ideation, the current data visualization methods being used by the app were redesigned and redeveloped by conceptualizing new screens.

Artboard 11

The Smart Object

The chosen smart object is the Zepp Play Soccer Sensor (USD $99), which is capable of tracking the real-time performance of a player in both personal and team environments via Bluetooth 4.0 and the 3-Axis Accelerometer and 3-Axis Gyroscope.

The sensor is able to track total kicks, sprints, distances, max speed, goal conversion rate, active time, kick speed, and much more, and can also be paired with the Apple Watch for location and health based statistics. 

benchmark2

Benchmark Analysis

Competitors of this smart object include adidas miCoach Smart Ball (USD $250), InsideCoach Smart Ball (USD $179) and DribbleUp (USD $170), which all have sensors within the soccer ball instead of a wearable one. 

The companion apps for all the competitors do not provide as much data as Zepp Play Soccer does. They also have a main focus on providing data to improve ball control rather than overall player and game performances. 

Companion App Analysis

The existing app carries an overall clean design with a consistent lime green colour scheme and uses two different sans serif fonts — one of which is condensed and is used to highlight numbers in the player's statistics. However, through the analysis, it was evident that the data visualizations and user interface could still be pushed further, and to do so, a couple of questions were proposed  —

+   How can the "Personal Best" page take advantage of data visualization so that it is not just numbers — especially if the data values are different?
+   How data be visualized in a progress bar if the user surpasses their goal?
+   In what ways can the bar graph stats be visualized in a more engaging manner? 
+   How can the colour scheme be changed so that it is more suitable for a soccer training app? 

zeppplayoverall

Proposed Visualization 1.0 —
Goal Oriented Statistics

The current visualization for a player's personal best statistics simply displays numbers and does not indicate any goals that the player may have.

The proposed visualization is meant to represent the player's personal best statistics through a progress bar while also incorporating their goals for training purposes. When the player clicks on one of their personal best buttons, they will be redirected to a new screen with a radar chart that shows their progress through their past few matches. 

goaloriented

Proposed Visualization 2.0 —
Match Overview Timeline

The current visualization for the game report simply uses bar charts while combining statistics from all team memebers. For an application that focuses heavily on training, this visualization does not allow for a team to improve or understand what went wrong in a game.

The proposed visualization is to take advantage of motion tracking features and includes a minute-by-minute slider that indicates ball possession, attacks, attempts, clearances, passes, saves, goals, etc. between the two teams. By sliding through the timeline, the player can see ball control and player statistics on moves that teammates and the opposing team did. 

matchoverview

Proposed Visualization 3.0 —
Heat Map Visualization

The current heat map is already a decent visualization method, however, it can be confusing to understand since it compiles all activity and movement statistics into three different time based heat maps.

The proposed visualization is similar to the game report timeline in which the player can scroll through the field map as a timeline. This allows for players to thoroughly understand how they can improve from their mistakes from minute-by-minute tracking provided by the Apple Watch, and also be able to see other statistics such as total kicks, total calories burned, etc. at the same time. The visualization allows for the user to compare themselves with teammates, as well as opposing team members.

heatmap

Project Takeaways

The proposed visualizations of the Zepp Play Soccer app allows for players to fully analyze their statistics in a meaningful manner in which they can set goals and have their improvements logged over time. The team experience is also enhanced as the match overview timeline can be used to determine what steps need to be taken to work better as a team, while stimultaneously utilizing a darker and more serious user interface that is well suitable for a soccer related training app. 

scene2zepp

© Heena Chudasama 2020
Dribbble - Instagram - LinkedIn