Game UI/UX Design
Pokémon Go
Battling Accidental Purchases & Lost Trust
A problem I regularly have with Pokemon Go is accidentally buying clothing items. This is caused by the organization of the character customization menu - so I looked for solutions in mobile games with an emphasis on character customization that could be implemented in Pokemon Go.
Catching Inspiration
Character customization is an important aspect of a social game - but also a revenue generator. I referenced other games where character customization is a key element to sketch out a solution that makes shopping vs equipping something separate experiences.
The Final Evolution
After sketching out my solution, I created a more high-fidelity mockup while matching the creative direction of Pokemon Go’s existing User Interface.
A similar solution has since been implemented in the game :)
Tools Used
Pokemon Go
Figma
UX Research
User Research
User Testing
Competitive Research
UX Design
Wireframing
User Flows
Prototyping
Visual Design
Icon Design
Button Design
Identifying a UX Issue in My Favorite Mobile Game
If you know anything about me - it’s that I adore Pokemon! One of my all-time favorite mobile games is Niantic’s Pokemon Go.
However, as a big fan of character creation and customization, I’ve run into a couple key issues with how their character customization screens are setup:
It’s a chore to scroll through all items available all at once, with only 4 items visible at a time
There’s no way to sort by items that. you own vs items you have to buy. This has led to some accidental purchases on my end
So I set out to see what I could do to solve these problems while staying consistent with the experience of the rest of the game.
Searching For Inspiration From Character-Oriented Mobile Games
I decided to look for other mobile games for reference for my new design - specifically ones that center around character customization. I landed on Kim Kardashian’s Hollywood - a game that I feel does a character customization screen really well.
However, KKH’s game is horizontal and the tabs don’t fit the rest of Pokemon Go’s UX, I decided to borrow general ideas rather than copying and pasting the same solution. For example - being able to see more clothing/accessories at a time and separating the shop from your inventory.
Mocking Up A Potential Solution To Address The Problem
My biggest concern with this new idea was the amount of space having 2 rows would take up and making the shop/inventory system seamless.
I realized through my mockups that the player character sure does take up a LOT of space - so we have some wiggle room to make them smaller on the screen. They get especially large when looking at specific items (ex: bottoms) and the character zooms in on the applicable part of the body.
I was also concerned that there wasn't a clear way to return to your inventory from the shop, but Pokemon Go already has a “back” button implemented throughout the game that is easy to understand and wouldn’t be a big mental strain on existing players to use.
The Final Evolution - Keeping With Pokemon’s Exisiting UI
With my research done and my plan in place, I made a proper mockup of my speculative redesign!
Pokemon Go has since updated their character customization to a much better user experience - with all the categories visible at the main screen, the ability to scroll up to view more items at once, and much clearer buttons for purchasing something.
