Check: An Instant Payment Application


OVERVIEW

Back in 2015, a client approached me wanting to create a new mobile payment app. At the time, Apple Pay had just been released and my client wanted to jump onto the instant payment app train. The criteria for the project was quite open ended; I was able to brand the product as I saw fit, and my client was not trying to be ridiculously innovative in terms of features since payment apps were not as common as they are today. This project was treated as an experiment in the finance app market, and as an experiment in UI and UX for me.


THE PROBLEM

The objective was to understand how people in North America make and take payments, and their openness to new methods of payment. Users must be able to easily send and receive money, and make debit, credit, and loyalty payments.

iphone payment app




RESEARCH

Initially I did some general research on the current world of payments. Around this time, 32% of payments were done via cash, 21% were done via cred card, 27% via debit, and 11% of payments were done using some form of electronic payment. Compared to the study done by the Federal Reserve a couple of years prior, cash was on the decline and all other payment methods I mentioned were increasing in popularity. The only area where cash was predominantly used was when we give gifts/transfer money to those we know, which remained at 75%. Using the app to transfer money was something my client intended for it to do, this statistic made adoption seem questionable.

I did a competitive analysis of existing payment apps, which at the time was really only Apple Pay and available aspects of Google Pay (which was also released in 2015). My main objective was to find any design pattern similarities or differences between the two applications in order to understand what design patterns users would be most familiar with. Since people are used to using finance apps in specific ways, I didn’t want them to have to learn new patterns when there was really no need to.

Instant payment solutions should be a win-win situation for all parties involved. Banks and retailers with loyalty cards can grow their customer base as well as increase the frequency in which cards are used; No more forgetting your loyalty card at home. Users will benefit from convenience and ease of use, everything will happen immediately. With all the research in mind, we created a list for feature prioritization in order to not try to tackle every issue at once.





INFORMATION ARCHITECTURE

I created a user flow diagram in order to map out how users could move between features screens within the app. This is something I did of course to map out the easiest path for them, but also to wrap my mind around everything that could possibly be done before I moved onto my wireframes.

payment app user flowchart


WIREFRAMES

Because I spent more time on my user flow, I felt comfortable moving straight into creating digital wireframes. I made wireframes for almost every screen of the application so that I’d be able to go over it with my client. I’ve always found it easier to get feedback at this stage if functionality is thoroughly shown in the wireframes or if the wireframes are high-fidelity. The newest challenge for me at the time was taking security into account. Having important financial information readily available on your phone could be risky, and I had to balance the user’s want for this payment to be quick and easy, but also meet at least a minimum standard of security. This is why their pin code has to be entered at certain stages throughout the process. I walked a fine line figuring out how many times that should happen, and when exactly that would be helpful vs. annoying.

payment app wireframes


MOCKUPS

When I created my initial high-fidelity mockups, I found that the UX and layout of the application was mostly easy to recreate, as I felt it was well thought out in previous stages. But I was not happy with my initial UI and branding for the application. I thought users would find it too boring; it was almost too typical and bank like. It didn’t seem like something that would stand out to potential users as being cool, new, easy, or simple.

iphone payment app app colour branding exploration

I went back to the drawing board. I started with exploring different colour palettes, I wanted something that felt trustworthy but more youthful and less stuffy than my original idea. I also explored visually simpler ways to guide the user through the steps of putting in your pin code, scanning, etc.


iphone payment app iphone payment app iphone payment app


CONCLUSION

As far as the UI, I struggled more than usual coming up with an interface that portrayed the look and feel that my clients and I wanted it to. However, I am relatively happy with the result since my client’s customers were pleased with the look and ease of use. This project was an excellent learning opportunity for me as it was my first step into designing for finance. If I had the opportunity to do this project again, I’d want to see more qualitative research alongside our quantitative research, and have the opportunity to formally test with my client’s customer base in a beta release.

iphone payment app