Odyssey Banking App - Payment and Transfer Mobile App UX Design Challenge

Welcome to the “Odyssey Banking App - Payment and Transfer Mobile App UX Design Challenge". This is the 8th challenge from the Odyssey Banking App project. In the previous challenges, we already created several important features (security, customer dashboard, account dashboard, alert management, transaction, account servicing) for the Online Banking application. In this challenge, we will create a Payment and Transfer feature for Odyssey Mobile Banking (via Mobile Hybrid App).

Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial designs for checkpoint feedback (both Individual and Business User)
01. Payment Dashboard
02. Transfer Between Accounts
03. Manage Payee
04. Make Payment
04a. Repeat Recent Payment
04b. Load Payment Template (Business)
04c. Import Payment File (Business)

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented (both Individual and Business User)
01. Payment Dashboard
02. Transfer Between Accounts
03. Manage Payee
04. Make Payment
04a. Repeat Recent Payment
04b. Load Payment Template (Business)
04c. Import Payment File (Business)
05. Manage Payment Template (Business)
06. Manage Direct Debits
07. Manage Standing Order
08. Approve Transaction (Business)
09. Online Transaction Status

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

• Create user story and related UI/UX screens and interactions for Payment and Transfer for Odyssey Online Banking application (Mobile Hybrid App)

• Our goal in this project is to create strong direct relationships with our customers. We want to provide everything - a blended bank, preferential banking for their family, and open to non-banking services via our digital app (Responsive Web App and Mobile Hybrid App). 
• This project goal is to create two banking applications for the Odyssey customers:
  • Odyssey Online Banking (Responsive Web App), and
  • Odyssey Mobile Banking (Hybrid Mobile App in iOS and Android)
• This challenge will focus on creating user story and related UI/UX screens and interactions for Payment and Transfer for Odyssey Mobile Banking application (Mobile Hybrid App)
• Payment and Transfer will consist of 12 major feature elements that need to be simulated, they are:
  • 01. Payment Dashboard
  • 02. Transfer Between Accounts
  • 03. Manage Payee
  • 04. Make Payment
  • 04a. Repeat Recent Payment
  • 04b. Load Payment Template (Business)
  • 04c. Import Payment File (Business)
  • 05. Manage Payment Template (Business)
  • 06. Manage Direct Debits
  • 07. Manage Standing Order
  • 08. Approve Transaction (Business)
  • 09. Online Transaction Status

• Individual and/or Business Customer that already open a Bank account and want to use the Online Banking and/or Mobile Banking Features

• Name: John Appleseed
• Occupation: Coffee shop owner
• Goals: 
  • Paying bills and the salary of my employees.
  • Transfer money for local and overseas bean importers.
• Frustrations: Need better experience in doing payment and transfer for his personal and business life.
• Wants: Application that makes his journey doing payment and transfer intuitive and easy. 

• MUST strictly follow our Branding Guidelines
• MUST pass WCAG accessibility standards. You are allowed to change some colors or layout if it can increase the accessibility. You can use the Inclusive design approach for this. Some example for inclusive design: Inclusive Design Principle or Microsoft Inclusive Design
• Follow the naming convention in the approved design. For example, as much as possible, only capitalize the first letter of two words format such as “Personal information”. Two letters can be capitalized if they belong to abbreviations such as “Secure PIN” or “User ID”.
• Modern, simple, and clean design
• Reduce the number of interactions required from users as much as possible
• Use color or great visual comparison to highlight a comparison of important information
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information
• You must stick to the requirements (use case and user story). Each additional page may burden the system and that we want to avoid.
• Only use stock photo from Pexels and Unsplash.

• Completeness of your submission based on requirements laid out on Payment and Transfer User Story.xlxs
• Your submission must follow the flow and requirement on Payment and Transfer Use Case.xlsx

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum.

• Creativity: 7
• 1: barely new ideas
• 10: a utopic product with features not proven to be able to be fully implemented

 

• Aesthetics: 10
• 1: low-fidelity design, wireframe or plain sketch
• 10: top-notch finished looking visual design

 

• Exploration: 7
• 1: strictly follow an existing reference or production guideline
• 10: open to alternative workflows/features not listed here that would help the overall application

 

• Branding: 10
• 1: don’t care at all about the branding just functionality
• 10: without a properly branded product there is no success

• Applicable to: Individual and Business customer.
• Use case: sheet 1. Payment Dashboard
• Payment and Transfer Tab (OLBMB_P&T_01)
  • This will be an entry point to do the various payment and transfer related actions for customer.
  • Create a new pop-up navigation menu on from Quick Actions card with name Payment and Transfer.
  • As a customer, I should be able to view and access the various payment and transfer functions from the Home Page
    • 1) Transfer between Accounts
    • 2) Manage Payee
    • 3) Make a Payment
    • 4) Manage Template (available to Business customer only)
    • 5)Approve Transactions(available to Business customer only)
    • 6) Manage Direct Debits
    • 7)Manage Standing Orders
    • 8) Online Transaction Status
    • For more details please check acceptance criteria on the XLS.
• Access “Make a Payment” Quick Link (OLBMB_P&T_02)
  • As a customer, I should be able to access 'Make a Payment'  quick link from the Home Page. Refer to Quick action card on home/dashboard.
• Access “Make a Transfer” Quick Link (OLBMB_P&T_03)
  • As a customer, I should be able to access  'Make a Transfer'  Quick link from the Home Page. Refer to Quick action card on home/dashboard.

• Applicable to: Individual and Business customer.
• Use case: sheet 2. Transfer between Accounts
• Initiate Transfers between my account:: OLBMB_P&T_04
  • As a customer (Individual or Business), I should be able initiate Transfers between my accounts
• Review a submitted Transfer before completing it: OLBMB_P&T_05
  • As a customer (Individual or Business), I should be able review a submitted Transfer before completing it.
• Access Context Sensitive Help on the Transfers: OLBMB_P&T_06
  • As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Transfers page
• Set up recurring Transfers from my Current accounts of Odyssey to my other eligible Odyssey Accounts: OLBMB_P&T_41
  • ������As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Transfers page

• Applicable to: Individual and Business customer
• Use case: sheet 3. Manage Payee
• View Payees page to manage the payees: OLBMB_P&T_07
  • As a customer (Individual or Business), I should be able land into  the Payees page to manage the payees.
• View Payees that I have added to my profile in the past: OLBMB_P&T_08
  • As a customer (Individual or Business), I should be able to view  Payees that I have added to my profile in the past.
• Update Payees that I have added to my profile in the past: OLBMB_P&T_09
  • As a customer (Individual or Business), I should be able to update Payees that I have added to my profile in the past.
• Delete Payees that I have added to my profile in the past: OLBMB_P&T_10
  • As a customer (Individual or Business), I should be able to delete  Payees that I have added to my profile in the past.
• Add new Payees: OLBMB_P&T_11
  • As a customer (Individual or Business), I should be able to add new Payees
• Access Context Sensitive Help on the Manage Payee Page: OLBMB_P&T_12
  • As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Manage Payee Page

• Applicable to: Individual and Business customer
• Use case: sheet 3. Make a Payment
• View Payments Page' to make various types of Payments: OLBMB_P&T_13
  • As a customer (Individual or Business), I should be able to land into the 'Payments Page' to make various types of Payments.
• Make immediate payments from my accounts: OLBMB_P&T_14
  • As a customer (Individual or Business), I should be able to make immediate payments from my accounts.
• Make forward dated payments from my accounts: OLBMB_P&T_15
  • As a customer (Individual or Business), I should be able to make forward dated payments from my accounts.
• Access Context Sensitive Help on the Make a Payment Page: OLBMB_P&T_16
  • As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Make a Payment Page
• Alerted before I Submit the Payment: OLBMB_P&T_39
  • As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Make a Payment Page
• Option to save the Payee for a later reference: OLBMB_P&T_40
  • As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Make a Payment Page

• Applicable to: Individual and Business customer
• Use case: sheet 4a. Repeat Recent Payment
• Repeat a recent Payment from my accounts: OLBMB_P&T_17
  • As a customer (Individual or Business), I should be able to Repeat a recent Payment from my accounts.
• Access Context Sensitive Help on the Repeat a recent Payment Page: OLBMB_P&T_18
  • As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Repeat a recent Payment Page.

• Applicable to: Business customer
• Use case: sheet 4b. Load Template
• Load a previously saved template to make a payment: OLBMB_P&T_19
  • As a customer (Business), I should be able load a previously saved template to make a payment
• Access Context Sensitive Help on the Load a Payment Template Page: OLBMB_P&T_20
  • As a customer (Business), I should be able to access Context Sensitive Help on the Load a Payment Template Page

• Applicable to: Business customer
• Use case: sheet 4c. Import Payment File
• import a Payment File of various types to make Bulk Payment: OLBMB_P&T_23
  • As a customer (Business), I should be able import a Payment File of various types to make Bulk Payment
• Access Context Sensitive Help on the 'Import a Payment File' Page: OLBMB_P&T_24
  • As a customer(Business), I should be able to access Context Sensitive Help on the 'Import a Payment File' Page 

• Applicable to: Business customer
• Use case: sheet 5. Manage Template
• Manage (Update/delete) any previously saved payment template in my Online portal: OLBMB_P&T_21
  • As a customer (Business), I should be able manage(Update/delete) any previously saved payment template in my Online portal
• Access Context Sensitive Help on the Manage a Payment Template Page: OLBMB_P&T_22
  • As a customer (Business), I should be able to access Context Sensitive Help on the Manage a Payment Template Page.

• Applicable to: Individual and/or Business customer
• Use case: sheet 6. Manage Direct Debits
• View the Direct Debits configured on my accounts: OLBMB_P&T_25
  • As a customer (Business), I should be able view the Direct Debits configured on my accounts
• Manage (cancel) the Direct Debits configured on my accounts: OLBMB_P&T_26
  • As a customer (Individual or Business), I should be able manage(cancel) the Direct Debits configured on my accounts
• Access Context Sensitive Help on the Direct Debit: OLBMB_P&T_27
  • As a customer(Individual /Business), I should be able to access Context Sensitive Help on the Direct Debit

• Applicable to: Individual and/or Business customer
• Use case: sheet 7. Manage Standing Order
• Access the Standing Orders page from my OLB/MB portal: OLBMB_P&T_28
  • As a customer (Business), I should be able access the Standing Orders page from my OLB/MB portal
• View the Standing Orders I have created on my accounts: OLBMB_P&T_29
  • As a customer (Business), I should be able view  the Standing Orders I have created on my accounts
• Update the Standing Orders I have previously created on my accounts: OLBMB_P&T_30
  • As a customer (Business), I should be able update  the Standing Orders I have previously created on my accounts.
• Cancel the Standing Orders I have previously created on my accounts: OLBMB_P&T_31
  • As a customer (Business), I should be able cancel the Standing Orders I have previously created on my accounts.
• Access Context Sensitive Help on the Standing Order Page: OLBMB_P&T_32
  • As a customer(Individual /Business), I should be able to access Context Sensitive Help on the Standing Order Page

• Applicable to: Business customer
• Use case: sheet 8. Approve Transaction
• Access the Approve Transaction page from my OLB/MB portal: OLBMB_P&T_33
  • As a customer (Business), I should be able access the Approve Transaction page from my OLB/MB portal
• View and  Approve the Transfers/Payment/Standing Orders that are in my approval queue: OLBMB_P&T_34
  • As a customer (Business), I should be able view and  Approve the Transfers/Payment/Standing Orders that are in my approval queue.
• Access Context Sensitive Help on the Approve Transaction Page: OLBMB_P&T_35
  • As a customer (Individual or Business), I should be able to access Context Sensitive Help on the Approve Transaction Page.

• Applicable to: Individual and/or Business customer
• Use case: sheet 9. Online Transaction Status
• Access the Online Transaction Status page from my OLB/MB portal: OLBMB_P&T_36
  • As a customer (individual/Business), I should be able access the Online Transaction Status page from my OLB/MB portal.
• Cancel pending Forward dated Payments  that I had performed from the Online Portal: OLBMB_P&T_37
  • As a customer (individual or Business), I should be able Cancel pending Forward dated Payments  that I had performed from the Online Portal.
• Access Context Sensitive Help on the Online Transaction Status Page: OLBMB_P&T_38
  • As a customer(Individual /Business), I should be able to access Context Sensitive Help on the Online Transaction Status Page.

• SEPA or Single Euro Payments Area, is a payment-integration initiative of the European Union for simplification of bank transfers denominated in euro.
• CHAPS, Clearing House Automated Payment System, is a real-time gross settlement payment system used for sterling transactions in the UK.
• SWIFT, Society for Worldwide Interbank Financial Telecommunication, SWIFT does not facilitate funds transfer: rather, it sends payment orders, which must be settled by correspondent accounts that the institutions have with each other. 

• Use the Base Design as a design base.

• Mobile Banking (Hybrid Mobile App): 1125px Width x 2436px height

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum 
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources

• All source files of all graphics created in either Sketch (Primary Tool Recommendation), Adobe XD, Figma, and saved as an editable layer

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors