Overview
- My role: UX designer
- Cooperation with: UI designer
- Company: Cinkciarz.pl / Conotoxia
- Project scope: web app for desktop and mobile
- Status: Implemented
The user can use the Cinkciarz Pay payment gateway to pay for purchases in a store, for example. The project consisted of processing the collected feedback from business customers and making changes to positively impact the user experience. This, in turn, affects conversion in the store
What has been improved:
- payment method selection mechanism
- optimization of the interface and finally going down to a single payment screen with additional contextual actions
- update messages, labels, supporting texts
- more precise validations
- refresh the interface with new components from the system design (consultation with UI designer)
Table of contents
Design process
01 Research
Done
02 Prototype
Done
03 Release and monitoring
Done
04 Second iteration and deployment of improvements
Done
01 Research
Research goals
- Learn about your competitor’s payment process.
- Discover what design patterns are used in payment gateways.
- Find out what the pain points of the current solution are.
UX reaserch metods
- Desk research
- Competitive analysis
- Focus group (account manager) – gathering feedback from business customers
What have I done?
I looked through our research repository to find insights from past research. I compared the largest competitors in the market – Przelewy24, PayU, Tpay, Blue Media (now Autopay), DotPay. I gathered quantitative data from the big data team – user flow, conversion, transaction time, unusual behavior. I looked for Jira tickets on topics related to the project – tickets from Customer Care, PMs and analysts. I arranged a meeting with the sales manager, business account manager and project manager. I asked the questions I had prepared in advance and we discussed the issue together.
Findings
- Competition groups payment methods better.
- Instead of several steps, recesses, contexts and additional navigation are used, such as a modal recess with the ability to return to a level above.
- Each country (currency) has its own favorite payment methods, e.g., in Poland there are BLIK, G-Pay, Apple Pay, online transfers.
02 Prototype
For desktop 1440 px
#Flow 1
#Flow 2
#Flow 3
#Payment statuses
#First iteration
For mobile 360x640 px
First iteration
Second iteration
03 Release and monitoring
Release
I skipped the testing phase and the patches were released to production. The bugs were so obvious that the risk of releasing this version was very low. Unfortunately, we are (as a team) not able to test every solution and every project. I approach each project individually. At the time we were testing other (more important from our perspective) issues.
Monitoring
Business account managers collected feedback from users who used the new version of the payment gateway. In additional, the Big Data team monitored traffic and unusual user behavior.
04 Second iteration and deployment of improvements
Collect feedback and deliver improvements
I collected qualitative data from customers and quantitative data from the Big Data team. I quickly identified areas for improvement and updated the prototype.