Application Design I-Task 3
INSTRUCTIONS
Task 3-Low Fidelity Prototype
Wireframe
 |
| Fig 1.1 wireframe progress |
I created a wireframe but with the content together before doing the low-fi prototype. I feel like more easier to organise the place for the category. In my user research survey, people usually used banking app for checking account balance, viewing transaction history and transfer fund. So I did the scene of doing the tasks of log in, checking account balance, view transaction balance and transferring fund.
Visual Design Concept
Icons:
 |
| Fig 2.1 Icon used |
 |
| Fig 2.2 Icon plug in |
I decided to use the icons from the plug in in Figma because it is simple and clean.
Typography:
 |
| Fig 3.1 Poppins font showcase |
I have chosen Poppins as the typeface of the app because it is sans serif, it has a modernity and clean structure, most of the website typeface nowadays are quite similar to Poppins typeface. Poppins has also Italic, Regular, Medium, Semibold, Extrabold and more type to choose.
Colour Scheme:
 |
| Fig 4.1 Colour scheme |
Public bank brand colour is bright red and white, I decided to follow the brand instead of using a new colour theme. There is a creamy white, grey white, bright red and a maroon in this palette, is quite contrasting.
Layout:
 |
| Fig 5.1 Home page layout |
 |
| Fig 5.2 Layout references |
In my user research, some respondents said they hope to reach the page they want faster without going through too many steps so I decided to placed the main features in the home page so user can complete their task in a more convenient way and lesser step to do. In the old PB Engage MY app doesn't have a 'quick pay' features, I think that's quite convenient so I added it too. In the PB Engage MY app, it have a notification, promotion and a announcement features but its difficult to reach, and I think that an announcement is quite important for an app or a brand.
 |
| Fig 5.3 Account page layout |
 |
| Fig 5.4 Log in layout |
I decided to add a category for cards because I found that sometimes when I can't remember the card number and my card wasn't beside me. Before showing the account balance, user have to log in again to prevent people see their privacy (the old PB Engage MY app only log in once and straight show the account balance at the home page).
 |
| Fig 5.5 Fund transfer layout |
 |
| Fig 5.6 references |
After comparing with several banking app, some of the app placed all the information in a page and some separate it. I decided to separate it because can be more clear instruction for user to complete the current task. I separate it into 7 steps: account number, bank name, amount, account type, recipient reference, info confirmation and successful page.
User Testing:
I conducted with 3 different participants through the user testing. Every user have been given different task to complete.
Task 1-Check account balance and account details.
Task 2-Transfer fund.
Task 3-Check transaction history and details.
Questions to ask user for feedback:
https://docs.google.com/document/d/15w4laTSRLvcFv4G6Cb5ho-R-OZKRxvqeq5xCYHWVj2A/edit?usp=sharing
Participants:
#1 User: Qian Ee (Conducted face to face)
 |
| Fig 6.1 user 1 feedback |
#2 User: Yu Yen (Conducted face to face)
 | |
|
#3 User: Alicia (Conducted through Whatsapp)
 |
| Fig 6.3 User 3 feedback |
Future Improvement:
Task 1: Check Account Balance and Details
Clarify Navigation: Consider adding a brief tutorial or guidance for first-time users to explain where to find account-related information, helping them distinguish between "Profile" and "Account" sections.
First-Time User Assistance: Incorporate tooltips or a dedicated section for new users, providing brief explanations of banking terminologies or app features.
User Onboarding: Implement a user onboarding sequence for first-time users, guiding them through key app features and functionalities.
Add Contextual Help: Include a help or FAQ section within the app that users can access for quick assistance.
Task 2: View Transaction History and Details
Scheduled Payment Indicator: Introduce a visual indicator or label to distinguish scheduled payments in the transaction history, enhancing clarity.
Payee Details in Transaction Details: Consider adding a section for payee details in the transaction details page to provide comprehensive information.
Customisable Filters: Allow users to customise filters for transaction history, providing flexibility based on their preferences.
Task 3: Transfer Fund
Button Clarity: Refine the design or placement of the "Transfer" and "DuitNow QR" buttons on the home page to minimize confusion.
Identity Verification Step: Incorporate an additional step for identity verification after confirming the fund transfer, ensuring an added layer of security.
Transaction Confirmation: Enhance the confirmation message after the fund transfer, making it clear that the transaction has been initiated and providing relevant details.
General Suggested Features
User Education Hub: Include an educational hub within the app that offers guides, video tutorials, and FAQs to educate users about various banking tasks and terminologies.
Interactive Notifications: Implement interactive push notifications that allow users to quickly access key features or address pending actions directly from the notification.
Payee Management: Introduce a payee management section where users can save and edit payee details for a more streamlined fund transfer experience.
Comments
Post a Comment