Player profile App design

A player profile page in the app.

Client: Mingle Sport
Date: 2023
Services: UI-design

Problem

Mingle Sport is a grassroots sports app that allows players to track their statistics and performance. Outside of a matchfeed (liveblog of the football match) itself users are unable to see an overview of their statistics & player card.

Without an overview of their statistics the players can’t use this data as a way to improve their performance. It can be frustrating for users even on a social aspect, to not being able to compare their stats with other players out of the team or even people they follow to see how they measure up.

My Role

I was the lead ui-designer in this project and worked together with the UX-designer in this project to work out the flow of the user.

Project

The goal for this project was to give the user an overview of all their statistics, media & achievements and have a visual appealing player card that they can share with others.

We achieved this by making the Player Card the first thing the player & followers will see. It has the look & feel of a real sports card, showing the players picture with their name, team & field position. The player card has multiple different versions.

By adding a overview of all their statistics the player can quickly scan through their data and compare their stats with others by a link to the leaderboard.

At all of the matches the match reporters can add media, this media is shown in a tab on the matchfeed but also easily accessible on the profile itself, which will also link to the matchfeed.

Player Card

The card can be upgraded to a MVP, Workhorse or Playermaker shiny card when the player get’s voted for as Player of the Match after a match. This will ad a visual badge & border to their card.

Next to that, if the player is in multiple teams or clubs, they will see individual cards for each team they are in with their individual field positions.

After a football season has ended the cards will be archived with the final statistics. The player can scroll through their player cards to see the different versions.

Media

At all of the matches the match reporters can add media, this media is shown in a tab on the matchfeed but also easily accessible on the profile itself. Here the player will see all the media from their team. They can scroll through the media, cheer on videos & comment of it.

Statistics

There are different blocks on the profile page for the different statistics, media & achievements the player has.

The main statistics are Player stats & Team stats. Both show relevant information over the player & team.

The player statistics are total matches they played, goals they scored, assists they made and the votes they have received on the Player of the match voting. These will show the latest stat but also show more data about if they improved or if their stats went down. We do this by showing a arrow up or down. Lastly the player stats show the percentage in comparison to the whole team.

This goes the same for the team stats, it shows an overview of the all the matches the team players, how many they won, lost or draw, all the goals made & conceded and the voted on team performance. These team stats link to a more in dept profile page dedicated the team.

Achievements

The user can achieve badges throughout the app by completing tasks. The badges they completed & are currently working on are shown on the profile as well. Making the grey badge gold when they completed all the tasks from that achievement. By using achievements, the player will be motivated to completed basic tasks like, scheduling a match or adding a profile picture, to get the most out of the app.