Dinnaco - ABC Commercial Banking Design Concepts challenge

Welcome to the Dinnaco - ABC Commercial Banking Design Concepts challenge.

This will be a fast-paced challenge. We are looking for your best UI and UX ideas and designs. We do not have wireframes so we want you to think critically about the problem and propose the best solution for how content should be displayed, best navigation and moving through the site. We are designing a backend portal for a Treasurer to issue a Letter of Credit within existing credit limits, available funds, and other “Trade” products. Your designs should have a clean, modern, and intuitive UI and UX to allow for the user to quickly move through the portal.

Round 1

We realize this is a large amount of screens for checkpoint, but we need to get a good idea of the user flow you are presenting to give adequate feedback for finals.
1. Login Page (P1)
2. Dashboard Page (P2)
3. Trade Landing Page (P3a)
4. Letters of Credit Page (P4)
5. New Letter of Credit screen (S1a)
6. “Source Account” selection screen (S2a)
7. Letter of Credit Form Screen (S3)
8. Purchase Order Upload Screen (S4)
9. Transaction Review Screen (S5a)
10. Transaction Summary screen (S6)

Round 2

Include checkpoint feedback and refinements from Round 1
1. Login Page (P1)
2. Dashboard Page (P2)
3. Trade Landing Page (P3a)
4. Letters of Credit Page (P4)
5. New Letter of Credit screen (S1a)
6. “Source Account” selection screen (S2a)
7. Letter of Credit Form Screen (S3)
8. Purchase Order Upload Screen (S4)
9. Transaction Review Screen (S5a)
10. Transaction Summary screen (S6)

User Persona:
I’m a treasurer (a person appointed to administer or manage the financial assets and liabilities of a society, company, local authority, or other body) of a mid-cap corporate medical technology & furniture manufacturer, based in the Midlands in the UK. I would like to import raw materials/inputs from a Chinese supplier whom I have never transacted with previously. There is a certain element of risk involved for both parties, and this supplier has requested for a letter of credit to be issued from my bank to their bank in order for my company to do business with them. The letter of credit is a guarantee from my bank that the invoice will be paid to the supplier; reducing the risk for both parties. The letter of credit is one product within a broader category of “Trade” products that my bank typically provides to me.  

The invoice for this supplier is for £750,000. I can guarantee this payment through a combination of credit I have in an existing credit facility (i.e., a loan) and the remainder from a cash account. I don’t readily know how much credit/cash is available in either.

User Flow/ Screen Flow:
This section works in tandem with the Screen Requirements section
1. Login (P1)
2. Taken to the Dashboard (P2)
3. Selects “Trade” from the navigation and taken to the Trade Landing Page (P3a). User selects “Import Letter of Credit” button and is taken to (P4)
4. User lands on the “Letter of Credit” Page (P4). Can see detailed account information and history. Selected “Create a New Letter of Credit” button
5. Lands at the New Letter of Credit (LoC) Entry screen (S1a). The user is asked to confirm their credit amount and currency. The user inputs £750,000 and selects “Confirm”.
6. The user is then required to select their Source of Funds (S2a) (i.e., that can guarantee the letter of credit), value and currency.

• The user may need to go through a process to split the source of funds, for example with £450,000 coming from ‘Credit Facility LXXX-9876’ and £300,000 coming from cash account XXXX-0001. The user may need to be guided towards the options that are available to them (e.g. balance presented, graphic). An example of how this process could work is described below:
• The user selects 'Credit Facility LXXX-9876'. There is currently an available balance of £450,000 remaining in this £1m credit facility.
• The system provides an alert/notification to the user that there is currently a balance of £450,000 in Credit Facility LXXX-9876 and a shortfall of £300,000 to complete the letter of credit transaction. The system provides the user with a set of options:
  • “Cancel Transaction”
  • “Use Cash/Credit from Other Source”
  • “Apply for Additional Lending”
  • (there are additional user flows for each of these options that will be addressed in future challenges)
• The user selects “Use Cash / Credit from Other Source” and selects the remaining £300,000 coming from cash account XXXX-0001.
• The system now indicates to the user that the full £750,000 has been allocated and the user is now able to proceed
• User clicks “Confirm”

7. The user is then taken to the Create the Letter of Credit (S3) screen

• A pre-populated Letter of Credit form with Terms & Conditions to be reviewed and fields to be completed & confirmed by the user.

• This is a complex form. An example PDF with the required form fields has been provided on the Design Direction site
• The user completes the form, saves by selecting “Save for Later” and selects “Submit”

8. Purchase Order Upload Screen (S4)
The user is taken to the purchase order upload screen. The system indicates that the Letter of Credit details are complete. The system now prompts the user: “A Purchase Order (PO) is required to authorise this transaction. Please upload a PO and any additional documentation relevant to authorise the transaction”.

• User selects “Upload” and uploads an external PDF file
• Clicks “Confirm” button (This moves the user to S5a)

9. Transaction Review Screen (S5a)

• User is taken to the Transaction Review Screen. The system displays details of the transaction. This shows all key information the user has input to issue the Letter of Credit
• This should also be a document the user can open/ view in PDF format if they choose.
• The system requests a “Confirm and Submit for Approval” action to complete the process.

10. Transaction Summary Screen (S6)

• User is taken to a screen showing that the transaction has successfully been submitted for approval.
• “The Letter of Credit has been submitted for approval from your Relationship Manager. You will receive a response within 5 business days”.
• The system provides a ‘Return to Your Trade Summary’ button, which returns to Trade Landing Page (P3a). The system also provides a button for the user to return back to Dashboard (same as ‘Home’ tab on the banner).

Required Screens:
Each “Page” has been assigned an identifier (Px), so that pages that are similar across all user journeys do not need to be unique designs, but can have their structure duplicated. Think of a “Page” as a navigation item. “Screens” (which is the transactional design process) may differ from the below, but these too have been assigned an identifier (Sx) to save duplication of design. You can think of “Screens” as states or “steps” in a process.

You should explore the best UI and UX for the user to move through the User Journey and how steps in the process are linked together in a streamlined and easy way.

1. Login Page (P1)

• Username and password

2. Dashboard Page (P2)
Global Header (Navigation across all pages):

• Header navigation should include: Home, Accounts, Trade, Commercial Finance, Payments, Cash Management, Funds Transfer, Reporting & Analytics, and Secure Email. This navigation should present be a single interface for all the products the user has with the bank.
• Notifications feed to present updates on product processes to the user
• Secondary buttons: Chat/Support, Personalise, Logout

Dashboard page specific items:

• Analytics/graphic displaying:
  • Cash & Short Term Investments and Debt (loans), 6 month historic & 6 month forecasted position (see example graph provided)
  • Outstanding Payables; Payables vs Receivables by age category (see example graph provided)
  • The graphics are provided for look and feel of data to be represented. The data requirements are not yet finalised.
• Accounts summary (list or graphical): this should be a summary of all current account, deposit, overdraft account, loan and trade positions
• News feed - specific to industry
• FX/currency rates: USD:GBP, EUR:GBP, CAD:GBP, etc. For example, 1 USD equals 0.72 GBP. Currency exchange rate
• Calendar: allows user to see significant dates in calendar, e.g. invoices due, expiry of letter of credit, loan payment due, etc.
• Tasks (table): indicates a list of open, pending or approved items across all Product Categories. The following data is displayed in this table:
  • ID - identifies individual transaction
  • Product Category - Accounts, Trade, Commercial Finance, Payments, Cash Management, Funds Transfer, Reporting & Analytics
  • Type - Import Letter of Credit, Export Letter of Credit, Guarantee, Collection
  • Task Description - Application for Import Letter of Credit from source account XXXX with Counterparty ABC Health Exports
  • Status - Open, Pending Approval, Approved, Rejected
  • Currency - GBP, EUR, USD, etc
  • Amount

3. Trade Landing Page (P3a)
In addition to global items this page needs to display a number of buttons to enter product creation processes, content display on the page and a series of data points for different products.

Buttons to start product creation:

• Import Letter of Credit* (links to P4)

Remaining products to be shown as buttons but product creation process not in scope for this user journey

• Export Letter of Credit*
• Guarantees*
• Import Collection*
• Direct Collection*
• Export Collection*
• Invoice Financing*
• Supply Chain Financing*
• Pre-shipment Financing*

Buttons to perform secondary actions:

• Purchase Order Upload (Secondary Call To Action button)

Data to be displayed on screen:

• List of live ongoing Trade tasks: this is the same as the tasks table on the dashboard page but filtered to only show product category of Trade
• The design needs to allow space to additionally display a chart which describes trade related data. Line or bar type chart. Should match overall design style.

Content to be displayed on page:

• News Feed
• FX Currency Rates
• Calendar  

4. Letters of Credit Page (P4)
This page will display a detailed list of trade tasks of letter of credit type (a subset of the data displayed on P3).

Data to be displayed on screen:

This table includes the following data:

• ID
• Account
• Type
• Status
• Counterparty
• Currency
• Amount
• A list of transactions will need to be created
• PDF icon next to Letter to view information in PDF format

The design needs to allow space to additionally display a chart which describes trade related data (see example provided)

Buttons to be displayed on screen:
A button to “Create a New Letter of Credit” should be prominent (takes user to S1a).

5. New Letter of Credit (LoC) screen (S1a)

• On this screen the user inputs a value for the letter of credit, the currency required and confirms the entry to move to S2a

6. “Source Account” selection screen (S2a)

• On this screen the user selects the source of funds to guarantee the letter of credit, the display includes the following items:
• List of accounts
• Display of account balance, available credit and any shortfalls compared to the requested amount (Error states/ messages)
• Options to:
  • “Cancel Transaction”
  • “Use Cash/Credit from Other Source”
  • “Apply for Additional Lending”
• “Confirm” button to proceed to S3

The user can select funds from multiple accounts. The display should indicate if the user has not selected sufficient funds for the original request and prevent the user from moving to S3 if that is the case.

7. Letter of Credit Form screen (S3)

• This is a complex form. An example of the required form fields is available on the Design Direction site.
• Break this content up into the easiest UX experience possible to allow for fast and efficient form completion. A number of these fields would be pre-populated based on user data eg name, address.
• The user completes the form and can either “Save for later” and selects “Submit for Review”
• If the user selects “Submit for Review” they proceed to S4

8. Purchase Order Upload screen (S4)

• Indication to user that Letter of Credit Form details are complete
• Upload button to select and upload purchase order PDF
• Confirm button to move to S5a

9. Transaction review screen (S5a)
This screen displays all data relating to the transaction for review prior to submission. The designer should concentrate on displaying this data in a readable format which is broken into suitable sections.
The user has 3 call to actions on this screen:

• Save for later
• Cancel transaction
• Submit for approval (move to S6)

10. Transaction summary screen (S6)
Summary of the transaction. Display should include:

• ID: LCIM-8642
• Source Account: LXXX-9876, XXXX-0001
• Type: Import Letter of Credit
• Status: Pending Approval
• Counterparty: ABC Health Exports
• Currency: GBP
• Amount: £750,000

From this screen the user returns to P4

Screen Dimensions:
Desktop: 1280px width (height can expand to fit content)

Design Direction & Documents:
We’ve created a design direction site that includes all of the necessary branding information, additional inputs, examples and supporting documents needed for the challenge. Items include:

• Branding: General colors and fonts
• Letter of Credit Form example. You can pull form fields directly from this PDF.
• Inspiration: Ideas for how to treat elements and general design style

Target Audience:
Treasurer at corporate company

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.