<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=504731893395981&amp;ev=PageView&amp;noscript=1">

UI for a Chat App

Designing a seamless P2P payment experience in a messenger

  • Invision
  • Sketch
  • Illustrator
  • Photoshop
  • Figma
Solution UX/UI design for a messaging app
Industry Software and Technology
Service type Design Concept
Methodology LeanUX
Team
  • UX/UI Designers
1
2
3
4
5
6

Customer

Case Highlights

Our design team created a user interface for a custom messenger with in-app payment processing capabilities.

  • In-chat payments
  • Smooth user flow
  • Efficient design process
  • Prompt handling of design change requests

Problem

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.

Solution

Design Process

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.

Market Research

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.

Use Cases

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.

UI Sketching

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.

Prototyping and Testing

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.

UI Design: Choosing Color Palettes

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.

Results

Screens 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.