PaySmartly
A mobile app for (P2P & P2M) payment transactions.
POC
Scenario
Create a mobile app for (peer to peer and peer to merchant) payment transactions.
Problem statements
How people transfer funds from their bank account to another person’s account using mobile applications.
How people pay their bill to merchant using mobile app.
User Flow
Before I start designing user flows, I need to understand my personas’ needs.
Why is the user here?
What do they want to accomplish?
What information does the user need to accomplish the task?
What are the barriers that could stop them from reaching their goal?
​
How users end up on our app really depends on their needs and expectations regarding our service or product. On top of this, users have different levels of knowledge and different expectations. Therefore it’s important to first define personas, and then focus on finding the best way for each persona to navigate our app.
​
Peer-to-peer apps are especially popular with younger users who are more tech-savyy and less worried about potential danger of sharing their financial information with a third-party software product.
OnBoarding for first time users:
1. A user searched for a specific term on google
2. The user clicked on your app and installed the PaySmartly app
3. Users choose a language
4. Mobile verification
5. The app sends an SMS for verification.
5. And set a 6-digit mPIN (personal identification number) or use Touch ID.
7. Displays a list of bank accounts that are supported. Users can pick an account for which they have enabled mobile banking, and PaySmartly automatically configures that as the
account for receiving money.
8. The system uses the mobile number as the default ID, though users can create an
ID of <username>@upi if they wish to.
How to send money (P2P) for Registered Users:
1. Log on to app with your 6-digit mPIN or use Touch ID
2. Select the option of send money
3. Enter beneficiary’s/Payee mobile number/virtual ID
4. Enter amount
5. Select account to be debited
6. Get confirmation screen to review the payment details. Click on ‘Confirm”
7. Enter mPIN or finger print system
8. Get successful or failure message
How to send money (P2M) Registered Users
1. Log on to app with your 6-digit mPIN or use Touch ID
2. Click on Scan & Pay.
3. Scan QR Code with the merchant.
4.Upon verification enter the amount to send.
5. Enter remarks if needed.
6. Enter mPIN or finger print system
7. Get successful or failure message
Send money P2P for New and Registered Users:
Send money P2M for New and Registered Users:
Wireframe
After I had a better understanding of user goals and behaviors, I have decided key features of the app below in order to create wireframes.
Visual Language
Visual language is like any other language. The words of visual language can be grouped into colour, space, shape and movement.
Mood Board :
A mood board is one of the visual deliverables in the design process. It is a collage that generally consists of images, text, and objects that describes the feelings we obtain through the digital products aside from the actual layout of pages.
Visual Aesthetics :
1. Using minimalistic GUI
2. Present content keeping the screen in mind
3. Use Recognizable icons
4. Avoid background images and patterns
5. Reduce scrolling by using concise text patterns
6. Simple colors and fonts
7. Shadows these are very important because they indicate to a user things about an element, like whether it’s separate or a part of another element, if a button has been pressed or not, or if an element is increasing in size vs. elevating.
Color Scheme:
Simplifying the color scheme improves the user experience while having too many colors can have a negative impact upon it.
Typography :
The purpose of text in app is to establish a clear connection between the app and user and to help users accomplish their goals.
UI Design
The ultimate goal is to simplify our interfaces and make them more functional and usable. Simple user flows, clear visuals, and forgiving design help create a seamless interaction.
