Odyssey - Online and Mobile Banking Apps Design Challenge

NOTE: DUE TO SYSTEM MIGRATION, WE ARE EXPERIENCE ISSUE WITH TEXT STYLING IN THIS PAGE, PLEASE GO TO THIS GOOGLE DOCS LINK TO READ THE SPEC IN A PROPER FORMATTING: https://docs.google.com/document/d/116WagvwrUzRYByQCro22ovQTW9KRn2-68h-N1Qp8gWk/edit?usp=sharing

Welcome to the "Odyssey - Online and Mobile Banking Apps Design Challenge". This project goal is to create two banking applications for the Odyssey customers:

• Odyssey Online Banking (via Responsive Web App), and
• Odyssey Mobile Banking (via Hybrid Mobile App in iOS and Android)

In this challenge, we will create several screens focused on two out of seven use cases features planned for the application, which are "Security" and "Customer and Account View" use cases. 

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
Online Banking Screens (Desktop/Web)
01) Online Banking Web - Login Screen
02) Online Banking Web - Registration Screen
03) Online Banking Web - Customer Dashboard Screen 
 
Mobile Banking Screens (Hybrid Mobile)
06) Mobile Banking  - Login Screen
07) Mobile Banking - Setup Biometrics Screen
10) Mobile Banking - Customer Dashboard Screen

• 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
Online Banking Screens (Desktop/Web)
01) Online Banking Web - Login Screen
02) Online Banking Web - Registration Screen
03) Online Banking Web - Customer Dashboard Screen 
 
Mobile Banking Screens (Hybrid Mobile)
04) Mobile Banking - Splash/Onboarding Screens
05) Mobile Banking  - Registration Screen
06) Mobile Banking  - Login Screen
07) Mobile Banking - Setup Biometrics Screen
08) Mobile Banking - Setup MPin Screen
09) Mobile Banking - Successive Login Screen
10) Mobile Banking - Customer Dashboard Screen

• As part of your Final submission, you must replace your checkpoint submission with the final submission into 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

CHALLENGE OBJECTIVES

• Create the best possible Odyssey Banking application UI/UX for two different devices:
  • Web App (Responsive Web) and 
  • Mobile Banking App (Hybrid App)
• To create UI/UX for 2 User Stories (Security and Customer Dashboard)

BACKGROUND OVERVIEW

• We believe that our customers have more important things to do than wrestle with complex products or spend valuable time administering their banking arrangements. We recognise that professional and personal lives often overlap and our mission is to help empower our customers to achieve their ambitions by serving all their banking needs.
• Banking customers are looking for a bank that can help them make their deal happen in an efficient, secure, fast, and flexible as much as it can
• We understand different people want different things from "Relationship management"
• We expect a counter-trend of “committed” relationships as customers react to digitisation in our services
• 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)

TARGET AUDIENCE

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

PERSONA

• Name: Tobey Maguire
• Occupation: Restaurant Owner
• Goals: Monitoring his cash flow and capital investment 
• Frustrations: Have the capital to invest but low knowledge of finances and property market, and unable to go to the Bank casually to check/monitor his cash flow and have doubts with internet security
• Wants: A secure application that able to provide all informations he needs and live consultation with a bank employees to get tips about how to manage his cash flow and expand his investment

USER STORY
ONLINE BANKING

• 'Security' user story (Responsive Web App)
• 'Customer Dashboard' user story (Responsive Web App)

MOBILE BANKING

• 'Security' user story (Mobile Banking)
• 'Customer Dashboard' user story (Mobile Banking)

DESIGN CONSIDERATION

• Needs to strictly follow our Branding Guidelines
• Modern, Simple, and Clean design
• Seamless Navigation and enhanced Features
• 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

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=776162

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• 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: 6
  • 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

SCREEN REQUIREMENTS
Online Banking Screens (Desktop/Web)
01) Online Banking Web - Login Screen

• User will be able to open this page either via entering the app web address  in the browser or click the online banking link from Odyssey corporate website
• Once the user lands on this screen, show the following content information:
  • Login form - User ID (Input), Password (Input), Login (Button)
  • Support (Link for Login help)
  • Reset Password (Link for Reset Password)
  • Register (Link for Online Banking Registration)
• To be able to log in, the user will need to enter their User ID and their password
• Clicking ‘Register’ link will redirect the user to the registration screen to create an account for the Banking application
• Clicking ‘Support’ link will redirect the user to support page where the user can view all necessary steps that need to be taken to successfully log in to the online banking portal 
• Clicking the ‘Reset Password’ link will give the user an ability to reset their password. In order to reset their password, the user will need to:
  • Enter their details (User ID, Title, Forename(s), Surname, Date of Birth, and Checkbox for "I'm not a Robot" Captcha), so it can be authenticated on the next step. 
  • The app will display the 'Password Reset' screen with OTP Authentication option where the user can select the Mobile Number and/or Email ID on which OTP should be sent
  • The app then sends the OTP code to the user Email and/or Mobile Number and the user will enter the OTP received in the required field and clicks 'Done' button
  • The app will validate the OTP entered by the user and if it’s correct, it will display the Password Reset Screen. 
  • The user can enters the Preferred password in 'New Password' and 'Confirm Password' fields and clicks on Done button
  • The app will validate the password:
    • Password entered by the user meet the security guideline
    • Password entered in 'New Password' and 'Confirm Password' fields match
    • New Password entered by the user is successfully saved by the system in the server
  • The app will show 'Password Updated Successfully' page and option to go back to the login page
• If the user tries to log in as a Business customer instead of Individual customer, the login screen should provide a feature where the user can check their Access Rights and provide themselves a new Access/ or verify their current Access. A business customer has a business account that has a different set of use cases. Sometimes a business customer may access the customer account link. Business customers have business accounts, regular customers have standard bank account
• Show/Displays the Error Message for the following scenarios:
  • Incorrect User ID or Passcode
  • Connection, System Issue, Service Error
  • System Locked In after the user entered the wrong credential for the 3rd time (with the text “You have exceeded the number of attempts. Please reach out to Customer Care center or Branch.”)
  • Customer needs to provide the Secure Keycode/OTP

02) Online Banking Web - Registration Screen

• The Registration process will be split into several steps:
  • Before able to enter information for registration, please provide a button/link so that the user is aware that they are currently in the “Registration Screen”, clicking it will bring the user to the next step 
  • In the next step, the user will continue to “Register for Online Banking --> Capture Details” steps, where the user will enter their personal information that has been recorded earlier in the Bank system (User that able to register to this Online banking application MUST have an account in the bank first), such as: 
    • User ID (Mandatory)
    • Title (Non Mandatory)
    • Forename(s) (Mandatory)
    • Surname (Mandatory)
    • Date of Birth
    • Checkbox for “I'm not a Robot” Captcha
    • and click the 'Submit/Next/Okay' button
  • The app verifies that the details entered by the customer are correct and navigates to the Online Registration screen where they can add their Contact Details (email, phone number, address, etc) and the user will click ‘Submit/Next/Okay’ button again
  • The app will verify that the contact details entered by customer match with the details present in the Bank system and the app will display the screen with input fields for:
    • Contact Phone Number
    • Email Address
  • The user will enter a phone number and an email address and the system will verify whether the input is correct or not, if the input is correct, the app will send a verification link to the Email or Phone that the user-provided, which they can click to complete the verification process 
  • Once the verification complete, the user will receive generated User ID and temporary Password on the Email and Phone Number provided in the registration that they can use these details for Online Login process
• Show/Displays the Error Message for the following scenarios:
  • The app verifies that the details entered by the user are incorrect
  • The user leaves a mandatory field blank/Inputs incorrect format
  • The app verifies that Contact Details entered by the customer does not match with Bank DB
  • System Locked In after the user enters wrong details for the 3rd time (with the text “Contact Customer Service for further assistance”)

03) Online Banking Web - Customer Dashboard Screen 

• The user will need an ability to see a comprehensive view of their account and products and should be able to initiate a service request as necessary:
  • Information about their Banking activity
  • Information about their Account Balances
  • Details Transactions
  • Contact Support
  • Book an Appointment
  • View alert and notification (and ability to configure it)
  • View Marketing Campaign and Interesting offers from the Bank that match the user demographic and eligibility
  • Demo functionality to show all Online Banking features for a new user
  • Help Section
  • Ability to view and configure the PFM Widget (Spending and saving goals) on the Dashboard
  • Refer to the User story and wireframes for more complete information 

 

• Show a glimpse of the Banking application capability or marketing content on this screen
• Show various content related to the Banking app such as automatic video, 3 slides of important features, or maybe just the Odyssey Banking logo app, etc

• The Registration process will be split into several steps:
  • Before able to enter information for registration, please provide a button/link so that the user is aware that they are currently in the “Registration Screen”, clicking it will bring the user to the next step 
  • In the next step, the user will continue to “Register for Online Banking --> Capture Details” steps, where the user will enter their personal information that has been recorded earlier in the Bank system (User that able to register to this Online banking application MUST have an account in the bank first), such as:
    • User ID(M)
    • Title (NM)
    • Forename(s)(M)
    • Surname (M)
    • Date of Birth
    • Checkbox for “I'm not a Robot” Captcha
    • and click the 'Submit/Next/Okay' button
  • The app verifies that the details entered by the customer are correct and navigates to the Online Registration screen where they can add their Contact Details (email, phone number, address, etc) and the user will click ‘Submit/Next/Okay’ button again
  • The app will verify that the contact details entered by customer match with the details present in the Bank system and the app will display the screen with input fields for:
    • Contact Phone Number
    • Email Address
  • The user will enter a phone number and an email address and the system will verify whether the input is correct or not, if the input is correct, the app will send a verification link to the Email or Phone that the user-provided, which they can click to complete the verification process 
  • Once the verification complete, the user will receive generated User ID and temporary Password on the Email and Phone Number provided in the registration that they can use these details for Online Login process
• Show/Displays the Error Message for the following scenarios:
  • The app verifies that the details entered by the user are incorrect
  • The user leaves a mandatory field blank/Inputs incorrect format
  • The app verifies that Contact Details entered by the customer does not match with Bank DB
  • System Locked In after the user enters wrong details for the 3rd time (with the text “Contact Customer Service for further assistance”)

• Provide the following content in the login page:
  • Login options using login form (User ID/Password) / MPin / Biometrics
  • Register (Link)
  • Reset Password (Link)
  • Support (Link)
• To be able to log in, the user will need to enter their User ID and Password, or they can use MPin and Biometrics option to log in to the app (if the user already activate these options, if they are not yet activate it, the MPin and Biometrics options will be disabled)
• Clicking ‘Register’ link will bring the user to the registration screen
• For a first time user, once the user successfully login using User ID and Password and  before they are being redirected to the customer dashboard, they will be presented with a setup screen to create ‘MPin’ and ‘Biometrics’ login options:
  • If the user chooses to set up the MPin, they will need to click the ‘MPin’ link and it will bring the user to the MPin setup screen
  • If the user chooses to set up the Biometrics, they will need to click the ‘Biometrics’ link and it will bring the user to the Biometrics setup screen
  • The user can skip this process if they don’t want to set up these login options right now. The user can go back and set up these login options anytime from the mobile banking later
• Clicking the ‘Reset Password’ link will give the user an ability to reset their password. In order to reset their password, the user will need to:
  • Enter their details (User ID, Title, Forename(s), Surname, Date of Birth, and Checkbox for "I'm not a Robot" Captcha), so it can be authenticated on the next step. 
  • The app will display the 'Password Reset' screen with OTP Authentication option where the user can select the Mobile Number and/or Email ID on which OTP should be sent
  • The app then sends the OTP code to the user Email and/or Mobile Number and the user will enter the OTP received in the required field and clicks 'Done' button
  • The app will validate the OTP entered by the user and if it’s correct, it will display the Password Reset Screen. 
  • The user can enters the Preferred password in 'New Password' and 'Confirm Password' fields and clicks on Done button
  • The app will validate the password:
    • Password entered by the user meet the security guideline
    • Password entered in 'New Password' and 'Confirm Password' fields match
    • New Password entered by the user is successfully saved by the system in the server
  • The app will show 'Password Updated Successfully' page and option to go back to the login page
• If the user tries to log in as a Business customer instead of Individual customer, the login screen should provide a feature where the user can check their Access Rights and provide themselves a new Access/ or verify their current Access 
• Show/Displays the Error Message for the following scenarios:
  • Incorrect User ID or Passcode
  • Connection, System Issue, Service Error
  • System Locked In after the user entered the wrong credential for the 3rd time (with the text “You have exceeded the number of attempts. Please reach out to Customer Care center or Branch.”)
  • Customer needs to provide the Secure Keycode/OTP 

• The user will be able to set up the Biometrics security once they are verified/authenticated
• There are two Biometrics options that the user can choose and set in this screen:
  • Face Recognition, and/or
  • Fingerprints
• The user can set one of the Biometrics options or both. Provide screen interactions to set up the Biometrics security for Face Recognition and Fingerprints
• The app will ask permission to use the Face Recognition Authentication saved to unlock the Device, The user will give their permission, and the app saves user response (show success and error message)
• Once the Biometrics setup is done, the user will be able to login to the mobile banking app using Biometrics option
• The Biometrics data will be saved in the application 

• The user will be able to set up the preferred Mpin once they are verified/authenticated
• The app validates that the MPin given by the customer is valid (6 digits)
• Displays the MPin setup successful message and navigates customer to login page
• Once the MPin setup is done, the user will be able to login to the mobile banking app using MPin option

• In this screen, we are going to simulate the login screen using Biometric Login option
• The app will check whether the user device has an option/feature for Facial Recognition
• The user allows the screen to capture his/her face
• The app launches the Face Capture screen and checks that details captured match the face features saved in the Device
• The app successfully IDs the customer and displays the Customer Dashboard

• The user will need an ability to see a comprehensive view of their account and products and should be able to initiate a service request as necessary:
  • Information about their Banking activity
  • Information about their Account Balances
  • Details Transactions
  • Contact Support
  • Book an Appointment
  • View alert and notification (and ability to configure it)
  • View Marketing Campaign and Interesting offers from the Bank that match the user demographic and eligibility
  • Demo functionality to show all Online Banking features for a new user
  • Help Section
  • Ability to view and configure the PFM Widget (Spending and saving goals) on the Dashboard
  • Refer to the User story and wireframes for more complete information

• Wireframes Reference (Use it only as References, do not copy the design!)
• Odyssey Branding Guidelines Document

• Follow Odyssey Branding Guidelines Document

• Online Banking (Responsive Web App - Desktop/Web): 1440px Width with Height adjusting accordingly
• 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, or Photoshop 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