Designing Mattel's eCommerce Website


Mattel is a toy-manufacturing giant, and the creator of brands like Hot Wheels, Barbie, and Thomas.


eCommerce, Websites

Services we provided

  • Web Design
  • UI/UX

The Challenge

The biggest challenge of creating the an ecommerce website for Mattel was understanding how to navigate so many different, recognizable brands. We wanted the eCommerce experience to feel clean and cohesive, but we also wanted to make sure that brands like Barbie and Thomas the Tank Engine weren’t dissolved or lost in the experience.

The Solution

The key to creating this cohesive-but-also-multi-dimensional website was putting an emphasis on creating repeatable modules and components that could change color and host a variety of different content while still maintaining an overall “Mattel” feel.

How do you build one website to host so many recognizable sub-brands?

The solution to this was unique shop pages & templates module structures.

Overall Shop Pages

There are multiple ways to navigate the Mattel eCommerce website. One of those ways is just through general toy types. These pages combine many brands into the same categories, like Baby Toys, Cars, etc.

We developed a a complex filtering and navigation system in order to create a simpler user interface. We created large, circular cards to divide main categories into smaller sub-categories, and then drop down filtering (that defaults as closed) to allow searching by age, price, brand, theme, etc.

With so many different toys and products, there needed to be as many search and exploration tools as possible.

Brand Pages

Outside of just an overall shop feature, we also created pages for each brand. In order to still create consistency, cross-site, we created simple repeating modules that would be re-purposed for each brand. 

Each brand page begins with a promotional carousel, then round shop cards to display relevant categories, then additional image and promotional material sections and images. 

These brand pages also have their own sub-headers to navigate the most important pieces of each brand.

No items found.

Explore more projects

back to all projects