Recreational Soccer
The Challenge
“SOCCER LINEUP MANAGER” is a recreational youth soccer coaching app developed for iPad. To update and expand the existing UX/UI for the current recreational youth soccer coaching application.
Goal
To continue supporting recreational soccer coaches in the tracking and scheduling of team players’ positions and total play time, in line with the “everyone plays” approach to gameplay.
Role
User researcher, UX designer
Tools
Figma, Miro, Maze
Team
Product owner, developer, UX designers (3)
Timeline
3 weeks
Discover
Understanding our users.
We interviewed 9 users. All users were soccer coaches, coaching recreational youth soccer teams of different age groups. Users provided artifacts - like spreadsheets - they are using for manual tracking, which was very useful in understanding the requirements.
Key Insights
Users wants to use this app for recreational soccer teams and not for competitive sports
Provide ability to track player positions – how many games / quarters they have played in each position
Provide ability to create and select team formations and finalize the lineup. Which they would like to do using the historical data on player positions to ensure an equitable approach
There were also other requirements on tracking absence and view player statistics etc.
Comparative analysis
We conducted feature analysis with multiple similar apps in the market. We evaluated all the key features across the apps, which helped us understand where our app stands.
Takeaways
Soccer Line Manager is designed for recreational soccer where it stands out with features compare lineup position in the games, tracks player time per position per game and per season.
The apps selected for analysis were Smart coach, Soccer coach, Soccer team, Soccer dad and Sub time. All apps had features relevant to competitive soccer. Apps also captured detailed player statistics, extensive game logs (to log assists, passes) and coaching manuals etc...,
Define
Affinity mapping
Based on inputs from the user interviews, we were able to generate trends.
key “I” statements
I prioritize equal play time for all the positions for my team.
I am often asked by my players about what positions they are playing and, for details about their game
I mostly try to rotate players through all the positions for games.
Persona
Using our research findings, we crafted a persona to help us sympathize with our user groups and prioritize goals based on their needs.
User Flows
Our user flow shows how a new player is added to the team, rotating players depending on the position played and how to choose formation or add new formation.
Problem statement
“As a coach, Sam needs an easy way to track positions and playtime for his youth recreational soccer team, so that the players have an equal opportunity to participate and build skills”..
Design
Sketches
We individually drew sketches for Soccer lineup manager “Game page” that’s includes Roaster and soccer field view, “Add new player” and “player stats” screens during our design studio session and then discussed what design elements are user friendly and potentially incorporated into our final design.
Wireframes
First we started by creating vertical screens for iPad. As per the requirements the roster should be scrollable to view all the players and positions during the current game, the game screen was very challenging to us. So, we created wireframes to check how roster and field view would look based on our design thinking. Later, we did multiple iterations on game, stats, schedule screens to get to the final one and ran a usability test through maze, to see how users interact with the screens.
Usability Test
We conducted 2 remote, unmoderated usability tests using Maze.
First test – 21 participants completed the test.
Second test – 12 participants completed the test.
When we conducted our usability testing, we had 4 tasks to be completed :
User should add “New player”.
User should add ”New game”.
User should change lineup and change player in goalkeeper position.
User should “Set availability” for players.
Tasks assigned
Dora, a new player, has signed up for your team! How would you make a new player profile?
You have an upcoming soccer match against the Cannons, on September 29. How would you add this to the app?
It looks like Dora is playing goalkeeper for two lineups in a row. How would you remove her from the second lineup, so another kid can play instead?
You want to add Barbara as new goalkeeper for this lineup, return to the game and set availability for Barbara. How would you do this?
Navigation Tasks
Add a new player
87.0% average success rate
5.8 sec average task duration
Add new soccer match
81.8% average success rate
5 sec average task duration
Game page interactions
Change a lineup
54.4% average success rate
43.3% miss click rate
12.0 sec average task duration
Change goalkeeper
77.3% average success rate
30.5% miss click rate
11.2 sec average task duration
Feedback that we received from usability testing are:
Before seeing the edit pencil, I tried to drag Dora to the bench.
Just wanted to drag players into positions.
I thought I would be able to drag and drop players from their field positions - but that didn't work.
I think the ability to drag and drop Dora's icon off the screen where the other number icons are and then being able to drag and drop another player’s number in there.
I did not see the edit button for a while. I thought I can just drag someone else in Dora's place.
I really wanted to grab her token and just slide her to the bench. Or - if I grabbed a different player currently on the bench and slid them towards the goalie position on the field.
We discovered that swipe able interactions do not always test well on Maze due to limitations of the software. Additionally, iPad formats do not always test as well as iPhone with Maze. Maze allows people to run the test either on their computer, or on a mobile device, but people reported challenges using it on the mobile device. Users also reported occasional program crashes during the test, which might have affected results.
Develop
Recreational Soccer Manager
This app helps manage recreational soccer games by allowing users to view past and current games, add new games, and create teams. Players can be added, their availability tracked, and bench swaps managed. Users can also monitor game status and choose different formations based on the match.
Team Performance Overview
Provides comprehensive information on soccer team and game stats. It tracks player attendance weekly throughout the season, total time spent in positions, games played, lineups, and match outcomes including wins, losses, and ties. Game stats also include details of matches from previous seasons
Prototype
Our usability testing gave us insightful findings that would guide us to design and implement iterations to our lo-fi prototype and convert that into hi-fi prototype.
Conclusion
The final design reflected the features and insights that we got through user interviews. Keeping in mind that our user focuses on recreational soccer, the app design helps them to track player positions, time played in each position. They will be able to view the game stats and player stats which will help them to create equal play time for each player and able to rotate the player positions.
iPhone screens
As requested by our client, we also developed few screens for iPhone, to see how the screen with game field looks like and how intuitive it would be when seen on the field in sun light to see the contrast colors.
Home screen
Roaster screen
Game field overlay with lineups
Full view of game filed