Max Steel Redesign

MaxSteel.com is the digital property for Mattel's popular boys cartoon Max Steel. The website is meant to be the global digital destination for all Max Steel content.

 

The Ask: 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 was just a short-term success and wanted to drive engagement from young boys even further. So we set out to build a gamified digital experience to spur curiousity, intrigue, and engagement .

My Role:

I was part of a larger UX team and mainly responsible for interaction design and strategy of the gamification layer. Moving closer to launch, my role eventually expanded to leading all the UX work and working with development and product teams to make sure we ship the best possible product.

 

 

 

Insights

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.

 
alert.png

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.

 

 

The Vision: 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.  

 

Planning the Content

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
 

Defining the gamification experience

 

Designing a UI to guide young boys through the metagame

Defining progression for individual users

 

BUILDING A UI on top of a website

A dashboard component to supplement the website with the metagame and introduce an element of supplementation


INTRODUCING MAX STEEL

homepagescreen
dashboardscreen
minigamescreen
characterpagescreen
 

The Impact

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 22%

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

 

Learnings
 

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.