A modern solution for professional soccer players seeking to connect with agents to help them line up their next career move. Designed every step of the way with the players' needs top of mind.
Playing soccer (or, more appropriately, football) was always a serious part of my life up until I began school at Stanford in 2017. In December 2019, I decided to take a deep-dive into the daily lives of players who've prolonged their careers longer that I have, be it into the professional scene or at a college level. I sought to design for them a solution (in the form of a mobile app) to a novel painpoint, whatever that may be.
Uncover an underlying painpoint for my users
Analyze the current user journey and its touchpoints around which to design
Consolidate insights, conceptualize a solution
Prototype and iterate based on insights + design goals
Interviewing users, honing in on a need, conducting domain research, constructing user personas, deciding on a "How Might We" statement.
I reached out to several players, including the captain of Stanford's Mens varsity soccer team and a goalkeeper with plans to play professionally in Germany.
Within my interviews, I sought to get into the headspace of a high-level player, empathizing with the day-to-day drudgeries, frustrations, and highlights that come with their trade.
My users made sure to mention the occasionally overlooked importance of injury prevention. With such a short regular season, players could miss most of it just because of a preventable injury.
One captain mentioned how he needs to coordinate practice times, pre-game meet-ups, and even team dinners. This often seemed tedious, as there were no patterns or set schedules for the team to follow.
Once players reach the D1 level, film becomes a large part of the experience. I wondered if there was potential for a product to help expedite the process of getting valuable film clips to players, rather than relying on team-meetings when all players are present.
For players who aspire to play professionally, there's seemingly no universal way to get your foot in the door other than, that is, through the guidance and advocacy of an agent.
With my potential problem space in mind, I reached back out to contacts who would have personal knowledge of and (hopefully) experience with agents. I also made sure to pore over articles and documents online.
– Eli, goalkeeper (D.C. United)
In the soccer world, players are actually just an introduction away from many many different teams and leagues across the globe.
– Logan, Stanford captain
See Eli's quote above!
Many agents won't even talk to a player until they've received good word from a mutual connection.
Just like players have specific career goals, agents too have specific clientelle that they specialize in serving. Players need to provide a variety of information (CV, highlight reel, desired market, teams, etc.) to match with a fitting agent.
In an industry where fraud and exploitation are not without concern, players need to do their homework before they make anything official with an agent.
Gary's an ambitious player playing for a competitive D1 college. After a solid first year, he has realized that college isn't for him. Gary seeks to leverage his network to land a gig in Europe.
Not happy with college ball in general, but also not sure how to land a tryout in Europe.
Reaches out to alumni contacts who can't help, decides to contact former teammates instead.
Gets frustrated with all the emails, phone calls, and waiting.
Finally hears from an agent in Sweden.
After a poor tryout, has to wait for many more months for another lead and continue college.
Victor is a seasoned player playing on a top team in Spain. However, he's been the second string goalie for the last 3 years. He's eager, in his final years as a pro, to freshen things up and move to a more exotic league in South America where his playing time will be guaranteed.
Not getting the minutes he wants, starts to feel depressed.
Sets his sights on playing in a South American league.
Struggles to find any agents that he has confidence in with specialization that region.
Forced to rely on his trusted, but limited connections from his current agent.
Gets placed instead in a lower-league team still in Spain.
To launch my brainstorming and ideation process, I consolidated my past design work into one cohesive statement.
Scattered brainstorming, researching UI patterns, crafting a generic user flow, information architecture, and app screen sketches.
So what did I come up with?
input bullets here of my key takeaways
Inspired by my Veteran Victor persona, I wanted to allow users to tailore their experience to their specific career goals. I explored methods to emphasize a user's goals as a result.
I sketched through various ways to cater to both agents and players within the same application, as well as what each party desired in a business relationship.
The idea of applying came the operations of agenices. This took empathy with the agent – i.e., it would be unreasonable to allow any interested player to be able to directly message a high-profile agent.
More than just applying a content-centered approach towards creating reationships, I knew I needed to bring to the forefront the characteristics of each player and agent most relevant to eachother's interests.
Exploring what it means to allow players to "leverage their network" – viewing their network, searching through players as well as agents.
How would these ideas play out on a mobile application? I needed to do more investigating.
I first needed to figure out how (or if) I was going to attend to the interests of both the players and the agents.
There were two key complications to my user bases.
While players seek reputable agents to help lock in their next big transfer, agents seek money and sometimes even notoriety from their next client.
The relationship between players and agents is more complicated than a dating relationship – players can have more than one agent, while agents can have more than one client.
I found inspiration in Uber's two app approach, in part because they differentiate between to contrasting parties – the drivers and the riders.
Knowing the importance of trust and reputability when choosing an agent to apply to, I sought a process that provides the user with the time and information they need to make a decision that they are confident in.
Airbnb, a company that makes "designing for trust" an integral facet of their design approach, implements a like-minded user flow for reserving from a host that would be extremely relevant to this endeavor.
I asked myself – what is the best way to extract the necessary information (i.e., team played for, CV, highlight reel) from users without scaring them off during onboarding?
Among dating apps that I walked through, Hinge required the most information from users, yet did so in one of the most eloquent, painless manners among its competitors.
I needed a way for users to not only leverage their network, but to know how to do so in the first place.
Linkedin was a reliable source of inspiration, wherein users can view and analyze their network to see where introductions can be made and new relationships might be formed.
I had to get my thoughts out on paper first.
At this point, here's how I envisioned a user using Agyle in a (very simplified) sequential order.
User fills out most of the information prompted during set-up.
User refines their profile to their liking, completing any fields still required to access the app's core features.
User builds up their network through connections.
User searches for a compatible agent and applies upon finding one.
Upon the application being accepted, the agent reaches out to the user.
Some key decisions that I made.
A pure extension of my domain research, I incorporated an optional "choose a reference" portion of the application flow, where a user chooses from their mutual connections with the agent whom they are applying to.
In an industry where what players you know is almost as important as what agents you have, I wanted to reflect that in the app itself. For this reason, when browsing, users can quickly alternate between agents and players.
At this stage, I still hadn't decided: what content will the home screen have?
I decided to make my "Explore" content the first thing users see upon opening the app. This an effort to make Agyle content-centered: to place the *primary* user flow that users most care about to the forefront – finding the agents themselves.
Using the iOS Human Interface Guidelines, I evaluated several app architecture strategies.
When using Agyle, the user will be alternating between flows 2-5 (enumerated above), but in practice they will usually not be done sequentially in the manner that my simplified ordering suggests. Thus, users will need to be able to switch contexts easily. For these reasons, flat navigation woud be the primary organization strategy for Agyle.
However, within my Explore category, I envisioned my explore + apply primary user flow with several sequential steps (search, choose, consider, add reference, review profile, apply). In order to optimize for this flow, to guide users through it, that required an architecture strategy to reflect its sequential nature. Similar to Airbnb's reservation flow, hierarchical navigation would be required here, at least upon initiating the application process.
Some key decisions that I made.
As I learned in my domain research, other players and agents serve different purposes in landing a new contract, with the former essentially being a means to get an introduction/referral to the latter. Therefore, rather making my messaging category a mixed list of agents and players, I categorized/separated the two.
Empathizing with my Young Gun Gary persona, I envisioned a situation in which Gary decides he wants to finish college ball while still keeping tabs on a move to Europe post-graduation. Gary would find value in the ability to "save" agent (or player) profiles that he runs across while browsing – a list that he can always return to.
Some key developments (utilizing Hinge onboarding flow as inspiration).
To avoid dissuading users during a lengthy onboarding flow, users are able to skip through the rest of the onboarding if they so choose.
If users fail to fill out essential items for their profile, they are alerted that they need to finish their profile to use Agyle.
Some key developments (utilizing Linkedin as a source of inspiration).
This organization prioritizes growing a user's network (New is the first tab open), while providing 1-click access to a user's current network and saved profiles. Separating these in this way allows the user to easily form a mental model of their pending, current, and future connections.
Messages can be labeled ("Reference for Jack Smith", "Application Approved") for users to quickly understand the context surrounding their conversation. Because I'd already used tabs to differentiate between players and agents in this Messages category (see "The refined IA" section), I didn't want to further categorize the messages, so labeling was a handy solution.
Some key developments (utlizing Airbnb reservation flow as a source of inspiration).
When the user searches for a specific profile or region, they can choose to continue previous searches as well.
The immediate profiles that a user can scroll through are the agent's "based on their goals". I.e., if a player wants to play in Germany, agent's who specialize in German leagues occupy that real estate.
Devising a design system, designing high-resolution mockups and final prototype in Adobe Xd,
When choosing an accent for color, I wanted to choose a color that conveyed a sense of reliability and trustworthiness. As I had learned in my design research, some players are weary when entering the agency industry for fear of fraud and exploitation. For these reasons, a chose blue, a color known to evoke emotions of trust.
I allocated extra time to decide how to organize my visual hierarchy for the large and small card components used primarily in my primary explore user flow. Calling upon my domain research and design goals, I came up with a ranked list of information items to use in my card designs.
This status determines everything about a player's mental model of that profile, and therefore should always be at the forefront of the UI, visually.
Because Agyle is centered around users' goals (i.e., where they want to play), an agent's alignment, or lack thereof, with those goals is effectively make-or-break for a player.
Because trust is such a big factor of importance for players, conveying an agent's reputability needed to come to the forefront once a user deemed them as a potential fit.
While one could argue that pay is make-or-break for a user choosing an agent, I wanted to optimize for trust, and thus pay cut became my fourth information item in terms of priority.
Without further ado...
Users are guided through a set-up phase complete with value proposition and skippable steps... should the user skip through on-boarding, they must complete their profile within the app to use its features.
The primary user flow, users can search through agents, and upon choosing an agent, they can apply with a reference!
Here's what the final Agyle design looks like in the hands of a user!