me.png

Zarya Faraj

Welcome to my portfolio! I specialize in end-to-end product design, which includes UX, prototyping and visual design.

Consumer Payments

Consumer Payments

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.


Problem 

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. 


Vision

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: 

  1. Asset issuers, such as the Federal Reserve, will digitize currencies and assets for instantaneous transactions and borderless transfer-of-ownership
  2. 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)
  3. All transactions will be secured, immediately processed and recorded on the blockchain. 

My Role

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. 

consumer_assets

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.

flow.png

Constraints

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.

sketches_consumer_merchant.JPG

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. 

shopper_pay_confusion
Solution

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

shopper_pay_fix

An intuitive payment experience for a complex flow  

When paying for an item, a consumer should be able to:

  1. use multiple asset types
  2. spend little to no time on calculations
  3. use up all assets in their entirety, if less than payment amount
  4. use digital cash towards the remainder
  5. get an acknowledgment of payment.

Balancing all these needs in a simple and intuitive payment process was both tough and incredibly fun.

Solution

The payment experience can be best described in a simple scenario: Alice buying $18.28 of coffee at a local coffee shop. 

merchant_sale.png

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
shopper_checkout.png

For the payment, the sequence of steps could be:

  1. selects the digital cash first. $18.28 is applied towards the total
  2. selects her Referral Reward points (worth $15).  $15 is applied in its entirety, and the digital cash payment is reduced to $3.28
  3. pays $18.28 
shopper_payment

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. 

sale_confirmation

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:

  1. itemize the purchase details
  2. 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.

Solution

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. 

shopper_info_after.png

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:

  1. the apps were going to be demoed on stage in front of a large audience and presented 1:1 in small executive meetings
  2. our client's design approach was to be reliable, trusted and established while the project values were to be innovative and bold
  3. Chain also had a stake in creating beautiful designs that were aligned with our standards.
To reach consensus on the visual design direction, I had to lead and liaison between Chain and our client’s executive team, and enable compromises while making them feel that I was championing their needs. 

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. 



 
Chain Core Dashboard

Chain Core Dashboard

Pdestal Cloud

Pdestal Cloud