Challenge Overview
Welcome to the Dinnaco - ABC Commercial Banking Prototype Challenge! The goal of this project is to create the portal for a Treasurer to issue a Letter of Credit within existing credit limits, available funds, and other “Trade” products.
For this challenge, you are going to create the HTML Prototype using AngularJS and Bootstrap as the based framework. The prototype needs to match the provided storyboards with features and details outlined below.
As part of this challenge you will need to document all HTML/CSS/JavaScript code. We need clear explanation of the code to help us figure all the HTML/CSS/JS code functions and make it easier for future developers and the client to understand what you have built.
Please note that the challenge scope is for Desktop devices but keep in mind that we are going to have tablet view and possible mobile view in the future. Using Bootstrap grid system is a must.
Final Submission Guidelines
The objective of this challenge is to build the HTML prototype by using industry standard best practices.
Overall Requirements:
1. Header section
- Logo should be an image css background with link to dashboard page. For login page, use dead link for now.
- Notifications - clicking this icon will show a tooltip displaying the notifications, refer to the provided “04 Notification Panel.png” storyboard screenshot for reference. Link and buttons are all dead links.
- Chat is a dead link. Chat pages are out of scope.
- Personalize - this is dead link.
- Logout - link to login page.
2. Navigation section
- Home is linked to Dashboard page.
- Trade is linked to Trade Landing page.
- Implement the Trade submenu (06 Secondary Menu.png) when user hovers on the Trade menu.
- Other links are dead links.
3. Footer section
- Logo should be an image css background.
- Links are dead links.
- Back to Top should have a smooth scroll to top effect/animation when user clicks on it.
4. Font
- Change Helvetica Neue and Proxima Nova font with Arial. We might replace them with the actual font family during the final fix.
5. Charts
- All charts/graphs in this prototype are image placeholder only.
6. Maximize function
- Where section have maximize feature as shown in “02 Select Expand.png”, it will display a modal with a copy of that content except for Dashboard’s Current Assets & Liabilities section which you need to prototype.
6.1. Dashboard’s Current Assets & Liabilities
- Refer to “03 Current Assets and Liabilities Details.png” for reference.
- Each section should be collapsed/expanded as shown in the storyboard.
7. Data / JSON
- All content must come from JSON file unless otherwise specified below.
- In creating your own data structure, please refer to this guidelines http://fintech-showcase.cloudhub.io/api/console/
- Please note that this endpoint reference is not yet complete. If the structure is not yet existing, you are free to create your own structure.
Page Requirements:
The following are the page and functionalities required for this challenge.
1. Login
- Refer to the provided “00 Login.png” storyboard screenshot for reference.
- Implement simulation of login error.
- Successful login redirects to Dashboard page.
- Other links are dead links.
2. Dashboard
- Refer to the provided “01 Dashboard.png” storyboard screenshot for reference.
2.1. Current Assets & Liabilities section
- This is a graph image placeholder.
- Maximize content is shown in the provided “03 Current Assets and Liabilities Details.png” storyboard screenshot.
2.2. Summary Account Information section
- Data must come from a JSON file.
2.3. Recommended Actions section
- This content should come from JSON file.
- Assume the content to have static text, paragraphs, and some HTMLs.
2.4. Assets & Liabilities Over Time section
- This is a graph image placeholder.
2.5. Outstanding Payables by Age section
- This is a graph image placeholder.
2.6. Task section
- Implement table sorting by single column only.
- Implement the pagination
- Implement the number of rows per page.
2.7. Calendar
- This must be fully functional calendar
- Clicking on dates with dots should display the corresponding event at the bottom of the calendar replacing the current events.
2.8. Rates
- This section can be static HTML.
- Flag icons should be an HTML image tag and not a CSS background.
- See All is a dead link.
2.9. Latest News
- The top image should be an HTML image tag and not a CSS background.
- See All is a dead link.
- The number of item to display should be based on the height of the page. The intent here is that it will show as many items as can fix without making the page longer.
3. Trade
- Refer to the provided “05 Trade.png” storyboard screenshot for reference.
3.1. Trade Analytics Dashboard button
- This is a dead link.
3.2. Trade - Investment by Product section
- Image placeholder
3.3. Tasks, Calendar, Latest News, and Rates sections
- These will have similar functionality as with the Dashboard page.
3.4. Purchase Order Upload button
- This is just a dead link.
4. Letters of Credit
- This page is linked from the “Import Letter of Credit” Trade’s submenu.
- Refer to the provided “07 Letters of Credit.png” storyboard screenshot for reference.
4.1. Import Letter of Credit section
- Graph image placeholder
4.2. Trade Tasks
- This can use the same JSON file used in the Dashboard but make sure to display the correct column.
- Make sure to implement table sorting just like in the Dashboard page.
- Links are dead links including the PDF icons.
4.3. Create New Letter button
- This links to the New Letters of Credit page
4.4. Calendar, Latest News, and Rates sections
- These will have similar functionality as with the Dashboard page.
5. New Letters of Credit
- User are not allowed to go to the next tab without valid values on the required fields.
- “Next” buttons should be disabled by default and will be enabled only once the user enters value on all the required fields. See the “Submit for Review” button in “16 - New Letter of Credit - Step 3 - Credit Form.png” for reference on disabled button style.
5.1. Amount tab
- Refer to the provided “08 - New Letter of Credit - Step 1 - Amount.png” storyboard screenshot for reference.
- This will be the default tab of New Letter of Credit page.
- Currency options should come from JSON file.
- Next button goes to Source Account tab
5.2. Source Account tab
- Refer to the provided “09 - New Letter of Credit - Step 2 - Source Account.png” storyboard screenshot for reference.
- The green colored background in the List of Accounts indicates a selected account. User should be able to select multiple accounts.
- When an account is selected, there will be a text field shown at the bottom of the corresponding account box for the user to enter an amount value.
- The Best Suggestion data (account, account balance, percentage, and color) should come from a JSON file, while the amount should be computed based on the entered value in Amount tab. For this challenge, it is safe to assume that the entered value is £700,000.
- Clicking the Apply button from the Best Suggestion section will auto select the corresponding accounts and pre-filled their text fields with the suggested value computation. See “12 - New Letter of Credit - Step 2 - Best Suggestion Applied.png” for reference.
- In any event that the selected source or amount is changed, the Current Source Selections section should be updated.
- “x” icons when clicked will display a confirmation modal before removing the corresponding account, please refer to the provided “15 - New Letter of Credit - Step 2 - Confirm Removal.png” for reference.
- “i” icon when hovered will display a tooltip. See “13 - New Letter of Credit - Step 2 - Info.png” for reference.
- Back button goes to Amount tab
- Confirm button goes to Credit Form tab
5.3. Credit Form tab
- Refer to the provided “16 - New Letter of Credit - Step 3 - Credit Form.png” storyboard screenshot for reference.
- Show field error message if the required field is left blank. Otherwise show the “check” icon.
- Each “i” icon when hovered or clicked will show a tooltip. Use dummy text for the content.
- Each section can be collapsed/expanded. By default, Applicant Info should be expanded.
- Use dummy options for select dropdown fields.
- Back button goes to Source Account tab
- Save for Later button will be dead link.
- Submit for Review button goes to Purchase Order Upload tab
5.4. Purchase Order Upload tab
- Please refer to the provided “19 - New Letter of Credit - Step 4 - Purchase Order Upload.png” for reference.
- Browse button should launch the browser’s file dialog box.
- Upload button is dead link.
- Back button goes to Credit Form tab
- Confirm button goes to Review tab
5.5. Review tab
- Please refer to the provided “20 - New Letter of Credit - Step 5 - Review.png” for reference.
- All information on this section should reflect what user entered or selected in the Credit Form tab
- The “Note” element should not be prototyped but instead should serve as your guidelines.
- Back button goes to Purchase Order Upload tab
- Save for Later button will be dead link.
- Cancel button redirects to Dashboard page.
- Submit for Approval button will display a modal, see “21 - New Letter of Credit - Summary.png” for reference.
Browser Compatibility:
- IE10 & IE11
- Microsoft Edge
- Latest Google Chrome
- Latest Safari
- Latest Firefox
HTML
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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
- CSS code should be valid level 3.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
- Use of bootstrap is required.
Javascript
- 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.
- Use AngularJS framework.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission that are used as background image in CSS file.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.