FIFA World Cup Brazil 2014

Role
UX Designer Principal

Period
2013-2014

Reference
FIFA.com currently online


Client 

FIFA – International Federation of Association Football, Zurich (CH)

Context

For the main FIFA event, the International Federation of Association Football required a brand new responsive website, with the aim of formalizing the position of worldwide official voice of football. 

Challenge 

In just 10 months FIFA wanted a brand new design, modern and functional, based on a mobile-first approach. The responsive and multilanguage website for the 2014 event had to be the base of the redesign of the entire FIFA website. The website integrated several third parties (mainly sponsors and partner) applications, plus the FIFA fully live statistical data system, several live blogs during live matches, all integrated in a unique sport-specific content management system. 

Solution 

A robust, wide Design System was the backbone of the about 17.000 pages of the event website. 

As the first step, beside benchmark analysis and best-practice explorations in both the same and different fields, a huge content architecture map was designed and discussed, as base of a navigation reorganisation and rationalisation. 

Then, a number of wireframes and prototypes was prepared for discussion with stakeholders (Federations, sponsors) and user testing, sprint after sprint. In parallel, visual designers defined the UI and compiled the UI design System. 

During the development and UAT process, with AGILE approach, a complete assistance and support was granted, aside the quality assurance and final approval phase. 

The Design System and the navigation pattern was then ready for the FIFA main website redesign. 

Acknowledgements

Webby Awards 2015 – FIFA World Cup Brazil 2014 Official Website – Official Honoree, Sport Website 2015

Numbers 

10 months from assessment workshop in Zurich, to deploy on production

150k unique visitors in the event period (31 days) (source: FIFA)

8 designers team 

18 developers AGILE team

Video

Official promo video

Gallery