Design process—from brief to handover

Tl;dr — Brief → Illustrator→ Sketch → Zeplin → Handoff

A sneak peek behind the curtains of the workflow and process from brief to product in the Tonsser Design team.

The Background

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.

The Brief

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.

1. Drawing up the final player shield in illustrator from our various sketches.

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.

2. Iterating and finalising the design in sketch and preparing assets.

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.

3. Handing over the design with Zeplin and explaining the transitions and animation to the dev-team through comments.

The Result

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”

Tonsser’s Mobile lead, Philip Engberg, is using the Design handover from Zeplin.

The final result on client side

Hope you enjoyed the read. For more rants on design in the future, follow us on medium or reach out to the Tonsser Design team directly.

Also — we’re hiring! (Design Lead & UX/UI Designer)