As the sole designer, I worked closely with the customer success manager in the research and testing phase, collaborated with PM and developers in the design part. I was responsible for creating research deliverables, the interaction & visual design of the product and marketing assets.
Back to 2016, the nanopay's retail solution bridging consuemrs and merchants was working fine, when the merchant only has one device. However, when more than one devices were adopted, problems start to arise. There is no connection between different devices, which causes repetitive work like cashing out, connecting bank account and manage transactions. And we started getting complaints and negative feedback from the merchants.
Therefore, we decided to create a gateway to connect all the merchant apps, to make the merchant's life easier.
A Deeper Dive into the Problem Space
To better understand the problem, I worked closely with the customer success manager to find out what the merchants really need. The first step was simply going for a visit and opening up the topic with some small talks. We talked with 8 merchants with 14 merchants onboard in Liberty Village and got some great insights. The following is some highlight words from our note:
"We have two iPads, that means need to connect bank account twice, and cash out twice to get our money"
"I like the way MintChip works fast and easy, but there are too much sensitive information in the merchant app and it is dangerous just in the app itself"
"I don't want the server to touch the cash out setting so basically I'm taking care of all the MintChip payments"
"At one time a customer mistakenly tipped us 100 dollars and we had to give him cash back because there is no refund option"
"There are 3 devices in our place, two iPads, one terminal, and each time if there is something, we'll need to look through all three of them"
We noticed merchants were frustrated about the repeated actions across multiple devices and the unrestricted access to the sensitive information in the merchant app.
The design needs to reflect both user needs and the business goals. I also incorporated the requirements and the vision from the business side.
Follow the MintChip branding to convey a consistent, friendly but impactful visual experience
Design a solution to help merchants manage transactions and cash out across multiple devices
Securely protect merchant's sensitive information
Solution 1: All the Transactions in ONE Place
It used to be a pain for merchants to cash out because the MintChip balance is stored separately in different individual devices. In order to cash out, a merchant will need to cash out multiple times on multiple devices. Especially if the cash-out frequency is daily, it can be a big pain.
But with the merchant portal, they can easily cash out all the balance or balance from the individual device, at one click. Plus, with all the transactions at one time, it becomes easier to monitor and manage the transactions.
The before and after user journey maps below shows how the retail portal can help merchant cash out and manage transactions painlessly.
For cashouts, there are 3 main elements: devices , amount and bank account. My first assumption was to do a step-by-step wizard view to guide them through the process. However, after talking the customer success manager, we noticed this may not be a good flow for merchants. And we started with asking the following questions:
How often do merchants cash out?
Do they normally cash out to the same account?
How much will they cash out?
If they have more than one device, will that affect their behaviour?
It takes 2 business days for the balance to show up in the bank account, how this affects the merchants?
We found out that Most merchants have one bank account dedicated to their business, but some have more than one. And though MintChip is much cheaper than credit cards payment, merchants are not feeling very safe because it is pretty new. This makes them cash out all the money as soon as they receive it from the merchant app, especially with the two business days delay.
Solution 2: Refund Directly from the Portal
Refunding customers used to be a big pain for merchants as there is no refund option and merchants will have to do it in cash, not to say refunding a customer remotely. In order to solve this problem, we added the refund option from the portal.
The biggest challenge in designing the refund flow is to find out where the refund button should locate. I experimented with 3 options: 1. Occupy one column in the list view; 2. Hidden inside a menu button in the list; 3. Hidden inside the list.
We decided to take the third option as refund is not a frequent action and should be carefully considered. Also, we don't have other capabilities for transactions other than refund, and by doing 3 ,we can show details like transaction breakdown under the list, so we don't need to develop a detail page for transactions separately. As a result , we settled on option 3. But we think as we have more capabilities and more details to show, option 2 will be a good choice. To make the action more discoverable, we added the hover effect on the list.
The refund option solved the problem of the mess with sales report when using a different method other than original format to refund. The two transactions with different sale and refund greatly help the accountant out of the confusion.
Solution 3: Dump the Merchant App - Sensitive Info Exclusively in the Portal
One of the biggest concern for the merchants is the security of sensitive information, which includes bank accounts, MintChip balance, etc. Most of the time, the owner only wants the server to have access to accept payments and view transactions, which results in that either the owner or manager is the only one who uses the MintChip device.
We tried using user access control based on user login information, but the result was disappointing. The device is shared by all the workers at the same workplace, and switching accounts during the busy hours is a huge pain.
What is the sensitive information?
Money - Cash out setting , bank account
Refund - “I hope my server can approach me for a refund, and explain to me what happened”
Security - Logout, password
In the research, we noticed that sensitive actions like refunding, cash-outs don't happen frequently and should be securely managed by the managers. So we made a decision on moving all the sensitive actions to the portal which only managers have access to, and made the merchant app only capable of accepting payments and view transactions.
All the other actions like the bank account, cash out, including refund, are exclusively moved to the portal, so only the person who has access to the portal can touch those settings, making the MintChip balance securely managed.
Without a clear and easy onboarding process, all our solutions will just be in vain. In order to use the retail portal, merchants need to finish the following tasks:
Register a merchant account
Provision merchant apps(devices) to accept payment
Connect a bank account to cash out
We had discussions on if we allow people to play with the portal without providing the business information, but we decided not to do that, in order to better verify the identity of the merchant and protect from fraud.
The goal for merchants is to accept payments and cash out, so we added the two main steps to help them set up. As the two steps are so important, we decided to show them again if merchants skip.
Step 1: Provision Devices
The purpose is to create a connection between the devices and the portal, so the transaction information can be transferred between.
Each device has a unique ID, which we use them to distinguish between different ones in the portal.
Step 2: Connect Bank Account
Without a bank account, merchants can still accept payments, but they will be stored in the MintChip wallet balance. In order to cash out, they need a bank account and this is why we made it the second step.
We currently use the micro deposit to verify bank account. Users need to submit their bank information and we will deposit an amount to their account, and if they input the right amount, the account will be verified.
The Complexity of A Restaurant
In a restaurant, there are many parties participating and interacting with the MintChip products: the service manager, the owner, servers, cashier... In the reality for a small size merchant, many roles overlap together.
The graph below outlines their touchpoints and end to end journey before and after, showing how the MintChip retail portal improves the way people work. All 3 parties need to touch every separate MintChip merchant app because there is no connection in between, but with merchant portal, the servers can just do their job, the owner can easily monitor the transaction process without worrying about security, while the accountant can get all the logs at one time.
The Landing Page
I was also responsible for designing the landing page for the retail portal.I worked closely with the customer success manager and the marketing team to finalize the content and structure of the site. We followed this 3-step-methodology:
Define the user flow
how users go to our website, how we want to guide them to reach to us
They know us from the brochure - search online - go to the website - go through content - contact us - conversion
what do users want to see, what should be included
Users want to know who we are, what are we doing, what problem is retail portal solving, what kind of benefits they can get - contact information
what the website will look like
The visual design should follow the same brand guideline as MintChip