FIFA x Frito Lays Promotional Game Website

Matthew Mauricio

0

Graphic Designer

Product Designer

UI Designer

Adobe Illustrator

Adobe Photoshop

Figma

Task

Design a promotional sports game website for FIFA and the FIFA World Cup Qatar 2022. The game itself represents a remarkable technological achievement, pushing the limits of advertising and showcasing the possibilities within the digital marketing realm. I collaborated with companies such as MODLO, Frito Lays, and Vatom to design the user interface for the website, game, and promotional content.

My Role

I served as the lead UX/UI designer, working in collaboration with the creative directors of MODLO, Frito Lays, and Vatom. My responsibilities included designing all front-end interfaces, facilitating design decisions, and contributing to the branding of the website app. Additionally, I played a key role in developing and optimizing web page layouts and functionality to enhance user growth and retention rates for product shipment.

Users & Audience

Our product targets users from all over the world who have an interest in the FIFA World Cup. Users were able to access our website by purchasing a bag of any Frito Lays brand chips, which are widely available for purchase in almost every store worldwide where snacks are sold.

Branding / Design

I collaborated closely with the directors from MODLO and Frito Lay to establish a dynamic branding approach centered around a dark-themed, futuristic soccer concept. Our objective was to create a captivating experience that would generate excitement and engagement for users on our website. Through our platform, users had the chance to win an array of enticing prizes, including complimentary snacks, authentic jerseys, premium soccer balls, stylish bags, and even coveted tickets to the 2022 FIFA World Cup.​​​​​​​

Wireframe

What initially began as an idea proposed by the directors, I was able to bring everyone's vision to life with the help of my UI expertise. We commenced by creating mood boards using inputs from the entire team and proceeded to determine key elements such as colors, fonts, and the overall look and feel. Once we had a solid grasp of the website's theme, I swiftly generated the initial wireframes, which served as the foundation for the initial prototypes. Upon completing the main screens, I meticulously added all the finer details using the atomic design methodology. This encompassed addressing use cases, edge cases, type fields, information implementation, information architecture, menu layout, and more. Our primary objective was to create a website that was visually clean, engaging, and exuded an exciting video game-like atmosphere.​​​​​​​

Prototype

After investing countless hours into crafting the initial screens of our prototype, I utilized Figma to develop a fully functional website prototype. This involved connecting each screen with numerous interactions and animations to ensure seamless transitions. Our primary focus was to make profile setup intuitive and efficient, enabling users to quickly immerse themselves in the game's action. To enhance user engagement, I incorporated splash screens to signify task completion and reward users for accomplishing major milestones within the game. By completing specific tasks, users could earn "credits" that could be redeemed for exclusive prizes, including shirts, soccer balls, soccer jerseys, chip coupons, water bottles, and even tickets to attend the FIFA 2022 World Cup.​​​​​​​

Product Shipment

In October 2022, the product was officially launched, just before the FIFA 2022 World Cup. Users from all around the globe promptly signed up, and I was astonished to witness the widespread accessibility of our product through the presence of our product QR code on chip bags worldwide. I am incredibly grateful for the opportunity to work on a product that reached a global audience, and it is immensely rewarding to see users successfully engaging with it.
Like this project
0

Posted Apr 29, 2024

Collaborated with FIFA x FritoLays x MODLO to design a website game

Likes

0

Views

4

Tags

Graphic Designer

Product Designer

UI Designer

Adobe Illustrator

Adobe Photoshop

Figma