top of page

DESIGNING A PLAYER PERFORMANCE ANALYSIS & MANAGEMENT TOOL

Company: New York Mets

Team: Performance Technology

Colors & typography

As the first part of the UI design process, I wanted to establish the base of the design system and get alignment from the team on colors and typography.​

  • We chose to move forward with the "alternate" Mets color scheme. The dark blue and gray are more neutral than the "primary" Mets colors, which I believed to be best for this project since we're building a data-heavy analytics dashboard, which I anticipated would be very busy and utilize a lot of additional colors.

  • For typography, we chose Lato as the typeface since it is very legible across all devices and is compact. This is important for this product because baseball information requires large volumes of data to fit in a single view and this typeface will enable us to do so.

mets_design system.png

Business problem

The sports science, biomechanics, and performance departments for the New York Mets use a highly fragmented suite of tools to aid in decision-making of player health and performance, which results in a lot of manual processes and operational burden for staff as well as underutilization of the plethora of player data that is collected. There is a strong need to modernize the infrastructure and tooling for these departments into centralized, intuitive software tools. In the end, this will increase the efficiency and efficacy of New York Mets staff to gather player insights and make better decisions that will lead to improved player performance and health.

Solution

Build out a single, robust performance analysis and management web app to make it easier for the team to access player information, gather player insights, and conduct all of the operational tasks for the sports science, biomechanics, and performance departments. This app will be used by a wide range of users, including players, coaches, medical staff, sports scientists, and the front office, and needs to be responsive as this tooling will need to be used on web, tablet, and mobile devices.

Tools

  • Figma

  • Sketch

  • Framer

  • Zeplin

  • Asana

  • Jira

users-01.png

Team

  • 1 product designer

  • 1 department director

  • 8 developers

  • 2 data engineers

  • 1 data scientist

  • 1 sports scientist

  • 1 biomechanist

laptop-02.png

My role

  • UX/UI design

  • Design system

  • UX research

  • Content strategy

  • Product strategy

  • Performance analysis

calendar-date.png

Timeline

  • Overall: 10 months

  • Discovery & research: 2 months

  • Design & testing: 7 months

Understand & define

Defining problem, solution, & goals

User problem

​New York Mets health and performance staff aren't able to effectively utilize the player data being collected and are missing out on important insights because of the highly-segmented suite of tools used to collect this information. Current processes and insights require staff to undertake manual, non-standardized, time-consuming tasks, leading to limited insights of questionable accuracy.

Solution

​Build an in-house, easy-to-use, single software solution to house all player health and performance data, handle all relevant staff-related operations, and provide insights to help staff make better decisions related to player health and performance.

Goal

​Create a tool that will help staff effectively and efficiently utilize player health and performance data to make decisions that will prevent injuries, speed up recovery, and improve player performance - ultimately, leading to increased ROI and team performance.

Performance metrics

​Total number of player injury days, recovery time, performance (ie. pitch speed or bat speed), player outcomes (ie. ERA or Batting Avg), team W/L record, time required by staff to complete operational tasks, etc.

Design system

Initial user research

I spent my first month on-site at Citi Field, interviewing and shadowing staff to learn as much as I could about player health and performance, current processes, as well as user needs and pain points.

Users & user characteristics

  • Coaches, players, biomechanists, sports scientists, medical staff, front office

  • A very diverse user base with vastly different knowledge levels, skill sets, needs, and goals

  • Users are spread out across multiple countries, speak various languages, and have varying access to resources

  • Wide range in ages, professional experience and technical savvy, from new grads in their 20s to experienced coaches, specialists, and execs who are 60+ years old.

mets_defining problem.png
Creating local & global components

As a next step, I started crafting global components like buttons, input fields, and tooltips. To ensure consistency with other New York Mets baseball systems and engineering familiarity, I used the Ant Design System as the inspiration for my design system.

​As I moved further along with the project, I continued to add to and adjust the design system and began to create custom, local components as needed when specific, repeated design patterns arose.

mets_components.png

Product development process

Team operations, design responsibilities, & my design process

To deliver a fully-functioning, 0 to 1 product by Spring Training and the 2024 Season (T-8 months), our team operated under a weekly release schedule and bi-weekly sprints for new features. My design sprints involved user interviews, competitive analyses, mapping out existing workflows, brainstorming sessions, design workshops, getting alignment on design direction, user testing, and engineering handoff. Additionally, I utilized Fridays as a designated day to conduct Design QA to ensure the production build matched designs and make improvements to existing features based on user feedback.

Understand & define

Ideate

Align on design direction

Test, iterate, & finalize designs

Eng handoff & design QA

Post-launch analysis & iteration

01

Understand & define

02

Ideate & align

03

Design

04

Test & iterate

05

Eng handoff & QA

06

Post-launch analysis

Process (6).png
Process8.png

Accessibility

Color blind & multi-language support

Through the requirements-gathering phase, I identified two high-priority accessibility issues that the team needed to address during development so that all of our intended users could fully adopt our product.

  1. We implemented a color-blind toggle that enables high-contrast, easier-to-distinguish colors for color blind users and also utilized non-color, visual cues like symbols when possible.

  2. We implemented a Spanish translation toggle to allow the players, coaches, scouts, and other staff that the Mets have in the Dominican Republic, Mexico, and other Spanish-speaking countries to easily use and comprehend the dashboard.

I established processes with the product and engineering partners to ensure that these accessibility needs were addressed for all new features and launches.

portfolio_accessibility.png

User-friendly features

User feedback channel

Before the launch of our first feature, I strongly advocated for and convinced the team to implement a user feedback channel. With the speed at which the team was developing features and the assumptions we had to make to meet deadlines, I knew that having a way for users to easily report issues and provide feedback would be vital for our team's ability to create an effective product that users enjoy using.

portfolio_userfeedback channel.png
Player data privacy & protection

Along with different permissions for staff at different locations and levels, to help limit unnecessary eyes on player data, I implemented a privacy toggle that allows the user to turn on/off the visibility of data for other players who are not the focus of the current session.

portfolio_playerdataprotectionandprivacy.png
Creating scalable designs to support all devices

Early on during my research, I realized that the environment in which this product would be used can vary greatly depending on the user, ranging from people working from home on their desktops to coaches in the dugout on an iPad during games, to staff on the go on their phones in various countries. To account for all these different scenarios, in my design process I ensured that my designs were scalable across all screen sizes - mobile, tablet, and desktop.

Tooltips, error handling, & data validation

This performance dashboard houses countless complex metrics and highly specialized information, so to ensure that all users can understand what they are seeing and doing, including those who are less technical or new to the job, as part of my feature development I always made sure to include information icons, tooltips, data validation, and clear error handling whenever possible to help the user understand what they are seeing, why they are seeing it, and, if necessary, what steps they need to take to get the result they desire.

portfolio_tooltipsdatavalidatoinerrorhandling.png

Responsive web design

Product launch & highlights

After 9 months of research, ideation, design, development, testing, & iteration, we launched a fully functional, 0 to 1 product to the New York Mets Organization ready to be used for Spring Training and the 2024 Season. Below are some of the product highlights...

Finished designs

Flexible, customizable designs to meet the needs of all users

From front-office executives to medical staff to players, the needs of different users and the information they're interested in varies greatly. To help ensure that our product serves all users well, many aspects of the dashboard, like metrics shown, players selected, and report creation, are customizable. Additionally, to reduce the number of clicks and time required by users, when appropriate, the last used settings are saved to the user and appear again when the user refreshes or re-logs into the site.

portfolio_flexiblecustomizabledesignstomeettheneedsofallusers.png