Atheletory

Leangeek came up with a new product that picks up the information from the tracking device and displays the analytics on the web dashboard. These devices push important information to users such as hydration levels, heart rate, BMI, oxidation, and temperature.

About the project

CLIENT
LEANGEEK

PROJECT
ATHELETORY

YEAR
2020

1

My Role

I was the product designer for the project, I was responsible for the overall product design, User research, UX design, UI design, Branding, and prototyping. I also collaborated with the engineering team and developed the front end of the platform.

Project Summary

Data analytics in professional sports has grown exponentially in the last decade. Instead of making decisions to draft or trade on personal opinions, teams are looking to data for the answers. Professional Squash is no exception. The need for an increasing edge over the opponent player is only increasing the need for accurate player monitoring and performance tracking.

The market has opened up for new businesses, and sports-related industries, with a strong focus on emerging technologies, such as in Leangeek Technologies. Started by former professional squash players, Leangeek Technologies has partnered with Fitbit to launch a device for tracking the performance of the players.

Leangeek came up with a new product that picks up the information from the tracking device and displays the analytics on the web dashboard. These devices push important information to users such as hydration levels, heart rate, BMI, oxidation, and temperature.

Along with the player dashboard, we also have a coach-interface which is dedicated for the coach who can view the information of various players he trains, and can also observe the competition at both micro and macro level. The dashboard interface is a visual snapshot used to display information at a glance. Each player and coach can use the dashboard to gain a unique perspective of the sport and with the help of technology, the dashboard provides a bird’s eye view of the sports tournament in an engaging, visually appealing, and most importantly each to interpret manner.

atheletory_introduction

The Challenge

Professional sports, over time, have become competitive where a minute can change the course of the game. Sports teams now have much loyal fan-base and the followers are asking for detailed information.

atheletory_challenge

Agencies and team players are also now realizing the need for proper performance tracking such that corrective measures can be taken after studying accurate performance metrics. As a result, sports management is competing to gain a competitive edge against peers in the field of play. Hence, the surge in the need for sports analytics. One of the major problems with manual data on the papers is the accessibility of this data. We wanted to create a platform that can help the users to access the information related to their game once they are off the court.

Squash is extremely competitive and fast-moving. Because of this, the player needs to be in tip-top athletic condition. The product helps the users in understanding their physical condition. It also helps the players to connect with their coach in real-time and gives a detailed picture of the tournament along with a winning prediction algorithm which helps the players to prepare better for the game.

The Solution

When it comes to sports, web-based applications and mobile apps serve different purposes. We wanted to focus on designing the web dashboard for the initial release and later on extended to the mobile platform. The web-based dashboard design offered greater flexibility and functionality to our users especially considering the data and the heavy functionalities the web application was much preferable. In our case we wanted to bring the players and coaches under one platform by integrating data, creating access, and also facilitating communication.

We started designing our platform in phase-wise, each phase had a specific goal and we wanted to track our overall progress on the application using these phases, I was the sole Product design of the company and shortly after I started working on the application, I began collaborating with the whole team so that the platform can be successfully developed. Even before trying to get started, I started to understand what the problem was and what I was trying to build. We had kick-off meetings and with few initial meetings with the team, I got a clear idea of what we were trying to build and what was the problem we were trying to solve. In phase 1 I started with research, As a part of my initial research, I started conducting 1:1 interview sessions. In the interview session, I was able to understand what the goal of the company and what were the Key performance Indicators which Leangeek was looking for. Along with that I also understood that there were multiple companies Like GameAnalytics, Game Closure, and cam-Trax analytics who were already into the business and we’re building similar products. We also identified our potential users and spoke with the users in understanding what they required and how could they benefit from a performance analytic tool like Atheletory.

atheletory_11
surveys

In phase 2 we spent time in Aggregating & Analyzing our Research, based on the data we gathered regarding the market, competitors, and potential users. We spent time brainstorming more about the solution. We looked into multiple applications and after looking into fitness applications which were designed for desktop and started identifying the patterns and trends in the sports analytics dashboards. Then we started building the user personas, these served as the tools which helped to communicate our research findings with the team members. We made 3 different user personas for players and as well as coaches. Once we were clear with the personas, we started connecting the dots on what our personas are supposed to experience and started using them in user scenarios. Another important technique that we used to ensure that our analysis and research is intact is by creating user stories, We created simple stories and very simple scenarios on how the players and coaches can interact with the platform. These helped and worked as the action items for the developers.

The next important phase of the project was to give a specific shape and direction to the project. We started carving the flow of the application, some of the major activities which we performed during this phase is creating flowcharts and site maps. This specific activity helped us in creating the hierarchy for the overall application and it also helped us in prioritizing the screens and features for both the player interface and as well as for the coach interface. Once we were clear with the flow we called an all-hands meeting to ensure that our approach was right and for this, we created virtual walk-throughs for the testers and developers. This phase of the project was more like a sanity check, to ensure that the flow that we shaped up is solid and we didn’t want much of loopholes in our project. There was feedback from our teammates and we ensured that we fixed all the flows and after tightening up all the loose ends we proceeded to the next phase. 

atheletory_flow
surveys – 1

 We initially started making low fidelity wireframes on paper, This was the fastest way of doing design. then we proceeded further to make wireframes, We ensured that we made a potential map of where elements will be located on each screen, one of the biggest problem while designing the wireframes were trying to accommodate different analytics and performance graphs of the players in the homepage of the dashboard, we tried our best to keep things minimalistic, While building the wireframes we just concentrated on indicating the shape, size, and position and that its. once we were clear with the low fidelity, We used the sketch to make our high fidelity wireframes this was pretty much a cakewalk, for the high fidelity wireframes we didn’t have much of iterations as we made reiterated many ideas during the sketching our low fidelity wireframes and here we just materialized our ideas. Once the wireframes were clear we started building the wire flows, it is a simple diagram of the wireframes that show the flow of the overall application. 

In the next phase we started building the Visual design but before making the visual design we built the mood board to ensure that we logged the latest trends that we wanted to use in our application, Then we started building the User interface, to start first we built our design system, We used the atomic approach to build our overall components, We ensured that we built the component at the most granular level and then we incorporated them into our Visual design, the irony while building the user interface is this that the visual design and the overall User interface consumes a lot of time. This phase took a lot of our time. after building the visual design we delivered the style guide which explained the clear specifications for all the UI elements and the guidelines which are to be followed while developing the platform.

atheletory_moodboard
atheletory_style guide

The final phase involved a variety of activities ranging from supporting our development team, user testing to get more feedback and record analytics and planning for further updates, it’s in the final phase that we laid our foundations for the mobile application and started researching on the new ideas to build the same solution on mobile.

Artboard – 19

Conclusion

With technology propelling the world forward in unprecedented ways, the Squash sports Industry has not been left behind. It is evident that with sports-related technologies on the rise, there is plenty of data available. A large number of sports platforms are coming up, and these need to give accurate and clear insights into the finer details of the sports because user expectations are increasing. Soon after the successful launch of the dashboard, we started taking steps towards building the mobile application or the players. The businesses associated in this space needed to ensure that the available data is presented to players in their language, in a context that they understand. This is possible with the help of long-standing design principles that are relevant to this specific industry.

Next case study

Previous case study