CHALLENGE
WorldWinner had been processing payments internally for years, using old tech. This proved to be expensive and time consuming, in regards to protecting our players' personal credit information, and compliance audits. On the player experience side, we wanted to make the payment flow more user friendly, and give them additional options for making a deposit. Our ability to offer our players more payment options, like Apple Pay or Venmo, were limited. Our solution was to integrate Braintree Payments for credit card processing, and leverage their system to externally manage personal credit information (PCI) for our players.
MY ROLE
Working in collaboration with the Product Manager, I focused on the player experiences during the different stages of payment processing. We wanted to simplify the three main flows: depositing, withdrawal, and transaction history. This included brainstorming, white boarding, research, prototyping, wireframes and new designs.
APPROACH
To get started, I began with some competitive research. I wanted to review how other skill gaming companies were handling payments, what methods were available, and how players were able to track their transaction history. Since Braintree was a drop-in UI system, we also needed to review what type of data they were collecting, and what we would capture. Since skill gaming offers cash play, there were also legal requirements that needed to be considered.
top: screen captures from competitive research of a skill gaming deposit flow; bottom: samples screens of Braintree drop-in UI.
WIREFRAMES
We learned from our competitive research, that WorldWinner needed to reduce the number of steps for registration, and be more specific. We then started to work on the various flows a player can take, in order to make a deposit. We also needed to consider the different player types, and how the deposit flow would differ for a registered cash player, and a free guest player. Since cash players are already registered, we could quickly get them into the deposit flow, whereas a guest player would need to register their account, before making a deposit.
SMALL HICCUP, ADJUSTMENTS, then USABILITY TESTING
During the design phase, we discovered that our vendor would only be collecting the zip codes from players, during the deposit flow. Since skill gaming allows players to compete for cash, we needed to collect the whole address, for legal reasons. This meant we needed to consider how players would enter, review and edit their mailing addresses, during the payment flow. After making some quick adjustments to our wireframes, we decided to move into hi-fidelity mockups, in order to perform usability testing.
For testing, we decided to focus on two experiences: the first-time deposit players, and the existing cash players. We tested 10 players total; 5 new players and 5 cash players. The feedback was very positive from both groups. The new players stated that it was easy for them to register and make a deposit. Feedback from 4 out of 5 players, stated that the payment flow was similar to other payment processes they have used before. For the existing players, they all stated that the new payment flow was easier and more clear. They enjoyed how the payment method was saved from their previous deposit, and there was a larger variety of payment methods available.
FINAL DEPOSIT FLOW DESIGNS
Since our usability testing was positive, we moved forward with finalizing the designs and the different deposit flows. To help support the written product requirements, I created some annotated flows to accompany the screen designs. Below are those examples:
WITHDRAWAL PROCESS & ACCOUNT STATEMENT
In addition, we wanted to make the withdrawal process smoother, and to add increased visibility to withdrawals, on the player’s account statement. Previously, a mobile player could submit their withdrawal within the app, but when it was ready to be claimed, the user would need to log into their account on the Worldwinner website. The process caused frustration and mistrust amongst players. After submitting a withdrawal, a player would receive an email confirmation, but there was no place for them to check on the status of that withdrawal. This process also took longer, because the withdrawal would be reconciled by our internal team.
Using Braintree Payments made the withdrawal process much quicker. Since players had credit cards stored within Braintree, the withdrawals could be reconciled within moments, by batch crediting previous transactions. Claiming a withdrawal wouldn’t be necessary, unless a check needed to be issued. By bringing check claiming into the mobile app, we solved for two items; players could see pending activity on their account statement, and claim a withdrawal check. Below are the final designs with annotations:
SUMMARY
This project was a real challenge and an educational moment. We had a very short amount of time to design and implement the new system, so we did the best we could. If we had more time, I would have liked to conduct some user interviews, to get more specific feedback on players’ needs and frustrations. Also, I would have run some usability testing around the withdrawal flow. I learned that having more full stack meetings would have minimized some of the open questions and miscommunications.