Untitled-1-02.png

PokemonCenter.com Case Study

Redefining shopping experience
for Pokémon Center.

 

OVERVIEW

I proposed a redesign of the PokemonCenter.com website during my time as Designer at The Pokémon Company International starting with mobile. The purpose of this project is meant to refresh the website with common e-commerce websites practices and update the look and feel with Pokémon's unique brand personality. 

 
 

THE CHALLENGE

How can we improve PokemonCenter.com to convert shoppers into paying customers?

mockups7_Artboard 10.png

DESIGN DISCOVERY

 
 

ANALYZING THE CURRENT EXPERIENCE

I began my process by auditing the website by noting all user interactions and information layout to get a better understanding of the current shopping experience. I noticed that the images, buttons and layout do not adapt from desktop to mobile. Interactions such as clicks and swipes also do not work as expected. Even if I manage to go through all the way to the checkout page, the payment process is long and requires too many input. If I can't easily browse or buy on the mobile website, other customers will complete the purchase on Desktop or abandon the purchase altogether.

 
currentflow-05.png
 
 

USER INTERVIEWS

In order to understand the experience from our customer's perspective, I interviewed 10 people, ranging from those who have previously bought from the website or is an employee who have worked directly with the website. I had the participants go from the home to the checkout page,  and asked them for their opinion on their experience along the way. I uncovered three main user pain points.

DATA INTERPRETATIONS

Over 50% of the visitors are using mobile device.

The average browsing time on mobile is less than 1 minute. The abandoned cart percentage is 3 times higher than that of desktop. Additionally, the search bar is underutilized. 

These data tells me that it is imperative to understand and address the frustrations that users have with our mobile shopping experience as more and more users move their purchases away from desktop.

 

DESIGN SOLUTION

 

DESIGN GOALS

  1. Improve navigation and browsing of the massive selection of products

  2. Reduce data entry to make searching and checkout process easier

  3. Reorganize and simplify categories, filter and sort, etc. and reduce frustration

  4. Add in visuals to promote brand identity

 
 

CREATING USER PERSONAS

 

Celeste wants to buy gifts for her 2 kids. She opens the menu and navigates the categories by images.

menu.gif
 

She uses the search function and clicks on Pikachu to search for products related to that Pokémon.

search.gif
 

persona-03.png
 

Chad wants to find products that he enjoys, quickly. He can use the filter function and find the products to his specifications.

filter.gif
 

persona-04.png
 

Chantelle can quickly buy the products she wants! Her account saves all her information to expedite the payment process!

quickbuy.gif
 

VISUAL LANGUAGE

The website needed to feel uniquely Pokémon and that it is in fact the official web store for the Pokémon brand. I developed exclusive iconography that helps tell the story that this site is created by Pokémon fans for the Pokémon fans.

icons.png
 
 

PROTOTYPE

A BRAND NEW EXPERIENCE

I used Adobe xD to put together this interactive prototype. I tested the redesigned mobile experience with the same group of people from my initial user interviews to see if there were any opportunities for improvement asked them for their feedback on the new experience.

FEEDBACK

  • "The menu made navigating really fun!"
  • "The redesign was very clean and buttons were very easy to press."
  • "Payment was very easy!"
  • "I like how the website 'talks back' with the customers."