Table of Contents


MintChip Retail Portal: A Management System for Merchants

Product Design
7 min read

MintChip Retail Portal
1-1

The MintChip Retail Portal is an online application for merchants accepting MintChip payments to better manage transactions, provision multiple devices and easily cash out.

See the Live Landing Page

My Role

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.

Background

MintChip is a digital currency that provides the underlying system to facilitate the exchange of value between two parties in real-time without intermediaries. Forbe has a video explaining how MintChip works.

how mintchip works
1-1-0 / Consumer scans the QR code that the merchant app generates to pay to the merchant

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.

nanopay retail structure with one and multiple merchant apps
1-1-1 / nanopay retail solution with one device in 2016, and multiple devices in 2017

Therefore, we decided to create a gateway to connect all the merchant apps, to make the merchant's life easier.

The merchant portal is a gateway
1-1-2 / Merchant devices including merchant apps on iPad, iPhone and Ingenico terminals. This question mark shows where the merchant portal should fit in.

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.

Persona of Retail Portal
1-2 / We created the persona after talking with merchants and organizing the notes.

Project Goals

The design needs to reflect both user needs and the business goals. I also incorporated the requirements and the vision from the business side.

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.

The old flow of cashing out on merchant app
1-3 / The old flow only has two steps, but with multiple devices, it became a problem.

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.

Connect multiple devices with merchant portal
1-3-1 / With all devices connected in the merchant portal, merchants can cash out all the balance easily.
cash out -user journey map - before cash out -user journey map - after
1-4,1-5 / From the user journey map before and after, we can see the portal reduced the repeat actions the users do when cashing out with different devices.

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:

Early explorations of cash out flow
1-5-1 / We explored full and partial cash-outs, as well as cashing out with multiple steps and one step.

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.

iterations on cash out flow
1-5-2 / Iterations on cash out flow
the prototype of how a merchant cashes out
1-6 / Prototype simulating how a merchant can cash out all the MintChip balance together: choose cash-out option -change the bank account - modify cash-out amount- confirmation

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.

Add refund option to the portal
1-6-1 / Merchants can refund consumer directly from the portal
refund -user journey map - before refund -user journey map - after
1-7,1-8 /The red part shows the repeat process Keiko has to do when looking for a specific transaction, which is greatly improved by the retail portal. Also, the refund is possible in the portal so no more cash refund and sensitive information are securely protected.

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.

3 explorations of where the refund option should fit in
1-9 / 3 explorations of the refund option

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.

the prototype of how a merchant refunds
1-10 / Prototype simulating how a merchant can refund within the MintChip ecosystem

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.

screenshot of merchant app showing the access for the users
1-11 / The old MintChip merchant app allows users to access sensitive information, like password and cash-out settings

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?

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.

The screenshots of the new merchant app
1-12 / The new MintChip merchant app only allows users to accept payments, view transactions and turn on/off the tip toggle
The screenshots of the new merchant app
1-13 / Merchants will manage their settings in merchant portal with information secure managed

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.

Onboarding Merchants

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:

  1. Register a merchant account
  2. Provision merchant apps(devices) to accept payment
  3. 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.

registration steps
1-14 / Merchants need to input the personal information and business information, then nanopay will verify their accounts.

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.

Set up process still available after skip to the home screen
1-15 / Set up process still available after skip to the home screen

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.

information transfers between merchant app and portal
1-16 / Information transfers between merchant app and portal

Each device has a unique ID, which we use them to distinguish between different ones in the portal.

The flow of provisioning a device to the portal
1-17 / We ask merchants to name their devices and choose the device type in order to help them better distinguish different ones.

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.

merchants cash out via bank account
1-18 / Merchants need a bank account connected to cash out

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.

Flow of connecting a bank account
1-19 / In order avoid fraud and spam, we decided to only allow 3 trials. After that, users need to contact us to have their account 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.

Structure before and after MintChip retail portal
1-20 / Touchpoints and journey before and after

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:

  1. 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
  2. Information structure
    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
  3. Design
    what the website will look like
    The visual design should follow the same brand guideline as MintChip
first version of landing page
1-21 / The first version highly focus on the functionality of the retail portal, but didn't connect well the original merchant app, which makes the merchants confused.
animation prototype
1-22 / Animating prototyping with Principle on the landing page
revised version of landing page
1-23 / The final version provides instruction on how to get started with the existing merchant app. The pricing is put at a much more prominent place.

Launch and Learn

MintChip Retail Portal was launched in June 2017. With the portal, merchant's life became easier with less repetitive work, and it also lightened the burden on the support team.

COMPLAINTS RATE DROPPED BY 50%+

PROVIDED WHITE-LABEL SOLUTION TO 3 EXTERNAL CLIENTS

Above / I'm not able to provide the accurate data due to NDA.
"It is much easier to cash out now."
"Seeking a transaction is way easier"

At the same time, we were exploring further solutions like auto-settlement. The following are some learnings:

  1. Observations can unveil unexpected facts, and discover more users insights in user research.
  2. Communication helps me understand the goals and priority of different teams.
  3. Story-telling is a powerful tool to gain empathy and get buy-ins.
  4. Collaboration the source of ideas and creativity. I was inspired a lot by teammates in the brainstorming and design critique sessions.

* Due to the change of strategy, the retail portal is closed for new merchants, while the MintChip consumer app is still available.


Related Links

Related Writing(s)

Next Project:
nanopay Design System: Accelerating Design and Development