Designing a seamless P2P payment experience in a messenger
Through the Design Thinking and Double Diamond models, our team worked closely with the customer to fill all of their UI/UX requirements.
Our design team created a user interface for a custom messenger with in-app payment processing capabilities.
Our client, a UK-based consulting and auditing company, considered creating a chat application that would help replace cash transactions with online transactions. They addressed Softeq to design a user interface for the app.
The customer didn't require a fully functioning MVP, which allowed our team to focus on the design. In close cooperation with the client we followed the principles of Design Thinking and Double Diamond to create an interactive prototype with Invision. When we tested the UI design with real users, we were able to make speedy changes, thus reducing the costs usually associated with change requests.
To design an intuitive user interface, we drew inspiration from popular messaging applications available on the market. We analyzed Facebook Messenger, WhatsApp, and WeChat, identified similarities in the UI element positioning and color schemes, and implemented them in our interface.
Next, we identified the use cases for the application. To that end, we developed fictional characters representing potential users, and modeled possible use case scenarios:
1. A user has gone over the budget and needs help from friends or family
2. A user finds himself/herself in an unforeseen situation when money is urgently needed.
3. A user regularly pays bills with a mobile phone because it is faster and more convenient.
4. A user frequently sends money to his/her relatives.
Next, we thought out the money transfer flow and sketched it out. To receive money from another user, it is necessary to:
1. Log in
2. Go to the feed
3. Tap on “Search”
4. Go to the contacts list
5. Choose a person and click on his/her avatar/name
6. Request money via a text message
The person clicks on the button in the right upper corner of the chat to open the transaction screen. After that, he/she goes back to the chat and receives a payment confirmation.
The main objective at this stage was to make sure that real users can easily navigate the prototype app interface and complete their desired action quickly. Based on the feedback provided by the test users, we made corrections to the design and created a flowchart — a graphic representation of the steps users need to take to make a payment transaction. The flowchart allows developers to better understand how screens and graphic elements are connected to each other and which button a user has to tap to go to another screen.
When choosing a color scheme for the app UI, we followed the customer's corporate style guidelines.
We designed several screens and sent them to the client for approval.
Our goal was to show the maximum number of objects — videos, audio messages, confirmations of the completed transfers, which helped us negotiate the UI features early on. After making corrections according to the client's comments, the screens were ready for programming.
The client was satisfied with the design, and should they choose to put it into development we have qualified developers who can take care of it.