Untitled-1-02.png

PokemonCenter.com Case Study

Redefining the shopping experience
for Pokémon Center.

 

 
 

THE GOAL

CONVERT SHOPPERS OF POKEMONCENTER.COM
INTO CUSTOMERS.

The Pokémon brand have existed for over 20 years. At The Pokémon Company International, I had the opportunity to work on the Pokémon Center team that brings merchandise through its eCommerce platform to millions of fans.  

My goal for this proposed project was to capture the magic of the Pokémon by creating a strong foundation that embraced a rapidly-evolving business and a diverse, devoted user base.

My high-level goals were to:

  • Make it fast and easy to use for everyone, everywhere.

  • Give shoppers more control over their time and money.

  • Create a platform for engagement and community.

 
 
mockups7_Artboard 10.png
 

 

Early Insights From Observation

 

Unfortunately, PokemonCenter.com on mobile is a giant mess! Working with the Director of eCommerce to audit our site and interviewing 8 confirmed customers, we found the following pain points:

 
 
001-01.jpg

The desktop layout does not adapt well to mobile
Hero image does not resize to a vertical-biased resolution causing the it to appear smaller than the news tile below it.

002-02.jpg

Categories are CONFUSING
Using specific dimensions and unique theme names with no context are extremely confusing to users who want to browse the menu

 

Checking out feels long and tedious
Nothing makes the users want to give up faster than a boring form especially when it feels endless and repetitive.

001-04.jpg

Site does not feel “Pokémon”
Being such a huge brand with millions of visitors per month, the site needs a refresh and away with this template-layout.

 
 

With over 60% of our user browse on mobile, it is imperative that we need to fix our mobile experience. Otherwise, these customers will complete their purchase on Desktop or abandon their purchases altogether.

 
 

 

Users & Audience

 

The target audience of our products ranges from kids who were just introduced to the brand to long-time dedicated fans who have been playing Pokémon since the very first game. However, the users of PokemonCenter.com are more diverse which includes young professionals with a strong preference for fast and intuitive interaction, to infrequent visitors who prefer an easily-navigable and friendly shopping experience.

Sometimes the traits of our users and audience overlap and most often times they don’t but the overarching fact based on our analytics is that mobile users of each group still dominate desktop users.

 
 

 

User Job Stories

 

[Situation], [Motivation], [Expected Outcome]

A complete redesign can be a daunting task. Before I could jump into designing, it was important to define what makes a good experience and understand what the user really wants. I was inspired by the Job Story framework and converted user behaviors into actionable designs.

Story #1:

When a shopper uses the search function, the shopper wants to be able to search Pokémon by image, so that he or she can find products related to that Pokémon without having to know their name (or the spelling of a long/complex name).

Story #2:

When a shopper opens the top navigation menu, the shopper wants to browse products in a specific category so that they can shop for Pokémon products exclusive to a theme or kind.

Story #3:

When a shopper accesses a product page with 100+ items, the shopper wants to be able to filter and sort out products irrelevant to him or her, so that he or she can find products tailored to their specification.

Story #4:

When a shopper is ready to checkout, the shopper wants to finish the checkout process as quickly and easily as possible, so that he or she resume shopping or move on to his or her next activity.

Story #5:

When a shopper is browsing for products, the shopper wants the site to recommend products based on his or her behavior, so that he or she can buy products he or she potentially like.

 
 

 

Digging Deeper

 

Digging into the site’s user behavior revealed some big insights into our mobile shopping experience. I expected a majority of user flows to include a combination of browsing and searching to find a product to add to his or her cart. But in truth, because of the nature of eCommerce sites and mobile browsing habits, pointing and clicking is still the easiest and preferred way.

However, our site currently does not make that method of browsing easy and most users end up stating that they’re frustrated and will leave the site entirely.

 
006-01.jpg
 

In addition to a repetitive check out process, input fields are not organized in a thoughtful manner. Important information such as “Order Total” are not emphasized and selecting payment methods is also not intuitive.

 
 

 

Modernized Design

 

The existing PokemonCenter.com was not inclusive for users who weren’t familiar with Pokémon which was exacerbated by a design that was outdated and inconsistent. In an age where everything is demanding your time, I want to create a mobile shopping experience that takes a user from the moment he or she visits the home page to the ‘Order Placed’ page as fast, easy and calm as possible.

That is why I decided to focus on making the menial stuff like inputting information, searches, filters etc. effortless and unimposing so users can just enjoy the fun stuff which is looking at all the cool merchandise that PokemonCenter.com has to offer.

 
 
008-01.jpg
 

A more expressive navigation menu

Browsing each category is made easy by making the entire menu static. Users can jump to one category to another without losing their place.

By using iconography and images of products as representation, it eliminates any confusion of what the names and products are, and provides an easier, faster browsing experience.

 
browse.gif
 
 
 
 
 
 

Searching made easy

There are many ways to use the search function instead of typing and being able to search by tapping on suggested search terms or the Pokémon name is by far the quickest and most effective.

 
search.gif
 
 
 
 
 
 

Filter and sort that actually works

Each filter can be interacted with by the most natural way (The “Size” filter is a group of selection buttons while the “Price” filter is a slider.) In combination with the sorting in the next tab, sifting though hundreds of products to find the user’s favorite product is made much simpler.

 
filter.gif
 
 
 
 
 
0001-02.jpg
 

Place your orders faster!

The “Buy-It-Now”/ “Place Order” buttons are introduced to make one-click shopping available so users can go back to shopping much faster.

 
1-clickbuy.gif
 
 
 
 
 
0001-03.jpg
 

Check out does not have to be hard

Users take more time in the check out process, as this is where they do most of the typing and as a result, users will go back and forth double-checking for errors.

Jumping through the different pages should be instantaneous and the display of information must be succinct.

 
checkout.gif
 
 
 

 

Final Result

 

Nearly a year after this case study, I was chosen to spearhead the redesign project for the redesign of PokemonCenter.com. Below are the results:

 
 
 
Home Page.png
 
Top Nav (mobile) – 1.png
PDP (mobile - review).png