Challenge Overview
Welcome to Dinnaco - ABC Commercial Banking User Flow Prototype Update 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.
The goal of this challenge is to update and build new pages over the provided prototype with detailed features 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
Overall Requirements
1. Overall page updates
1.1. Header
- Update to include the name of the company and the last login timestamp
1.2. Sidebar’s Latest News
- Make sure that when a widget in the main content is expanded/collapsed, this widget will be expanded/collapsed as well based on the height of the main content. See “01 Dashboard Updates / 01_1 Dashboard - View by Products - All.png” and “01 Dashboard Updates / 03 Click to Expand.png” for reference.
1.3. Main Navigation
- Change “Commercial Finance” nav into “Liabilities”
2. Dashboard page updates
- All referenced storyboard for this page are under the “01 Dashboard Updates” folder.
2.1. Summary Account Information
- Update or change this widget and its expanded widget version to have the same look found in the provided storyboards.
- This new widget is implemented with tabs (View by Products and View by Banks).
- Under the tabs, there are sub-tabs that should be implemented as well.
- All images/icons under this widget should be an HTML image tag and not CSS background.
- All data/content should come from JSON file.
2.2. Recommended Actions
- This widget will now take the full width of the main content. See “01_1 Dashboard - View by Products - All.png” for reference on this widget.
- All images/icons under this widget are CSS background. See “04 User Flow 3 - Loan Conversion / 02 Liabilities Expanded.png” for the complete list of possible icons to use.
- All data/content should come from JSON file.
2.3. Assets & Liabilities Over Time
- This widget will now take the full width of the main content. See “02 Dashboard Expanded.png” for reference on this section.
- Implement collapse/expand functionality for this section. By default, this will be in collapsed mode.
- Update the graph image placeholder.
2.4. Outstanding Payables by Age
- This widget will now take the full width of the main content. See “02 Dashboard Expanded.png” for reference on this section.
- Implement collapse/expand functionality for this section. By default, this will be in collapsed mode.
- Update the graph image placeholder.
2.5. Tasks
- This widget will now take the full width of the main content. See “02 Dashboard Expanded.png” for reference on this section.
- Implement collapse/expand functionality for this section. By default, this will be in collapsed mode.
2.6. Current Assets & Liabilities expanded widget
- See “04 Current Assets _ Liabilities Details.png” for reference.
- By default, all main section of this widget are expanded while the sub sections are collapsed.
3. New Letter of Credit page flow and screen updates
- Show the Recommended Action modal each time the user the user clicks on the Next/Confirm button (please fix the type Comfirm into Confirm) to go to the next step.
3.1. Recommended Action modal
- See “02 User Flow 1 - Accept Recommandation / 02_1 New Letter of Credit - Step 1 - Recommended Actions.png” for reference.
- “Cancel” button will just close the modal and continues to the next step. Please note that the text under this button changes depending on what is the next step.
- “Accept Recommendation” (fix the typo) button will close this modal and show the Letter of Credit Saved modal.
- The graph is just image placeholder.
3.2. Letter of Credit Saved modal
- See “02 User Flow 1 - Accept Recommandation / 02_2 New Letter of Credit - Step 1 -Letter of Credit Saved.png” for reference.
- Okay button leads to Lending Application page.
3.3. Step 1: Amount
- Implement Date of Issuance date picker field. See “02 User Flow 1 - Accept Recommandation / 01_1 New Letter of Credit - Step 1 - Amount.png” for reference.
- Update all datepicker style in all pages or instance to make them look like in “02 User Flow 1 - Accept Recommandation / 01_2 New Letter of Credit - Step 1 - Popup Calendar.png”.
3.4. Step 2: Source Account
- Update the existing List of Account section as shown in “03 User Flow 2 - Cancel Recommandation / 03-New-Letter-of-Credit---Step-2---Source-Account.png”.
- Update the existing JSON file to include more than 4 accounts.
- Existing functionality should be retained.
- Table sorting, pagination, and display per page should be implemented.
4. Lending Application (new page)
- See “02 User Flow 1 - Accept Recommandation / 03-Lending-Application.png.jpg” for reference.
- This is similar in layout and functionality of existing New Letter of Credit : Step 2 page.
- Change “Best Suggestion” to “Recommendation”.
- Cancel button lead back to the step where it has left in New Letter of Credit page.
- Continue button leads to Lending Application Review page.
5. Lending Application Review (new page)
- See “02 User Flow 1 - Accept Recommandation / 04 Lending Application Review.png” for reference.
- The selected products from the Lending Application page should reflect on this page.
- Back button lead back to Lending Application page.
- Confirm button will show Lending Application Confirm modal as shown in “02 User Flow 1 - Accept Recommandation / 04 Lending Application Review.png”. Please note that the background page of this modal is Liabilities page. Clicking Okay button from this modal will just close the modal.
7. Liabilities (new page)
- All referenced storyboard below are all under the “04 User Flow 3 - Loan Conversion” folder.
- This page is mostly similar to the Dashboard page. See “01 Liabilities.png” for reference.
- Implement the secondary navigation for this page, see “03 Liabilities - Secondary Menu.png” for reference.
7.1. Product Holdings
- See “02 Liabilities Expanded.png” for reference on this section.
- All text and links data/content should come from JSON file.
- Table sorting, pagination, and display per page should be implemented.
7.2. Loan Conversion
- When the “Loan Conversion” link under the “Product Holdings” table is clicked (04 Liabilities - Click Loan Conversion.png), show the “Loan Conversion” modal as shown in “05 Liabilities - Loan Conversion Popup.png”.
- “Apply to Convert Loan” button links to the Loan Conversion page.
- “Apply for Overdraft” button is dead link for now.
- “Cancel” button links to Dashboard page.
8. Loan Conversion (new page)
- All referenced storyboard below are all under the “04 User Flow 3 - Loan Conversion” folder.
8.1. Step 1: What is Loan Conversion
- See “06 Loan Conversion - Step 1 - What is Loan Conversion.png” for reference.
- Cancel button links back to the Liabilities page.
- Confirm button links to the next step.
8.2. Step 2: Select Accounts
- See “07 Loan Conversion - Step 2 - Select Accounts.png” for reference.
- This is almost similar layout to the existing page “Trade / Step 2: Source Account” but with some additional elements.
- Change “Best Suggestion” to “Recommendation”.
- Use as Destination button is dead link.
- Back button goes to Step 1
- Confirm button goes to Step 3
5.3. Step 3: Review
- See “08 Loan Conversion - Step 3 - Review.png” for reference.
- Back button goes to Step 2
- Confirm button will show the modal screen as shown in “09 Loan Conversion - Confirmation.png”. Please note that the background screen should be the Liabilities page.
- When the modal is closed, add a new row in Tasks table, see “10 Liabilities - Table Updated with New Loan Conversion.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 framework like AngularJS and avoid using jQuery.
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.