MATTEL PRODUCT PAGES

Low-Code Web Design | 2022

[CONTEXT]   |   [SOLUTION]   |   [UI]   |   [CREDITS]

CONTEXT

Mattel, Inc. is the creator of some of the most iconic toys in history, as well as a company in a perpetual search for new market niches in which to offer its own products or those developed in collaboration with other companies, when a consumer audience eludes their scope. That is why, after focusing on the gaming niche, Mattel relied on Krom Gaming to develop a collection of peripherals branded with two of its flagship brands: Hot Wheels and Barbie.

SOLUTION

A strategy of marketing comms was devised to help advertising and promoting the offline and online selling of this collection of products. To create a landing page for each product was a crucial task I was entrusted by Mattel Iberia Marketing Department.

UI CONCEPT

Following the brand guidelines I set for Krom Gaming's Hot Wheels and Barbie licensed products, I created a landing page for each product. The UI/UX concept applied is simple: turning the web interface into a window where each product's design and its most outstanding functionalities are shown with eye-catching detail.

UI DESIGN

These landing pages were created using the tools provided by a custom made web CMS. Parallax scroll, hotspots and alternating between pictures of isolated product vs. product placed in a context of use were the main techniques to build that visual narrative.

MATTEL | Khali landing page | Desktop

MATTEL | Khali landing page | Mobile

MATTEL | Kandy landing page | Mobile

MATTEL | Kandy landing page | Desktop

MATTEL | Kanyon landing page | Desktop

MATTEL | Kanyon landing page | Mobile

MATTEL | Key Pro landing page | Mobile

MATTEL | Key Pro landing page | Desktop

MATTEL | Kustom landing page | Desktop

MATTEL | Kustom landing page | Mobile

PROJECT
CREDITS

CLIENT
International Mattel, Barbie, Hot Wheels
Spain Krom Gaming, Atlas Informática
STAFF
UI/UX design Dan Algarra
Web development José Ramón Gaitán, Antonio Baena
Product pages design Alexis Cruzado
TOOLS
Web design Adobe Photoshop | Figma
Web development Bootstrap | Visual Studio | HTML5 | CSS3 | JavaScript
Product pages design Adobe Photoshop | Bootstrap | HTML5 | CSS3
Volver arriba