Driving FSP Athlete Recruitment Growth.

Driving FSP Athlete Recruitment Growth.

Driving FSP Athlete Recruitment Growth.

Designing and developing the platform MaxXposure to streamline the recruiting experience for Ford Sports Performance athletes and college coaches.

Designing and developing the platform MaxXposure to streamline the recruiting experience for Ford Sports Performance athletes and college coaches.

Designing and developing the platform MaxXposure to streamline the recruiting experience for Ford Sports Performance athletes and college coaches.

Overview

Duration

5 Months

My role

Web Design
UX Research
Product Development

team

Just me!

Tools

Figma
Figjam

team

Just me!

Tools

Figma
Figjam

Background

Ford Sports Performance

Ford Sports Performance (FSP) is an athletic training facility based in Seattle, WA, supported by brands such as Adidas, 247Fitness, BodyArmor, and others. FSP's sports program has 500+ elite youth athletes recruited into both high-division colleges and national sport league drafts.


I acquired this freelance project through networking within my professional community. Following initial discussions to understand FSP's objectives, I was commissioned to design and develop MaxXposure: A comprehensive web app for their college football athlete recruitment program.

The Problem

Disorganized athlete profiles hinder college coaches' talent evaluation for recruitment.

Ford Sports Performance faced challenges in effectively showcasing their athletes to college coaches, resulting in missed recruitment opportunities and limiting potential partnerships.

The solution

Designing a web-app that systematizes athlete profiles to improve recruiting experiences.

Developing a centralized athlete hub streamlines the recruitment process, providing college coaches with easy access to comprehensive athlete profiles. This solution not only addressed the issue of disorganization but also maximized athlete visibility and increased opportunities for recruitment.


understanding the problem

How does college athlete recruitment work?

Before beginning this project, I made sure to get a good understanding of what the college athlete recruitment process looked for both a student and recruiter perspective. In short, here is how the recruiting process usually works for athletes at Ford Sports Performance:


#1. Recruiters seek out FSP athletes


As FSP is a well known facility, recruiters directly reach out to them to learn about their athletes.

#2. Recruiters conduct evaluations


After narrowing down the athletes that they are interested in, recruiters will visit to see them in action.

#3. Recruiters send out offer letters!


Once an athlete has been approved, the college will send out a verbal/written offer to seal the deal!

User research

How can recruitment processes be streamlined?

After learning how the recruiting process worked for FSP athletes, I focused on delving deeper into the first step of recruiters seeking out athletes; as that was my client's primary concern. The user research process was primarily informed by interviews with Ford Sports Performance coaches who guide athletes through the recruitment process. These discussions provided key insights into FSP's objectives, user needs, and pain points.


Here are a few of the questions I asked:

  • What are the main challenges you encounter during the athlete recruitment process?

  • What specific information do college coaches look for when evaluating athlete profiles?

  • What features do you believe are essential for an effective athlete recruitment platform?


From my interviews, I gathered 4 key insights regarding the design goals of the project:


#1: Keeping track of and updating athlete data is difficult.

FSP lacks a centralized database specifically for college football recruitment with each athlete's statistics, making it time-consuming when sending over information to recruiters.

#1: Keeping track of and updating athlete data is difficult.

FSP lacks a centralized database specifically for college football recruitment with each athlete's statistics, making it time-consuming when sending over information to recruiters.

#2: Recruiters can't easily identify the best athletes to recruit.

FSP struggles to effectively showcase their top athletes to recruiters from various schools with different skill level preferences (ex. D1, D2, D3 potential).

#3: Third-party athlete platforms don't keep FSP in the loop.

FSP aims to create a platform dedicated to their athletes, bypassing intermediaries and ensuring they remain informed and engaged throughout recruitment.

#4: FSP prioritizes showcasing well-rounded athletes.

The FSP coaches stated that recruiters value athletes who demonstrate strong athletic abilities alongside good academic performance and clear future goals.

Information architecture

Identifying User Flows

Based on my interviews with FSP coaches, it became clear that an athlete recruitment platform like MaxXposure would require three different profile types: Athlete, Coaches, and FSP Administrators. Thus, I created an information architecture diagram in FigJam that highlighted the key user flows; including the popups/page sections containing relevant information. At this time, I also recorded all of the different athlete data that would be displayed on each page after confirming with my client.


Information architecture diagram of the web app screens (made in FigJam).

initial ideas & goals

Ideation & Sketching

Based off of my interviews and the information article of the web app, I realized that there was a LOT of content to organize within the webapp; especially for each of the athlete profiles that individually contained 35+ metrics/personal data points. Thus, I decided that I wanted to utilize a bento-style design approach to organizing each of the dashboards and began sketching out some ideas.

Sketches of the athlete, recruiter, and admin dashboard interfaces.

Sketches of the athlete, recruiter, and admin dashboard interfaces.

Key Goals of the Platform Design


  1. Increase recruiter abilities to easily access a diverse range of athletes.

  2. Create an efficient process for uploading and updating athlete information/statistics.

  3. Easily integrate existing administrative tools and workflows.

style guide

Developing a Custom Brand Identity

Before beginning to prototype the designs, I created a mood-board and consulted with my client on their preferences regarding the visual design of the product. Based off of the key takeaways and requests from that conversation, I developed a style guide with the following features:


  1. Logo: My client's requested logo served as inspiration for the platform's design.

  2. Colors: A background of dark blue shades with bright accent hues to highlight key areas.

  3. Typeface: I utilized four variations of the Inter font family due to its functional simplicity.

The style guide for the visual design of the MaxXposure platform.

The style guide for the visual design of the MaxXposure platform.

lo-fi prototype

Creating The Initial Designs

Based on the style guide I created and my initial sketches, I then created some screens for a lo-fi prototype in Figma, primarily focusing on the general features and layout. After meeting with my client to discuss initial thoughts/feedback, I moved on to creating a higher-fidelity version that incorporated the branding and style.

Initial designs for some of the key screens for the athlete, recruiter, and admin user flows.

Initial designs for some of the key screens for the athlete, recruiter, and admin user flows.

Initial designs for some of the key screens for the athlete, recruiter, and admin user flows.

Usability testing

Observing User Interactions

Following creating my initial prototype for the platform, I conducted a series of iterative usability tests with both my client, as well as current athletes and recruiters. This form of semi-structured testing helped me gain insights into the positive aspects, pain points, and opportunities to improve.


Some of the tasks I asked users to complete:

  • Viewing an athlete's profile

  • Filtering search results

  • Verifying athlete information

  • Adding new events to the calendar

Lots and lots of comments filled with notes!

Lots and lots of comments filled with notes!

Iterations

4 Major Design Improvements

Streamlined Athlete Profile Card


The athlete profile card is used in several different screens to display quick information about each athlete's background.


While the previous design was bold, users struggled to get an athlete's context at a glance.


The redesigned profile card is much more compact, which improves the efficiency of the design. The new tag-style design is adaptable depending on whether the viewer is an athlete or not, and matches the UI of the search filter.

Streamlined Athlete Profile Card


The athlete profile card is used in several different screens to display quick information about each athlete's background.


While the previous design was bold, users struggled to get an athlete's context at a glance.


The redesigned profile card is much more compact, which improves the efficiency of the design. The new tag-style design is adaptable depending on whether the viewer is an athlete or not, and matches the UI of the search filter.


Profile card (before and after).

Reorganized Recruiter Dashboard


The recruiter dashboard saw a lot of changes in terms of reorganizing content and improving visuals in order to make the user experience more efficient. Here are some of the changes I made:


  • Add a suggested athletes feature — Recommendations boost match likelihood

  • Remove profile card — Recruiters found this information unnecessary

  • Update events section — Improving event visibility by moving them to the top and adding images

  • Saved athlete iconography — Adding visual checkmark to quickly save/unsave athletes

Recruiter dashboard (before and after).

Simplified Events Calendar


I initially designed the FSP Events Calendar to have a section to add a new event on the side. However, my client preferred to have a more simple calendar view similar to the familiar style of GCal or Apple Calendar. Now, adding a new event opens up in a popup, where administrators enter and save the relevant information. This simplifies the experience of adding a new event, and provides more visual space to view the calendar events.

Recruiter dashboard (before and after).

Condense Athlete Metrics


Previously, each type of athlete metrics had its individual section on the athlete profile page. However, this was cumbersome to scroll through — users said it felt like a lot of information to digest all at once.


The redesigned tab-style grouping concisely displays the athlete's metrics. Additionally, it's design accommodates adding additional sections of information.

Condense Athlete Metrics


Previously, each type of athlete metrics had its individual section on the athlete profile page. However, this was cumbersome to scroll through — users said it felt like a lot of information to digest all at once.


The redesigned tab-style grouping concisely displays the athlete's metrics. Additionally, it's design accommodates adding additional sections of information.


Athlete metrics display (before and after).

The final designs

Meet MaxXposure!

MaxXposure is a platform created by Ford Sports Performance for college football recruiters and high school student athletes to streamline the process of discovering recruitable athletes. The final platform is currently available through referral only, with intended future expansions.


The link to an interactive prototype of this project can be found here. The design is made out of 3 key user flows — for athletes, recruiters, and administrators.

Recruiter Dash

As a recruiter, view the upcoming FSP events and your saved and suggested athletes.

Athlete Search

Search a database of talented football athletes by class, ranking, position, and more.

Athlete Profile

View essential metrics and information about potential college athlete recruits.

Athlete Dash

View your monthly profile views and notifications from FSP Administration.

Admin Dash

Verify changed athlete profile; view and create new FSP recruiting events.

Events Calendar

Admin can view all FSP events (Google Calendar Integration) and create new events.

Interactive prototype

Check out the Figma prototype!

Freelance project reflection

Things I Learned…

  1. Communicating with clients. This was my first time working on a large-scale freelance project, and it was definitely a learning experience in terms of learning how to best communicate my ideas (lots of slides explaining changes) to someone not in the design field. Being on the same page in terms of feature prioritization and timelines was essential for success.

  2. Iteration, iteration, iteration. The making of this project involved quite a bit of iteration, based on the evolvement of my own design thinking, my clients thoughts, and the feedback I recieved during user testing. Keeping an open mind during these critiques was super essential for developing prototypes that satisfied both my client's needs and my own goals.


  3. Designing business-driven solutions. This is a paid platform for both athletes and recruiters — something I learned to consider while designing. It was important for me to balance both a seamless user experience while providing incentives/perks for staying engaged with the platform, such as promoting exclusive FSP recruiting events and comprehensive athlete information.

Thanks for stopping by! Let's get in touch :)

Thanks for stopping by! Let's get in touch :)

Thanks for stopping by! Let's get in touch :)

Made with <3 in Seattle, WA.