Online Payment Processing System

For a mobile and desktop fantasy football app

MY ROLE: COMPETITOR ANALYSIS, USABILITY TESTING, USER EXPERIENCE, USER INTERFACE
THE TEAM: DESIGNER, PRODUCT OWNER, BACK-END DEVS, FRONT-END DEVS, QA
DATE: 2018

01. Introduction

In 2018, I had the opportunity to be part of a team of 8 people working on a mobile and desktop fantasy football application for the Spanish market. The users of this app can choose their team rosters from a list in which all players of real football leagues are available. Points are based on the actual performances of the players in the real-world competition.

02. Problem

As a team we had to think about all the features to be included in the product and a strictly required one was an online payment processing system. Users should have been able to deposit funds to acquire their players and withdraw the money they win.
It was the first time any of us had the opportunity to work on such a feature. We had to get familiar with all the aspects that should be considered before building a payment processing system, such as security and encryption, scalability, PCI DSS for Credit Card Processing, backup payment processors and so on. Design-wise, the challenge was to produce a user experience that would have felt smooth and secure without losing the fun feeling that a game should have.

03. Research

We as a group took ownership of different things to research on, depending on everyone’s specialty. Back-end and front-end developers did several technical spikes, the product owner did research on the legal aspect of things and I focused on doing analysis of payment systems used by businesses similar to ours, focusing on the user experience.

Many of our competitors were giving their players the opportunity to:

  • Save credit cards in their accounts so the payment and withdrawal processes would have been easier and faster
  • Have a section for transactions history
  • Pay with alternative methods such as Paypal
  • Have an overall experience that feels smooth and secure

04. Solution

Everyone presented their piece of research to the rest of the team and we had a few brainstorming sessions to decide how to tackle the design and development of the payment system.

We compiled a wish list of features to be included:

  • Deposit
  • Withdrawal
  • Cards section
  • Pay by card
  • Pay with Paypal
  • Transactions history section

05. Execution

It was now the time to start identifying the main flows. I started with deposit and withdraw funds and I produced 2 flowcharts to be able to visualise how the user would interact with our payment system.

Flowchart_deposit
Flowchart_withdraw

Based on the flowcharts I started designing low-fidelity wireframes with a mobile first approach.

DepositarMobilelowfi.jpg
RetirarMobilelowfi

We wanted to validate these flows with users so we invited a group of 8 people to our office to conduct usability testing. We were able to collect some valuable feedback and after some reworks I was able to start producing low-fidelity wireframes for the desktop version.

Low-fi destop deposit
Low-fi destop withdraw

I was now ready to start thinking about the user interface and high-fidelity wireframes.

PaymentsMobile_hifi
PaymentsDesktop_hifi