Challenge Overview
Welcome to “Cloud Banking UI Prototype Challenge”. We just ended an amazing RUX design challenge where members from design track rethinked and redesigned the new interfaces for an Online Cloud Banking Web Application in Asia.
“Cloud Banking” is the codename for an existing and real Bank Web Application from a Large Banking Company based in Asia. While their final application will have Japanese font characters (Kanji, Hiragana, Katakana); this prototype should be done using English with Roboto font. Please note that you might be requested (or not) to update the texts to Japanese in final fixes.
On this challenge we are looking to create and develop the front end coding of this application. You will need to work in Angular2 with Bootstrap as your main and only framework.
Required Screens
1- First time login experience (01 to 03 Login files)
- This will be the initial setup for first time users.
- Designers have splitted this process into a 3 steps wizard: Configuration, confirmation and login.
- Configuration: On this step, users will setup their security questions/answers, change the password (3 fields with virtual keyboard - users can type or use the VK); and finally update their email. Clicking on “Submit” take to next step.
- Confirmation: This is a resume of the information provided in “Configuration” step and a final confirmation input where users need to validate that they are “real bank members/users” by providing some transaction numbers. (No need to do any back end validation here). User should be able to go back to previous step.
- Login: Final step of the wizard. Regular login process.
- Anything that should be a link (like forgot my contract number, forgot password, need help, etc) should be a dead link.
- Progress chart on top right can be done as it is on the storyboards: 25% on 1st step, 50% on second and 100% on 3rd step. (Just for demo purposes, this will be developed on back end).
2- Top Screen after login (04 Top.png)
- This is a Summary/Dashboard style screen with a full resume of the user bank account.
- You are free to use any charts / stats open source plugin to match the design as much as possible.
- Anything that should be a link and action item (like settings icons) should be a dead link.
- No need to provide a dropdown or any action in “Quick Search” input field. For now just change the icon and placeholder/text color to blue (#00a0da) on focus.
- “+” and “-” icons on “Payment and withdrawal timeline” means: IN and OUT transaction. No actions required here.
3- Balance Inquiry (05 to 06 Balance Inquiry files)
- Similar to dashboard style and functions but with more detailed on the information. Divided in 2 subsections: “Assets” and “Liabilities”. (This tabs should change by clicking on each).
- Assets:
- - Each color means a transaction:
- - - Green: Ordinary Deposits
- - - Purple: Savings Deposit
- - - Violet: Time Deposit
- - - Yellow: Funded time deposit
- - - Red: Mutual Fund
- - - Light Green: Foreign currency savings deposits
- - - Gray: Foreign currency time deposits
- - For this prototype you need to show the interaction of changing/updating the information by clicking on each color from the chart. (Using data from a JSON file is allowed on this challenge).
- - On this screen “+” and “-” icons works as collapsable accordion. Only one can be open at a time. For this prototype, just match the design. (No need to provide the detailed information to each row).
- - “Transfer …” button do not have any action on this prototype. (... dots are part of the button, no individual action required).
- Liabilities:
- - List of loan actions.
- - Straight forward coding. No special actions required here.
4- Transfer of Fund (07 to 09 Transfer files)
- These screen represents the full process and workflow of transferring funds from user bank account to another bank.
- Designation (07 Transfer 1.png and 08 Transfer 2.png)
- Anything that should be a link and action item (like select buttons) should be a dead link.
- “Transfer destination” button take to next screen (08 Transfer 2.png).
- 3 inputs on this screen (08 Transfer 2.png) are simple text fields. No dropdown or extra actions required.
- For this UI prototype, “Next” button takes to final step of the workflow (09 Transfer_complete.png). So “Transfer Details” and “Confirmation” are skipped. No need to create them.
- Anything that should be a link (like hide details) and action item (like print and continue buttons) should be a dead link.
5- Inquiry of Deposit (10 Inquiry of Deposits.png)
- This screen allows user to search and review all their deposits transactions.
- “Deposit and withdrawal history” section:
- - “View by month”: This should dropdown a month view. You are free to provide an Open Source Library / Plugin on this.
- - “Select Period”: This should dropdown a range view. You are free to provide an Open Source Library / Plugin on this.
- - “Search” button is a deadlink.
- “Designation of transfer destination”:
- - Simple table view. No actions required here.
Things to Consider (Possible FAQs on this challenge)
- You cannot use just simple HTML + CSS3 + Javascript on this challenge. This should be developed using Angular2 and Bootstrap.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- No need to provide any back end functionalities on main dashboard stats charts.
- However on “Balance Inquiry” screen. You need to provide the iteration of changing / updating the data on the color charts.
- Credit Card images can be done using a PNG/JPG placeholder. (This will be replace by the bank later with real credit cards information).
- Pagination are deadlinks.
- Top / Footer and Side menu items should be deadlinks if they don’t connect to any pages on the workflow.
- Try to match the storyboards as much as possible. If you don’t see a modal, a dropdown, or any extra interactions, no need to code it.
- This is a web application only. No need to focus on responsive behaviors.
- Storyboards and sources are retina ready. So all icons and images should be retina ready.
- Retina content width on storyboards is: 1966px so use 983px as your main wrapper content max width.
- Links / Buttons are using #00a0da as normal status color. For hover effects please use #007aa6 on both.
- Icons are using #8f9aa7 for hover effects please use #5a6e81.
Resources
- Please download all storyboards and sources from here:
https://drive.google.com/open?id=0Bza1qtSwQr8UNTN5ZjBCUERGYzA
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed (and encouraged) to use Bootstrap.
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript Requirements
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
Final Submission Guidelines
REQUIREMENTS“Cloud Banking” is the codename for an existing and real Bank Web Application from a Large Banking Company based in Asia. While their final application will have Japanese font characters (Kanji, Hiragana, Katakana); this prototype should be done using English with Roboto font. Please note that you might be requested (or not) to update the texts to Japanese in final fixes.
On this challenge we are looking to create and develop the front end coding of this application. You will need to work in Angular2 with Bootstrap as your main and only framework.
Required Screens
1- First time login experience (01 to 03 Login files)
- This will be the initial setup for first time users.
- Designers have splitted this process into a 3 steps wizard: Configuration, confirmation and login.
- Configuration: On this step, users will setup their security questions/answers, change the password (3 fields with virtual keyboard - users can type or use the VK); and finally update their email. Clicking on “Submit” take to next step.
- Confirmation: This is a resume of the information provided in “Configuration” step and a final confirmation input where users need to validate that they are “real bank members/users” by providing some transaction numbers. (No need to do any back end validation here). User should be able to go back to previous step.
- Login: Final step of the wizard. Regular login process.
- Anything that should be a link (like forgot my contract number, forgot password, need help, etc) should be a dead link.
- Progress chart on top right can be done as it is on the storyboards: 25% on 1st step, 50% on second and 100% on 3rd step. (Just for demo purposes, this will be developed on back end).
2- Top Screen after login (04 Top.png)
- This is a Summary/Dashboard style screen with a full resume of the user bank account.
- You are free to use any charts / stats open source plugin to match the design as much as possible.
- Anything that should be a link and action item (like settings icons) should be a dead link.
- No need to provide a dropdown or any action in “Quick Search” input field. For now just change the icon and placeholder/text color to blue (#00a0da) on focus.
- “+” and “-” icons on “Payment and withdrawal timeline” means: IN and OUT transaction. No actions required here.
3- Balance Inquiry (05 to 06 Balance Inquiry files)
- Similar to dashboard style and functions but with more detailed on the information. Divided in 2 subsections: “Assets” and “Liabilities”. (This tabs should change by clicking on each).
- Assets:
- - Each color means a transaction:
- - - Green: Ordinary Deposits
- - - Purple: Savings Deposit
- - - Violet: Time Deposit
- - - Yellow: Funded time deposit
- - - Red: Mutual Fund
- - - Light Green: Foreign currency savings deposits
- - - Gray: Foreign currency time deposits
- - For this prototype you need to show the interaction of changing/updating the information by clicking on each color from the chart. (Using data from a JSON file is allowed on this challenge).
- - On this screen “+” and “-” icons works as collapsable accordion. Only one can be open at a time. For this prototype, just match the design. (No need to provide the detailed information to each row).
- - “Transfer …” button do not have any action on this prototype. (... dots are part of the button, no individual action required).
- Liabilities:
- - List of loan actions.
- - Straight forward coding. No special actions required here.
4- Transfer of Fund (07 to 09 Transfer files)
- These screen represents the full process and workflow of transferring funds from user bank account to another bank.
- Designation (07 Transfer 1.png and 08 Transfer 2.png)
- Anything that should be a link and action item (like select buttons) should be a dead link.
- “Transfer destination” button take to next screen (08 Transfer 2.png).
- 3 inputs on this screen (08 Transfer 2.png) are simple text fields. No dropdown or extra actions required.
- For this UI prototype, “Next” button takes to final step of the workflow (09 Transfer_complete.png). So “Transfer Details” and “Confirmation” are skipped. No need to create them.
- Anything that should be a link (like hide details) and action item (like print and continue buttons) should be a dead link.
5- Inquiry of Deposit (10 Inquiry of Deposits.png)
- This screen allows user to search and review all their deposits transactions.
- “Deposit and withdrawal history” section:
- - “View by month”: This should dropdown a month view. You are free to provide an Open Source Library / Plugin on this.
- - “Select Period”: This should dropdown a range view. You are free to provide an Open Source Library / Plugin on this.
- - “Search” button is a deadlink.
- “Designation of transfer destination”:
- - Simple table view. No actions required here.
Things to Consider (Possible FAQs on this challenge)
- You cannot use just simple HTML + CSS3 + Javascript on this challenge. This should be developed using Angular2 and Bootstrap.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- No need to provide any back end functionalities on main dashboard stats charts.
- However on “Balance Inquiry” screen. You need to provide the iteration of changing / updating the data on the color charts.
- Credit Card images can be done using a PNG/JPG placeholder. (This will be replace by the bank later with real credit cards information).
- Pagination are deadlinks.
- Top / Footer and Side menu items should be deadlinks if they don’t connect to any pages on the workflow.
- Try to match the storyboards as much as possible. If you don’t see a modal, a dropdown, or any extra interactions, no need to code it.
- This is a web application only. No need to focus on responsive behaviors.
- Storyboards and sources are retina ready. So all icons and images should be retina ready.
- Retina content width on storyboards is: 1966px so use 983px as your main wrapper content max width.
- Links / Buttons are using #00a0da as normal status color. For hover effects please use #007aa6 on both.
- Icons are using #8f9aa7 for hover effects please use #5a6e81.
Resources
- Please download all storyboards and sources from here:
https://drive.google.com/open?id=0Bza1qtSwQr8UNTN5ZjBCUERGYzA
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed (and encouraged) to use Bootstrap.
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript Requirements
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).