Hasbro’s Beyblade Battles

Project Overview

Hasbro wanted to re-launch their popular Beyblade spinning top toy line after a six year brand hiatus. Realizing that expectations for games and entertainment had changed dramatically in that time among their target customer—primarily 6-12 year old boys—Hasbro wanted to create an online product extension of the physical toy that would engage kids and encourage continued play online and off.

Project Type: Real-Time Multi-Player Game
Industry: Consumer Goods/Toys

My Role

• UX Director
• Principal UX Designer
• Gamification Architect
• Creative Director

I led an interdisciplinary team of 8 people that encompassed all phases of UX research and design, UI design, and development. The project was ongoing for three years.

What I Did

• Requirements gathering
• User research
• Personas
• Task models
• Sitemap
• Gamification architecture
• Wireframes
• Prototyping
• Usability testing
• Experience mapping

Research

UNDERSTANDING THE USER & CREATING EMPATHY

Requirements Gathering

Our team began this project with a series of stakeholder interviews to understand the brand goals. The Hasbro team was able to share with us a wealth of customer information and data from the brands previous incarnation.

Then, in order to fully appreciate the actual player experience, the team spent several hours customizing our own tops and battling with our new Beyblades at the office. After about an hour of battling with our new tops, taunting each other’s skills, and challenging one other to battle after battle (a few wagers may have been made that day), several grown men reverted back to our pre-pubescent selves and became fully immersed in what it means to be a Beyblader.

Personas

Beyblade products had not been available in the US for several years which presented a problem: there were no current customers for this brand that we could interview. However, Hasbro still had a large amount of user data they gathered from previous years as well as marketing personas that were still relevant. We decided that a lean approach to developing personas was the most effective and efficient path forward.

We created personas based on the data we had then refined those personas throughout the project, making adjustments to our assumptions as necessary, as we continued to conduct various types of user research.

User Research

Throughout the project we conducted several usability tests, customer interviews, ethnographic research, and online surveys. Usability tests were conducted in our usability lab in all phases of design and development. Additionally, we conducted usability tests with participants from Hasbro’s user panel in the “Hasbro Fun Lab” located at their headquarters in Pawtucket, Rhode Island. We also went into homes and studies actual players in their environments with their actual friends.

Information Architecture

ORGANIZING THE STRUCTURE OF CONTENT & FEATURES

Task Models

To develop the task models we started with the primary tasks that included registering the toy (each retail top came with a registration code), customizing tops, and finding someone online to battle. From there secondary and tertiary tasks naturally revealed themselves.

During this process we discovered just how many tasks users we would need to solve for—many more than we had originally estimated. This was an important step in the UX process that took much longer to complete than we anticipated. However, we knew that taking the extra time now to discover the breadth of the entire experience would pay off in spade later in the project.

Sitemap

Using the task models as a basis, we designed the structure of the entire system. The Sitemap accounted for initial phases of development as well as future feature sets. This process also took much more time than we had originally accounted for since so much additional information was discovered during the task modeling phase.

Gamification Architecture

The purpose of Beyblade Battles was to engage children over the course of several months, and even years. In order to ensure that the experience was architected in a way the motivated continued engagement, we developed a gamification strategy that encouraged players to advance from Newbies, to Expert players, and finally Master players. Each progressive level was designed to meet a different set of needs. For example, Newbies needed to be onboarded and rewarded often for their efforts. Experts needed reasons to return on a regular basis. And Masters needed their intrinsic needs and desires for mastery and belonging to be met. By designing the user journey in this way players would find reason to become loyal once again to the Beyblade brand.

Wireframes

COMPOSING SOLUTIONS THAT DELIGHT THE USER

Wireframes

We developed wireframes that incorporated our discoveries and ideas during the Sitemap and Gamification Architecture phases. We started with sketches and whiteboard sessions to work through the initial broad strokes. We also found it was effective at getting through some of our weaker ideas quickly in order to find better solutions.

Low-Fidelity Wireframes

Once we had worked out some initial ideas, we quickly developed low-fidelity paper prototypes of the system’s core functions, primarily customizing your tops and playing against other players (aka “battling”). We used these paper prototypes for our initial user testing with boys 6-12.

High-Fidelity Wireframes

Once we made modifications to our designs based on the feedback we received in the initial user testing, we developed high-fidelty wireframes of all areas of the system. Knowing that we would be moving into prototypes, and that these prototypes would evolve over time as the project progressed, we used Axure RP extensively.

Prototype

BUILDING A FUNCTIONAL MODEL TO TEST OUR IDEAS

Prototypes

Testing and experimenting to find the best user interactions is always an important step in the process for me. During the prototyping phase the team developed several ideas and tested them. We refined the good ideas and trashed the bad ones. We developed the Prototypes to show virtually every possible user interaction we had discovered.

User Testing

GETTING FEEDBACK FROM THE USER

Usability Testing

Usability testing was conducted many times throughout the project with low-fidelity wireframes, high-fidelity wireframes, prototype, and the live site. We followed a “build-test-refine” methodology each and every time. We were fortunate that our client Hasbro fully embraced usability and allowed us to conduct all the usability research we felt the project required.

Visual Design

BRINGING THE DESIGNS TO LIFE

User Interface Designs

Using the brand guidelines and the Prototypes, we moved into the UI design phase. We worked through several ideas and finally landing on the right look for the online product extension.

Experience Map

BRINGING THE DESIGNS TO LIFE

Experience Map

Once the site was launched our work had only begun. One of the tools we used to understand the users experience across all brand touch points, was an Experience Map that we developed for the Beyblade brand. The Experience Map is a model that illustrates the complete experience a person has with a product or service. We conducted a touchpoint inventory for the brand, surveyed over 600 customers, and spent a considerable amount of time analyzing the data. What we presented to the Hasbro team was a comprehensive look into the user experience that they had never seen before. It not only provided insight, but also actionable steps to improve the experience for versions to come.

Results

WHERE THE RUBBER MEETS THE ROAD

Results

Beyblade Battles was a huge hit for Hasbro. It quickly became the most popular web property the company had ever launched. Within the first few years the site had over 15 millions active users in over 40 countries worldwide. And they played over 90 million games together online – in real time. To support a global audience, the site was also translated into over 30 languages.

In 2012 Beyblade was the #2 selling toy of the entire Holiday season and their largest money maker for the year. Stakeholders at Hasbro attributed much of this success to highly engaging Beyblade Digital Product Extension we had created for them.

The site was honored with a prestigious W3 Award and four separate Davey Awards.

Let’s Work Together

LET ME KNOW HOW I CAN HELP

If you’re looking for advice on your next big idea or you are looking for a seasoned design leader to add to your team, send me note. I am always on the lookout for my next challenge.

LET’S TALK