XFERS

Dashboard Revamp

MY ROLE

User interviews

Heuristics Research 

Wireframes

UI design

Xfers builds bank transfer and credit card payments software for businesses, processing over $100 million per year. With a jump in number of merchant onboarding, the frontend user experience became increasing important.

Discovery

We wanted to find out how our merchants were using the Xfers platform. Through that, be informed on how we can better design and build our services and products to help increase their productivity. 

User Interviews

01

IMPORTANT DATA MISSING

“I need to know which of these transactions are fees”

“Can I have my customer’s contact on the list?”

02

LACK OF SEARCH FLEXIBILITY

"I can't search past 30 days"

"Could you provide a filter by email and contact number to search for users?"

03

MAIN DASHBOARD UNUSED

"I go straight to transactions history or payment link"

"I log in when my customers face transaction problems"

04

VISIBILITY IS
IMPORTANT

"I want to know how my sales is doing and if my customers pay more with bank transfer or credit card over a period of time"

Affinity Mapping

User interview with one of Xfers' Merchant Users

Objective

Provide useful and functional improvements to our platform that can increase merchant's efficiency and productivity.

Previous Xfers Dashboard (above)

Previous Xfers Transactions History (above)

Prioritisation Matrix

With so many different gaps to solve and parts in the dashboard, we needed to prioritise and focus on what will give our merchants the most value, while balancing the cost of implementation. 

 

We listed out our top 2 priorities based on how important they are to the merchants, and how often they are used: 

1. Transaction List 

 

Every merchants, regardless of their unique needs, sign into the dashboard to retrieve data from the transaction list. Hence there is a high value to improve this and ease the job of the merchants. 

2. Main Dashboard (homepage) 

 

A dashboard helps users visualise Key Performance Indicators and other strategic data at a glance. It is a waste that merchants don't find the main dashboard useful despite it being the first thing they see when they log in. We want the merchants to make use of the homepage to get what they need quicker. 

Problem Statement

​How might we design the main dashboard to be useful for merchants?

+

How might we display adequate data on the transaction list, without overloading our users? 

Prototyping 1

User Testing 1

Observation 1
Users think statistics are useful because it gives them a good overview on how their business is doing.

Observation 2

Users are confused with the labelling of statuses. 

e.g. What does "Pending" transaction really mean?

Observation 3

While we had intended only for the customer's name to be clickable, users were clicking on the row for more details instead.

Observation 4

Multi-select feature not necessary. Merchants don't have a use for it.

Prototyping 2

User Testing 2

After making a round of iteration based on the results of the first user testing, we went out again and met with some of our merchants to validate the design and test to see if there were any other areas we could improve on. 

We returned with some minor changes and proceeded to execute the design for our frontend engineers.

Before & After

Key Learning Points

Main Dashboard

  1. Most users mentioned “Transactions” being the first thing they go to upon login, to check on problematic transactions. They can now have a quick overview on the latest transactions and go straight to the individual transaction with one click. 
     

  2. Merchants now have a quick overview of their monthly consolidated transactions. Selecting the month will bring them to “Transactions” within the month range.
     

  3. Selecting on “Completed Transactions” and “Pending Transactions” will take them to the selected transaction type

Transaction History Table

  1. Users now get more flexibility with filters
     

  2. Up to 60 days of transaction history
     

  3. Multi-search bar that will allow users to search not only by email, but additional keywords with just a space bar to separate the words.
     

  4. Users can select more than one transaction type. (E.g. Filter by Completed AND Pending AND Bank Transfers Transactions)
     

  5. When the row is selected, users will see more details of the transaction where they can access “Refund” and “More Details” features.

sabrinaljx@gmail.com​  |  Tel: +65 9139 2725

sabrina's portfolio