In a previous blog post, Tonsser’s lead designer, Mads Tørk, is talking about “How we’re limiting the off-season with design and improved user experience”. In this sprint we wanted to use some of the football players data, put it into context and present their season highlights.
A central part of the season highlight, was to visualise the football players key stats (relative to their position on the field) as a player card, in a central position, and make it shareable.
Before starting the design process, we had a short alignment meeting with the product managers. We made sure that the brief we set up was in lign with the overall “spec” for the sprint. We ended up with the following brief for the player shield cards:
The player shield is the player’s profile picture (with position and club visible) and four data points:
- Matches played count — blue circle around is the percentage of that team’s matches played.
- Votes count — yellow circle is percentage of total votes given on the team that the player received
- Achievements — position specific: Attackers/Midfielders: Goals + assists count. Defenders/Goalkeepers: The count is either: Clean sheets or Goals + assists — Green circle is percentage of team’s total goal
- Show Season Rating average below.
- The shield should be shareable
The Design Process
The Player Card have been a successful concept for Tonsser earlier on, but never utilised as an in app concept.. So we had to create it from the button up, to make it an integrated part of the app.
1. Drawing up the design
We took the different mock-ups & sketches and drew them up in Illustrator. Illustrator is still superior, when it comes to securing the best result if drawing complex shapes. We finalised the chosen player card shield and exported it to sketch.
2. Finalising the design
In sketch we added a subtle gradient and a very soft shadow to the shield + the option of adding an overlay color, if we wanted to highlight a “player of the Season” or a player on “team the season” etc.
We wanted the card to be a container for the stats, and not take to much attention on it’s own. In most cases, the shield is therefore black on black, so that it fades in with the background.
3. Handover the design
We used Zeplin’s Sketch plugin, to handover the design to the development teams (Android & iOS). Fast and easy. No need to create new files just for the handover.
Normally we would mock up the transitions and animations (blogpost on “After Effect -> Lottie” coming up), but in this case, we reused previous animations. We made sure to explain this through the comments in Zeplin.
Both our Android and iOS teams were able to export the assets and match the design from Zeplin, damn near a 100% in the first go! Check the video below to see the result from our iOS developers first “draft”