Project Title
Virtual Currency Checkout
Project Timeline
December 2022 March 2023
Project Detail
Since Overwatch 2 introduced MTX Virtual Currency items on the Web&App Shop, other game teams like Diablo 4, Hearthstone, and World of Warcraft have followed suit, implementing new business plans to incorporate MTX shops on the Web&App Shop platform.
However, Battle.net’s Ecommerce Checkout isn't adequately prepared to meet their needs. Unlike Real Money checkout, Virtual Currency checkout has its own transaction style. The Checkout team needed to devise a new flow tailored specifically for Virtual Currency purchases to enhance the purchasing experience and boost revenue.
My Role
This was my first project after joining the Checkout team. Managing the Product Page on the Shop side, I completed the shopping experience from Product page to Checkout independently. I handled the project management and designed the deliverables with assistance from Checkout PMs
Step 1
Define: Why Checkout Needs a New Design?
Checkout Problems for Virtual Currency Case
Since Battle.net had not previously offered MTX Virtual Currency items on the Web & App Shop, the existing checkout designs today were solely tailored for Real Money transactions. Many of the challenges come from this particular aspect.
Summary
1. Unlike Real Money Checkout, Virtual Currency transactions do not necessitate stringent legal regulations as it is not considered real currency. Therefore, we can be more lenient with legal messaging.
2. Similarly to above, since it involves virtual currency rather than actual funds, we do not require full support from certain partner teams. Involving them all in the process would be redundant.
Step 2
Virtual Currency Checkout Goal
Today, the checkout process only supports Real Money transactions. Team aims to redesign the flow to be faster, simpler, and more intuitive for Virtual Currency purchases.
Step 3
Final Design: The Model Checkout
Model Checkout for Virtual Currency
Model Checkout
After a long discussion with the team and some user testing, the model checkout method was chosen as the final direction for a streamlined checkout experience.
Why are there Two Variations?
The left version is the default form of the model checkout, while the right one is an extended version for users seeking additional legal information. Negotiations with Blizzard’s legal team determined which messages to prioritize to be displayed vs hidden for user experience and information management.
Scenario
Use Cases
- 👉 Default Model Checkout Flow
- 👉 Insufficient Balance Case
- 👉 Applied Discount due to Owned Items
- 👉 Post Purchase Flow
Default Model Checkout Flow
The pop-up model checkout appears where users decide to make a purchase.
When Balance is Insufficient
When virtual currency is insufficient, a message with a different CTA redirects players to purchase more game coins. Upon completing the purchase, players are redirected back to their previous product page.
When Discount is Applied
When users already own some items, discounts are automatically calculated and applied to the final price. A notification banner indicates which items the players already own.
Post Purchase
Players can simply close the model checkout screen and return to the shop page where they left off. They can continue to explore more on the item they just purchased or browse other items.
Tablet and Mobile Resolution
Tablet and Mobile responsive sizes were also explored. The extended legal section now extends vertically instead of horizontally.
Comments captured from User Testing
Reason for Model Checkout - User Testing Finding
The team needed to validate if the pop-up model checkout direction is really the right direction that benefits our players. The user testing was done by letting the players go through the current full page checkout and the model checkout. Here are some interesting findings:
- 14 out of 14 participants preferred the Pop-up Model.
- 3 out of 14 participants did not notice the design had changed at their first glance.
- 11 out of 14 participants perceived the Model checkout is faster, despite the click counts being the same as the current checkout process.
Step 4
Future Plans and Phases
Quicker Checkout Demonstration
Future Phases of Virtual Currency Model Checkout
These are some of the future considerations for the Virtual Currency pop-up model checkout project.
Quicker Checkout
For now, the model checkout is only available on the Product page. However, for enhanced accessibility and quicker checkout, this feature can also be triggered outside the Product page environment—directly from the product card.
Players Hunger for more information
We received feedback from participants during user testing, indicating that they have an interest in learning more purchasing information during the checkout process.
Top-UP Flow
The current top-up flow for insufficient balances is jarring. Significant UX improvements for the top-up flow are necessary.
Final Thoughts & Takeaway
The direction of the pop-up model design received positive feedback from the team and leadership. There was feedback to apply it to the Real Money Checkout for a greater impact. However, Real Money involves significant real life constraints unlike Virtual Currency. Therefore, there is much research to be done, along with more team and stakeholder involvement, and stricter legal guidance that needs to be coordinated.
Check my other works too!
© 2025 Felix Junghwan Choi; All rights reserved.