Creating Pokémon GO’s In-app Purchase
I designed the in-app purchase shop experience from conception to finish for Pokémon GO’s launch. I was given a small list of game items for sale, but otherwise complete freedom to create the feature. My goals were:
Provide players with an accessible purchasing experience amidst outdoor play
Calm and familiar storefront design
Concept
My original concept for the Shop included a shopkeeper character and item chests. Shopkeepers already existed in the Pokemon franchise and added personal charm to in-app purchase that other games sorely lacked. Chests were popular in other mobile games due to a surprise element players enjoyed, similar to opening a gift. Unfortunately both were out of scope for launch, but I kept the 3-wide grid layout.
Prototype
Below is the Shop prototype I made. It shows opening the Shop, browsing, and purchasing.
Launch
I included the Shop in the main menu for fast access. Since the rest of the game was unique, my goal was for the Shop to feel familiar for players accustomed to mobile purchases. I used a 3x3 grid similar to other mobile games to help build that trust.
I showcased oversized art on the detail pages with two goals. First, for the detail pages to act as a confirmation screen before purchasing, along with the device confirmation dialogue. Second, for the items themselves to look interesting enough to entice purchases on their own. Items like Pokéballs are “thrown” so they should feel as real as possible.
Pokecoins
Using a tiered currency system common to mobile games, I created 2 rows of pokecoins for 2 different user groups: the first($1-10) for the casual to intermediate player, the second($10-100) for the high level and obsession player. The first row would satisfy most willing to spend up to $10, and the second would aim for devoted players who knew they wanted large amounts of currency.
A 6 item currency section demanded significant vertical space, so I placed it at the bottom of the main Shop page. My goal was for it to be somewhere memorable but not intrusive.
For the images, my direction to our 2D artist was to visualize each increasing amount in a humorous way: a stack, a bucket, a wagon, and so on. Ultimately the wording I chose was removed but the images she created were perfect!
Concept
Final
Later Versions
As the game continued it’s growth, I added more designs like live event ticketing, item bundles, an Avatar Shop link (where players purchase in-game outfits) and more. All the additions scaled nicely with my original design, as intended. Below is a prototype of the vertical browsing for the experience.
Out of Coins Modal
When players tried to make a purchase but were low on Pokecoins, I designed a modal to appear that allows quick purchasing of Pokecoins. Once the modal is closed, the player can continue the purchase smoothly. While many games capitalize on loss aversion to increase profits at opportune moments, I wanted my modal to help rather than turn happy users into resentful ones.