CASE STUDY - BATCH PAYMENT & HPP
Asseco SEE | Istanbul
2016 - 2017
PROJECT OVERVIEW
From June 2014 to April 2017, I was working for Asseco SEE which is a leading provider of banking software solutions in the region and I was providing UX design consultancy for their virtual POS solution, named Paratika (it is currently part of Payten solutions), which offers a virtual POS infrastructure to the retailer companies: one-click payment; recurring payment; fraud control and reconciliation services.
I took part in the project as a UX researcher and Usability Analyst. My role was to analyse business requirements and requests and then create new user flows after conduct usability inspection and usability testing. I also designed the user experience of the HPP (Hosted Payment Page) of the product.
TEAM
Business Development Manager
Business Analyst
Web Developer
UX Research Consultant
Eylem Yilmaz: UX Research Consultant
Seeking out on trends for 3-d secure payment screens
Usability and user journey analysis of the current features
Analysing business requirements
Creating new user flows
Designing the user experience on the HPP of the product
BATCH PAYMENT
Batch Payment experience for post-auth transactions | Paratika Merchant Web Interface
Customer: CarrefourSA
Business Requirement: One-step Batch Payment feature for post-auth transactions
UX Methodology: Usability Inspection - Expert review
In the previous user flow, the user was only able to proceed post-auth transactions one by one, and they were allowed to make a partial post-auth. The manual input pop-up is shown below.
I firstly conducted a usability inspection in the current user flow of the feature, and then interviewed with the customer, CarrefourSA, to identify what they expect from the feature and to share what interactions would affect other features and behaviours by attaching with my suggestions. After the mutual agreement, I created the agreed user flow for the batch payment requests by removing the partial post-auth step and then adding a new pop-up screen to show operation results in detail: how many transactions have been approved and/or failed.
Approval of post-auth transaction
USER FLOW
User signs in the Merchant Centre
Signed in?
User makes a search for their merchant
Listed?
User selects
transactions which they
would post-auth
Proceed?
Error handling
Approval result
HOSTED PAYMENT PAGE (HPP)
In 2017, we were designing the HPP screens of Paratika. I was asked to conduct UX research for the current prototypes of the HPP. Considering the budget of the project, the best was to conduct a competitive analysis.
Customer: Payten
Business Requirement: Experience design for the HPP screens
UX Methodology: Usability Inspection (expert review) and benchmarking
We had three different prototypes having different user flows. The key sections of the HPP were;
-
Saved cards: It allows users to save their time during the payment process
-
Instalment options: It shows instalment details that are allowed to use on the selected card
-
Order details: It shows order details including a delivery fee and/or an instalment rate if required
My UX review on the user flows of the wireframes:
-
The retention time of the first and second prototypes was longer than the third one, which means the payment process would take longer than we would desire. A well-designed e-commerce website should keep users inside and encourage them to explore the website easily. If the retention time of a task - the payment process was too long to perform, it would be likely that the user would leave the website without completing the task, which means that the design on here was confusing. Therefore, the third prototype was easier to use than the other two options.
-
Instalment options section was almost the same for the three prototypes. The background colours were dark and overlapped with the text showing the instalment details, causing legibility issues.
-
Order info was not shown for the prototypes at all steps of the payment process. Users should be aware of how much they paid just before they clicked on the payment button. Payment process should be shown clearly as much as possible, because there might be an extra fee or an instalment interest on the total amount.
KEY INSIGHTS
User should be able to add at least 5 cards, and max 3 of these should be shown on the HPP to avoid a long scrolling experience. Saved card section should be also collapsible with an up/down arrow icon.
Order info (total amount, order amount and delivery fee) should be located at the right side of the page and should be present in every step of the payment process.
Order detail should be optional by clicking on 'Order Detail' button.
Instalment details section should be clearly visible on the pages as the changes in this section would affect the transaction amount. It should be limited to 6 lines.
