An improved Payments experience through digital assets and immediate settlement of transactions on the blockchain.
To maintain the anonymity of client and users, I have omitted and obfuscated confidential information in this case study.
The payments industry is cumbersome and outdated, resulting in a subpar experience on the user end. Consumers are forced to choose between their monies to pay for purchases because their assets are scattered and tied to different institutions, while merchants limit the payment methods they accept to reduce fees imposed by payment processing companies. The experience is poor for both consumers and merchants, with banks making huge profits from transaction settlements that can be done immediately, securely and cost-effectively with Blockchain.
Chain partnered with one of the world's largest financial institutions on a proof-of-concept application to spark innovation in the consumer payments space. Our client wanted to showcase a new age of payment in which:
- Asset issuers, such as the Federal Reserve, will digitize currencies and assets for instantaneous transactions and borderless transfer-of-ownership
- Consumers will have full control over their money, such that they can pay for purchases with any combination of digital assets (e.g. cash, reward and loyalty points, and coupons)
- All transactions will be secured, immediately processed and recorded on the blockchain.
I was part of a small product team and was responsible for the experience strategy and design of the consumer iOS app and merchant webapp. I led the UX, UI and visual design effort, produced and co-presented all major design deliverables to our client between June and August 2016. I worked very closely with our business lead and product manager on capturing the requirements, and a senior developer on the iterative application development.
Research & Discovery
What are assets?
An asset, in blockchain terms, can be any unit that has value (i.e., can be exchanged, purchased, transferred) and can be digitized. Legal contracts, for instance, have value and can be digitized, and hence, would benefit from the immutability of blockchain. For our collaboration with the client's payment and consumer team, we limited assets to what is currently used in the payments industry.
Who are the users?
Chain's partner on this project is the leading expert on payment processing for merchants and purchase patterns of consumers. As such, I relied heavily on interviews with their team and used existing research to gain a better understanding of the users. To further validate the needs and concerns of consumers (aka shoppers), I interviewed people out in the world since everyone is involved in making daily purchases.
In conjunction with researching the users, I also worked with our product manager and client's team to capture requirements spanning their business goals and the user tasks and interactions.
No use of special hardware
The innovation in this project was centered on the payment process and not the devices used. So we decided on a phone app for the Consumer, and a webapp for the Merchant.
Immediate access to apps & no-setup time
Not everyone in the solution demos would have a phone with fingerprint authentication enabled. As a result, we decided to use a single set of login credentials, which was created in advance and shared with participants.
Avoid errors in payment communication
While NFC, RFID, and smart cards are all great options for performing contactless transactions between consumers and merchants, our solution demos were going to involve a lot of people transacting near simultaneously in a room. The risk of errors was just too high so we used a simple QR code instead. The flow would be 1) Merchant presents the shopper with a QR code 2) Shopper scans QR code to connect to that merchant app and get product details for purchase.
UX Design & Challenges
To validate the user flow and begin to design the user experience, I sketched out the various consumer/merchant screens and interactions.
A combination of paper mocks and role playing helped me iterate over the user experience quickly and solve for the edge cases. I then moved onto creating high-fidelity mockups in Sketch, which I handed off to our developer. At the end of each sprint, I would demo the apps to our client to uncover any issues in the user experience.
Task sequences to match user expectation
Per our client's request, I initially had a giant pay button at the bottom of the consumer app home screen. During early demos, however, it was evident that users believed they were going to pay for the item when they hit the button, when in fact, they were only starting the process by scanning the QR code.
Remove the Pay button on the home screen. Instead, I used standard iOS menu items to navigate between the three main actions: 1) view list of available assets 2) scan merchant barcode to get purchase details 3) view transaction history
An intuitive payment experience for a complex flow
When paying for an item, a consumer should be able to:
- use multiple asset types
- spend little to no time on calculations
- use up all assets in their entirety, if less than payment amount
- use digital cash towards the remainder
- get an acknowledgment of payment.
Balancing all these needs in a simple and intuitive payment process was both tough and incredibly fun.
The payment experience can be best described in a simple scenario: Alice buying $18.28 of coffee at a local coffee shop.
Of the assets applicable to this merchant, Alice has:
- $500 in digital cash
- $6 worth of COCO Reward points
- $15 worth of Referral Reward points
For the payment, the sequence of steps could be:
- selects the digital cash first. $18.28 is applied towards the total
- selects her Referral Reward points (worth $15). $15 is applied in its entirety, and the digital cash payment is reduced to $3.28
- pays $18.28
Once Alice submits her payment, she and the merchant receive a confirmation. They can also review the transaction details at a later time to view spending/selling patterns.
Getting to the right information density
Given the agile nature of this project, my designs were being developed as I continued to iterate. With one of these designs developed, I discovered an issue around information depth during user testing. The payment screen was serving two purposes:
- itemize the purchase details
- select and pay.
Users were getting confused because the screen was cluttered with a lot of information and the horizontal payment layout was not easily scannable.
So I took on the challenge to communicate only what's required for the consumer to make the payment and remove all the noise and redundancy.
Based on feedback, I learned that almost all users skipped reviewing the product details before making a payment because 1) the products were in front of them and 2) they already knew the price breakdown before scanning the QR code.
The solution then became very easy - remove all the the product details and only display the total price and assets. The result was a significantly better payment experience in intuitiveness, simplicity and speed.
Launch & Result
The consumer iOS and merchant sales web apps are being presented by Chain and our client at conferences and roadshows, which are often attended by some of the leading banks and payment processing companies.
My favorite feedback came from a senior executive at our client's innovation team, who commented: "this is fu***** awesome!". There is a lot of excitement around using this project to spark innovation in the payments industry, which is all being driven by the Blockchain technology.
Retrospective: a clash of expectations
The visual design (typography, colors, icons, and animations) of the Consumer and Merchant apps were particularly challenging on this project because:
- the apps were going to be demoed on stage in front of a large audience and presented 1:1 in small executive meetings
- our client's design approach was to be reliable, trusted and established while the project values were to be innovative and bold
- Chain also had a stake in creating beautiful designs that were aligned with our standards.
My approach was to first provide three markedly different design directions that focused on the company and project values. Once a direction was selected by our client, which happened to be very muted, I iterated quickly to bring back some of the liveliness consumers would expect from a new innovation. The result was something that both Chain and our client were incredibly happy with.