Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Nemo
Sr. Product Designer
Building the website posed two key challenges:
(1) Bringing together a variety of unique and iconic brands under one cohesive framework without compromising their individual identities or the overall user experience.
(2) Designing a flexible template that required minimal effort for content updates and new product launches.
The solution to building a cohesive yet multi-dimensional website was focusing on modular design. By creating flexible, reusable components that could adapt in color and content, we ensured that each brand could express its unique identity while maintaining a unified “Mattel” aesthetic across the entire site.
In our UX process, we explored and iterated on various components while defining the core user flow and essential pages. With over 100 potential pages, we streamlined the design process by identifying key templates and reusable modules that could be mixed and matched to meet the needs of multiple brands without sacrificing flexibility or user experience.
01
Our design process involved exploring various levels of customization, from fonts and colors to brand-specific elements. We considered nuances like incorporating unique touches for certain brands—such as race track elements for Hot Wheels or whimsical details for Barbie—while ensuring the overall design remained scalable and cohesive. The goal was to strike a balance between distinct brand identities and a streamlined, visually appealing user experience across the site.
02
We took the design rules and components we had established and systematically applied them to build out all the key pages, ensuring consistency and flexibility as we brought the entire site to life.
03
Scope of Work
We explored multiple component combinations—ranging from squares to circles, back-to-back layouts, carousels, grids, and banners. After iterating through various options, we finalized a structure and populated the wireframes with content from key brands, showcasing how each could maintain its individuality within the cohesive framework.
We initially experimented with having each brand use its own font system for key UI elements, but it ended up feeling too cluttered. Now, brand-specific fonts are reserved for image-based sections, like headers, while elements such as category cards and sections use Mattel’s brand fonts paired with the individual brand colors.
We settled on having a multi-layered navigation. You can see how that displayed on mobile and web.
Our site structure involved multiple navigation paths, including by general toy categories like Baby Toys and Cars, which group different brands together. To simplify the user experience, we developed an advanced filtering and navigation system.
Large circular cards were used to break down main categories into sub-categories, while dropdown filters (collapsed by default) allowed users to search by age, price, brand, theme, and more.
Our last focus was on pages like the Playroom, Activities, and Gift Guides.
Jeff Bartel & Mike Schwoebel, Creative Directors; Justin Lucero, Art Director, Phoebe Chin, Senior UI Designer, Nic Vinsonhaler, Client Services Director, Jenny Lackey, Client Services Director
Still here? Check out the live site.
2024 | Victoria Gunell
