Project Title
Pop up Model Checkout
Project Timeline
April 2023 January 2024
ReleaseD Date
by June 2024
Project Detail
Evolve the Checkout experience for all Blizzard-supported games, spanning in-game, Desktop App, Mobile App, and Web platforms. Design updates were consistently aligned with both business requirements and user needs, adapting to new game releases and evolving business models. While Battle.net's Storefront effectively supported these changes, a parallel effort was lacking in enhancing Battle.net's Checkout.
My Role
This is where I stepped in to drive improvements. As the design lead in the Checkout team, I managed the roles of both project lead and individual contributor simultaneously. By embracing both roles, I gained the flexibility to steer the project's direction. This allowed me to infuse the design ethos into every aspect, commencing with a discovery research phase to understand "What constitutes a great checkout experience?" and culminating in team decisions defining "What the Checkout team aspires to achieve?"
Intro
What the Team Want Checkout to Be?
Background
For the past couple of years, the Battle.net Checkout team has operated without a dedicated designer. The introduction of the Virtual Currency Store to the Battle.net Storefront has led to a gradual increase in sales cases. Consequently, there is a growing necessity for a redesign of Checkout to align with these changes. The team faced a couple of challenges initially. Firstly, I was the sole designer on the team, and the team lacked experience in collaborating with designers for an extended period.
Immediately after I joined the team, there was a noticeable absence of any branding elements beyond the basic functioning products. In response, the team collectively allocated a day to delve into our aspirations. Given that the team primarily comprised PMs and engineers, who traditionally hadn't dedicated time to such discussions, the initial moments were marked by a certain shyness and awkwardness. However, as the session progressed, everyone actively contributed, expressing their visions for what the Checkout team at Blizzard should embody. This branding exercise played a crucial role in shaping the groundwork for all subsequent Checkout projects.
In addition to the enjoyable branding exercise, of course we engaged in various other team-building activities. And who could say no to Go Karts!
Step 1
Defining an "Ideal Checkout Experience"
12 Attributes for Ideal Checkout Experience
Following our exploration of what the team aspired to, a critical step was understanding what constitutes an ideal checkout experience for users. Through internal and external interviews, surveys, and competitive analysis, we identified a total of 12 attributes with the potential to enhance the checkout experience.
Page 1: Team Kano Research Result
Page 2: External USer Kano Research Result
Page 3: Attribute Evaluation Table
Kano Model Research - “What Users Want”
While all 12 attributes were too great to be missed, understanding that inclusion of every attribute is impractical, we utilized the Kano Model to focus on the top three most important attributes for Battle.net Checkout. Conducting the Kano research internally and externally aimed for more accurate results. Internal insights gauged the perspectives of our team, stakeholders, partners, and leadership, while external results delved into players' expectations for an excellent checkout experience.
Top 5 Selected Attributes
Kano Model Research - The Result
The outcome of the Kano model research highlighted the top 5 attributes categorized as "Must Haves" and “Nice to Haves” are...
1 | Must Have
🥇 Pricing Information
Users demand detailed pricing information during the checkout stage, considering it a fundamental inclusion. Its absence results in significant user dissatisfaction.
2 | Must Have
🥈 Simple Navigation
Complex navigation, especially when dealing with real money transactions, is universally undesirable.
3 | Must Have
🥉 Simple Payment Management
Users seek control over their wallet, desiring a system where saved payments are easily accessible.
4 | Nice to Have
🎯 Quick and Speedy Checkout
Observing this attribute positioned below 'Pricing Information' and 'Simple Navigation' indicates that users prioritize accurate and precise information over a faster checkout that lacks clarity.
5 | Nice to Have
🎯 Personalization
Users desire a personalized checkout experience based on the products they are purchasing. This implies an expectation for distinct and personalized experiences corresponding to different product types they are acquiring.
Gladly, there is an overlap between the key attributes desired by users (external) and those sought by the team (internal). This convergence facilitates a focused approach to ideation, allowing us to prioritize attributes that promise maximum impact. The three attributes at the intersection are:
🥇 1. Simple Navigation
🥈 2. Simple Payment Management
🥉 3. Quick and Speedy Checkout
Battle.net Checkout Problems
After understanding what comprises an overall good checkout experience, I needed to identify the current problems we face today. Identifying these issues wasn't too challenging, given that the design had not been updated for over five years. Complaints were readily apparent from internal team members and the Battle.net forums.
Step 2
Ambiguity into Certainty
Team Workshop - “What We(team) Want”
Based on the discovery, a workshop was conducted using the findings. Upon close examination of the three topics chosen from the workshop, the ‘Pricing Information’ attribute is omitted, even though it received the most votes. This exclusion is due to the fact that displaying pricing information is considered too obvious and that the team has certain business and engineering directions and limitations.
'How Might We...' of Simple Navigation
'How Might We...' of Simple Payment Management
'How Might We...' of Quick and speedy checkout
How Might We… & MoSCoW
To further narrow down feature discovery and ideation, team members and I decided to blend the “How Might We…” and “MoSCoW” exercises. The rule was simple: first, generate limitless HMW post-its for each attribute and group similar ones. Second, regardless of the attribute association, reorganize them into 'Must Have', 'Should Have', and 'Could Have' categories. This process helps prioritize certain HMWs over others and informs our roadmap.
Must, Should and Could Have Prioritization exercise result
MoSCoW
These are the results of our prioritization. As you can see, even within each category, we cast votes to identify preferences.
How Might We... and Ideation in sticky notes
Effort/Value Matrix
Crazy 4 and 1 exercise done with Ecommerce team members
Crazy 4 and 1
Not everyone is a designer, but everyone can draw lines and circles. Visuals often convey more than written words. I particularly enjoy this exercise because it provides insight into what people are thinking visually. Even simple line drawings facilitate clearer communication compared to chats and written words alone.
In conclusion, I could discern the direction in which people's thoughts were leaning, which I could then reflect in the design. Also, by involving non-designers in the design workshop, they have the opportunity to understand how design principles work, fostering inclusivity and pride as they feel they contributed to deciding design directions and feature ideas.
Step 3
Why Model Checkout?
Comments from Virtual Currency Model Checkout User Testing.
Reasons for Model Checkout
If you closely examine the Crazy 4 and 1 ideations, you'll notice that all of them adopt a pop-up model format. This decision was made irrespective of the attributes we wanted to focus on, as the model checkout seemed to be the preferred direction, unless the initial research strongly indicated otherwise. Here are some supporting reasons:
Reason 1
The Model Checkout received positive feedback from both the team and leadership in the context of Virtual Currency Checkout. There was no need to challenge them again with a new direction.
Reason 2
All 14 out of 14 users (100% rate) provided positive feedback on the Model Checkout direction,
- Maintains a sense of connection to my purchase.
- The model feels faster, even though it is the same.
- Checkout in a modal feels leaner compared to a full page.
Reason 3
It was necessary to synchronize the experience between Virtual Currency Checkout and Real Money Checkout. It would appear inconsistent if one design direction differed from another when users were navigating the same checkout pages.
However, I could not replicate the exact design from Virtual Currency Checkout. Dealing with Real Money involves more team challenges and legal regulations compared to Virtual Currency.
Step 4
Design Explorations
Checkout Scenarios for Phase 1 and 2
Numerous explorations of flows and visuals were conducted to arrive at a streamlined experience satisfying various stakeholders: the 'Team,' 'Stakeholders,' 'Partners,' 'Leadership,' and, most crucially, 'users.' These design explorations specifically target Phase 1 and 2. More details about the Phases are explained below. For now, here are the following scenarios…
Scenario 1 : New to Battle.net
New to Checkout Page
- 👉 Save New Credit Cards
- 👉 Add Battle.net Balance
Scenario 2 : Checkout cases
Payment Challenges (Paying with Saved Credit Card)
- 👉 Redesigned Password Challenge
- 👉 Redesigned CVV Challenge
- 👉 Redesigned Embedded 3DS Challenge
- 👉 Redesigned Redirected 3DS Challenge
Scenario 3 : Payment Management
Add/Delete/Manage Wallet
- 👉 One Time Only Purchase
- 👉 Add new Payment
- 👉 Delete Existing Payment
- 👉 Setting/Unsetting Default Payment
Information Architecture Guide
Providing an interaction model guide is crucial to effectively communicate how the design functions. This offers a clearer visualization and understanding of the design's interactions.
Step 5
Final Design: The Model Checkout
Checkout Before
Checkout After
Pop up Model Checkout Basic Flow
Wallet Interaction
To provide a better understanding of the mouseover state, the payment component that is being moused over lights up slightly, while the selected one is outlined in Battle.net blue.
One-time Payment & Add New Credit Card
The process for adding a new credit card and completing a one-time payment is very similar. The only difference is whether the 'Save this payment method for future purchases' checkbox is selected to save the payment. If not, the purchase will be completed without saving the credit card that was just used.
Payment Management:
Set/Unset a Default Payment
Setting a default payment is a recommended feature but not mandatory to complete. However, it is advisable to allow users to have better control over their payment preferences. If the default payment is not set, the Battle.net system will recommend and control the payment selection.
Payment Management:
Save/Unsave a Payment
Payments made with accounts will be stored in the 'Saved' tab. However, for certain payments like 'AliPay' and 'WeChat' Pay where no accounts can be created, users can still choose to 'Save' them in the 'Your Saved Payment' tab for improved accessibility in the new design.
Payment Management:
Delete a Saved Payment
The feature to delete a saved payment is introduced for the first time in this design. Previously, this function was only available in 'Account and Identity'. Now, users can manage their payments within their new Wallet.
Right Panel Cases
When the left panel focuses on providing information related to completing the purchase, the right panel is there to support with additional information and stationary CTA.
Primarily, it includes the Price and Legal information. For better user understanding, these elements are interactive, and the design adapts depending on the checkout status.
Step 6
Usability Test
Positive Usability Test Findings
Negative Usability Test Findings
Other Usability Test Findings
Unmoderated Usability Testing
Introducing an entirely new design concept necessitated validation through user testing. Special thanks to the Design Research team, particularly 'Jaguar Jung'. Huge shoutout!
The usability testing employed the 'userZoom Go' tool, facilitating unmoderated sessions once the deck was appropriately set up with pertinent questions. Since this was conducted in an unmoderated format, my physical presence was unnecessary, allowing the test to reach numerous participants in a short timeframe.
For your information, this usability testing was conducted using the previous version of the design mockups. The updates have already been incorporated into the final design, as presented above. Some additional insights, not reflected in the final design, are encapsulated in the future Phase approach, which will be elucidated below.
Step 7
What are the Leftovers and Future Phases
1. Phases Approach
Given the enormity of this project, it's imperative to break down the phases and feature scope for a systematic progression. The Battle.net Checkout redesign spans an extensive size and cannot be completed within a couple of quarters. This is not only due to the substantial size of the product but also the necessity for tailoring designs to meet the specific legal requirements of each country. While the roadmap remains adaptable as the project unfolds, it is currently segmented into a total of four phases to encompass all regions, platforms, and sales types.
2. Desktop App Modal Component
User testing revealed feedback indicating that the checkout model's size is too small. This design was initially crafted to fit the smallest size of the Desktop App. Discussions are ongoing with the Desktop App team to create a larger, responsive component, providing users with an expanded checkout screen.
3. Some Internal Challenges - Legal
Potential design updates may involve relocating or resizing legal information near the CTA. Presently, there are ongoing discussions between the Battle.net Ecommerce team and the Blizzard Legal team. The Ecommerce team aims to streamline the legal text in Shop and Checkout, but the Legal team insists on including all messages and possibly adding more for any concerns. A deeper discussion with the legal team, involving Battle.net senior leadership, is necessary. Once a decision is reached, hopefully favoring the design change, a new approach to handling legal information in Shop and Checkout pages, including rebranding and UX/UI updates, will be initiated. (Based on the 2024 Q2 timeline.)
Final Thoughts & Takeaway
Managing and making progress on the project has given me more confidence. I had to handle more stakeholders, partners, regulations, and constraints than any other project I have worked on before, especially dealing with regional legal issues. Within these complex relationships, I had to find mutual agreements or convince and persuade others. The process was not easy, and it's not over yet, but seeing the progress made so far fills me with pride once again. While I am uncertain about how many more complex products I will redesign in the future, there might not be many projects as intricately woven with other teams and products as this one.
Check my other works too!
© 2025 Felix Junghwan Choi; All rights reserved.