Max Steel Redesign-old




In late 2013 Mattel chose to expand interest in the Max Steel, a popular super hero cartoon, into a global franchise from a primarily latin american focus to a global focus.  This would involve a rebranding and relaunching of a website capable of speaking to a global audience.

Phase 1 of the project took place between November 2012 to March 2013. 

I have omitted and appropriated confidential information to comply with confidentiality. The designs in this portfolio are a reinterpretation of the originals.



I was part of a UX team of two,mainly responsible for interaction design and gamification. Starting as the junior on this project, my role eventually expanded to leading the UX work as well as making important design decisions as the project moved closer to launch.





Create an engaging digital experience for boys around the world


Since launch, the first Max Steel website succeeded in engaging boys by providing a plethora of Max Steel mini games. For Mattel, this spurred the desire to create a holistic digital experience not driven by mini games but an experience driven by the Max Steel universe.




Collaboration between the UX team and the strategy team involving everything from exchanging metrics to creating user personas and journey mapping allowed us to come across a couple of key insights that would drive the foundation for the new Max Steel.


Games are what they want

A large number of young users between the age of 8-14 only wanted to play mini games throughout the website. Old site metrics as well as careful  of young boys using the old website.


New content is the only content

Young boys gravitate toward new and dynamic content. Through competitor websites as well as the old Max Steel, visitor counts and visitor focus was increased when new features or content are released.




A content driven gamified experience.

An experience that ties the content of the Max Steel universe with a users progression and mirrors the dynamic nature of the TV show. We introduced time sensitive tournaments and contests that feature different areas of the Max Steel website to keep boys coming back for more.  







The biggest hurdles the team and i faced included utilizing the massive amount of content for the gamified experience and keeping that experience fresh for one time users and avid daily users. The second, to account for the different locales in the design of the website; and finally the pacing of the gamified experience in relation to the dynamic events like global game challenges and tournaments.

Managing the content

Clicking will enlarge this image

Pacing the gamified experience

Unlocking the content through the "meta-game"




Starting with a traditional UI.

Adding another layer of personalization.



Although we ended up launching the site in multiple phases because of the amount of content, the new website proved to be a pivotal success in re-introducing the Max Steel brand in countries where it previously did not exist. From launch through the first 3 months we found a few uplifting statistics showing instant success.

Increased active return users by 40%

Increased visitation of all areas of the site by 28%

Unique registrations over a 3 month period was 35% higher than any other sites owned by the Mattel brand



UX design is an easily dismissed aspect of the design process for many.

Throughout the project life cycle, i found that many factors of UX design practice were the first to be suggested cut in lieu of budget or time constrictions. This type of mentality was a hurdle from the very beginning to the very end, which showed me that UX evangelism is an important aspect of a UX designer's role in a project. I may not have won all the battles but through this experience i learned that some things are worth fighting for.


Documentation is not a one size fits all

Working with people from consumer insights to creative directors and project managers, i found that one type of documentation does not necessarily serve the needs of everyone. I initially started the project with a large amount of wireframes which would help the consumer insights and analytics team properly tag the site and give a general overview on functionality of each page to gather session data. However the developers could identify functionality in the site but wireframes would not necessarily illustrate how functions operate. This called for a need of prototyping micro interactions.


This behemoth of a project proved to be a massive learning experience in everything from hard skills like documentation and wireframing to soft skills like the ability to compromise and properly communicate to multiple disciplines in the project team.