About: PayPhi is a multiplatform merchant payment gateway that provides an end-to-end, unified, omnichannel digital payments platform to businesses, banks and networks. Duration: 1 month (2022) Role: UI Designer
Project Overview
I was hired as a freelancer to refresh the existing UI since the portal was designed some time back in the late 2000s and for a company that's supposed to be 'cutting edge' it didn't inspire a lot of confidence. There were a couple of limitations regarding user flows and interactions since they needed a quick refresh without working much on the backend.
Existing system
Design brief
To redesign the UI of the PayPhi payment gateway and create a modern looking, responsive design keeping technical limitations in mind.
Wireframes
User and client feedback
To test out the user flows and get some feedback on visuals a quick user testing was conducted with the digital wireframes where users were asked to think out loud about the screens and perform a simple payment flow via various means. Following points of feedback were noted from both, clients and users:
Payment method is a little cluttered, not very easy to scan.
Buttons are a little small and harder to click due to content on the background. (multiple people misclicked)
The branding area on top is taking too much unnecessary space.
Amount to be paid should be visible on every screen
Style guide
Since the screens needed to be completely redesigned, I created the style guide from scratch keeping the following points in mind:
Accessibilty: Payment gateways need to be accessible by everyone so it is designed keeping in mind WCAG for colour contrasts and visibility in font sizes as well as keyboard controls for people with motor disabilities.
Simplicity: Since it is a finance gateway it is important to keep it simple and allow users to focus on the task at hand without distractions. In such cases less is more.
Branding: PayPhi allows its premium partners to customize colours according to their branding so using a neutral background colour and allowing branding opportunities was required.
UI Design
Based on the testing and feedback on the wireframes, I made a couple of changes before creating the final UI design:
Instead of splitting the screen using the card, the top consistent part now consists of the client logo and payment details, while the PayPhi logo got moved to the footer section
All interactions for payment methods occur on the same page as a scroll down, thereby eliminating the need to go back and forth between screens in case of misclicks
Payment methods have subheaders to make it easier to scan through and find the one the user is looking for
Unified logos are used in payment method cards to give it a cleaner look along with more branding colour opportunity
