Challenge Summary
How To Compete In This Challenge
• Competing in Topcoder design challenges is easy.
• First, register for the challenge by selecting the “Register” button in the top right.
• Second, review this challenge spec which provides details on what you’ll need to design.
• Third, please review this step-by-step guide on competing.
Challenge Summary
Welcome to the Dragonet Collateral Management Web App Design Concept Challenge!
In this challenge we need your help to design a modern user interface for our existing application shown in the provided wireframes. We are not looking to deviate very much from the current interface in terms of UX, due to required effort for the user training, but small improvements are welcomed.
1. Landing Page
2. Deal Type
3. Spot Unallocated - Contract Data Tab
4. Spot Unallocated – Payment/Delivery Tab
5. Spot Unallocated – Text Tab and Notes tabs
6. Spot Unallocated – Output Control Tab
7. Spot Unallocated – Technical Infos Tab
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.
1. Landing Page
2. Deal Type
3. Spot Unallocated - Contract Data Tab
4. Spot Unallocated – Payment/Delivery Tab
5. Spot Unallocated – Text Tab and Notes tabs
6. Spot Unallocated – Output Control Tab
7. Spot Unallocated – Technical Infos Tab
8. Spot Unallocated – Repetition Tab
9. In/Out Delivery Deposit – Add Items Tab
10. Search
11. Result Table
12. Settings
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Full Description & Project Guide
Design Problem
Our customer, ABC Bank, is having an Applet application that he is using to manage the collateral precious metals for their clients. We have attached wireframes of the current application. As Applet technology is getting old, they are looking to move this application to be a web one so they need us to design a clean and modern interface for their current screens, which will follow their branding.
Expectation and Special Features
We are expecting an enriched user experience and following are key aspects:
• Faster data entry optimizing time spend on screens & individual input field
• Easy to navigate - work more with keyboard for data entry & submission (prefer less with mouse), navigate easily between tabs or fields within the tab
• Intelligent suggestions/Auto-fill of text as-is in current implementation
• Hints/Suggestions & Validation Messages
Because there are a couple of industry specific terms you can find their explanation below. Note: some of the terms/labels that you’ll see in the input files, might still not be familiar, but you don’t have to explore them as the client wants us to improve the user interface, not to come up with new concepts.
Glossary:
Collateral management: is a property or other asset that a borrower offers as a way for a lender to secure the loan. If the borrower stops making the promised loan payments, the lender can seize the collateral to recoup its losses. Example: using the house as a collateral for buying a new car – if the borrower doesn’t pay, the bank will take his house
Allocated metals: refers to the user owning a certain amount of metal (bars, coins)
Unallocated metals: means the user has bought virtually the metal from the bank by doing a transaction, but doesn’t owns it physical.
Spot: is a contract of buying or selling the precious metals for immediate payment and delivery.
Overall: most of the following pages have a couple of common elements:
- Header section with application name (“Collateral Management”), User ID, date, time, environment (ET/UAT/PROD)
- Progress Bar: it’s showing the progress of action while the application loads the data. A new idea related to it would be appreciated. It sits at the bottom of the page and is shown on all Deal Type screens.
- Message Box: shows different messages related to events like success, warnings and errors (shown on all Deal Type screens, for reference of these check 00_1 Overall.jpg)
- Bottom buttons: they are different for each page, but all have a shortcut key, like F1, F2, S, etc. from the existing application and the client would like to keep them (important!)
- The application should be intuitive and easy to use, so you can show tooltips, hints for UI elements to educate the users
- Deal Type screens follow same layout style (00_2 Deal Type.jpg)
- Most fields will have autocomplete feature – typing one letter would suggest related words
- The application should allow for selection of different languages: English, German, Italian, French
1. Landing Page / Menu
See 01 Landing Page.jpg for reference
This is the first page the user sees from this application and he’d like to perform the most important main actions:
- Deal Capture
- Search
- Single Search
- Settings
Apart from menu options, screen also has Header section containing four items version, application name (“Collateral Management”), User ID, date, time, environment (ET/UAT/PROD).
2. Deal Type
See 02 Deal Type.jpg for reference
On this page, the user can choose which deal type he wants to make for his client. He can either buy / sell allocated or unallocated precious metals.
Unallocated path actions:
- Spot
- Forward
- Transfer
Allocated path actions:
- Spot Delivery
- Spot Deposit
- Spot Consignment
- In/ Out Delivery
- Vault Transfer
For this challenge we are going to focus mostly on designing the pages the user sees when he goes to the Unallocated -> Spot section and 1 screen from the In/Out Deliver Deposit deal type flow.
3. Spot Unallocated - Contract Data Tab
See 03_1 Spot Unallocated – Contract Data Tab.jpg for reference
This is the place where the user starts the enter the details of the previous metal. He needs to enter the contract number (top left) or he can enter the counterpart number and then the FI/BK/CD right section will be auto populated.
The top left corner where “Capture” is, indicates the status of the current screen. For example now it’s showing “Capturing”, but once completed it will show “Entered” and so on.
Initially the input fields are disabled, but user is able to choose Buy/Sell option by pressing the button or F9 shortcut and then he will be able to edit them. User can then chose Metal Type, Quantity and Currency.
When the user is pressing the Metal Code dropdown he will not see a regular dropdown list but it will open up a table with the code and metal description (screen 03_2 Metal Code Selection.jpg will appear).
4. Spot Unallocated – Payment/Delivery Tab
See 04 Payment Tab.jpg for reference
On this page, the user can see more details on the payment for buying that metal. He is seeing their bank account as well as the bank account of the client who wants to buy the metal.
Additional details can be filled at the bottom as settlement instructions.
5. Spot Unallocated – Text Tab and Notes tab
See 05_1 Text Tab.jpg and 05_2 Notes Tab.jpg for reference
These tabs are very similar.
On the Text tab, the bank employee can add here specific text notes as confirmation.
On the Notes tab, he will add internal notes for other employees to see them.
6. Spot Unallocated – Output Control Tab
See 06 Output Control Tab.jpg for reference
This page is used to send a confirmation for the client that he virtually received the metal.
7. Spot Unallocated – Technical Infos Tab
See 07 Technical Infos Tab.jpg for reference
This page displays technical data from the system related to the current operation.
It should also show the bottom buttons and the progress bar.
8. Spot Unallocated – Repetition Tab
See 08 Repetition Tab.jpg for reference
When the user comes to this tab, he is able to choose which transaction to repeat and how many times.
9. In/Out Delivery Deposit – Add Items Tab
See 09 In-Out Delivery Deposit – Add Items Tab.jpg for reference
This page will show up when the user goes from the Deal Type page to Allocated -> In/Out Delivery.
The Add Items tab is active only for this page and allows the user to add more metals of different types to get out of deposit.
It should also show the bottom buttons and the progress bar.
10. Search
See 10_1 Search.jpg for reference
The user is taken to this page when he clicks the Search button from the landing page. It has multiple filters to search for one contract. Once the users presses the Search button he will be taken to the results table.
The user can also chose to do a more simple search from the landing page by going to Search Single Contract on the landing page and this will take him to a simple search - check 10_2 Search Single Contract.jpg for reference.
11. Result Table
See 11_1 Result Table.jpg for reference.
Right now the table is empty, but you can add any data as an example.
This page will display all the results that match the search criterias from the previous point. The Result table has 18 columns. If there are more rows than 18, than the scrollbar is enabled.
The top right of the table shows the total number of resulting rows.
On clicking the header of the table it will sort the data and clicking again will work as a toggle between ascending and descending order.
We’d also like to see the following states on a table:
- Selection of a deal/row in a table – show us how the user can navigate through the table when he selects different rows
- If a user deletes a row than a confirmation popup will appear (11_2 Confirmation Modal.jpg)
- If any deal/row is opened and modified the first column of that row will be marked by an asterisk mark (*)
- If a user presses the Verify button, the progress bar at the bottom will show the progress and then the message box below will show the status: Success, Warning, Error
- Right clicking anywhere on the screen other than the table – opens up the context menu (for reference check 11_3 Context Menu.jpg). Right clicking on the table does not opens up any context menu.
12. Settings
See 12 Settings.jpg for reference
This page is used by the user to customize the resulting data displayed on screens like for ex: number of rows to display in the table screen or the host printer code.
Branding
We have provided specific branding colors and font sizes for this challenge in the attached files (check Branding.jpg). Please follow those as described.
Stock Artwork & Icons
- Stock photo and icons are allowed in this challenge. Remember to read our policy about te allowed site and declare them accordingly: https://help.topcoder.com/hc/en-us/sections/203967808-Design-Copyright-Font-and-Icon-Policies
Target Devices
Design for the following size of a web application:
- Desktop: 1366px width and height as much as needed
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Employees of the client
Judging Criteria
- How modern does the interface looks?
- Does the design follows the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
• Competing in Topcoder design challenges is easy.
• First, register for the challenge by selecting the “Register” button in the top right.
• Second, review this challenge spec which provides details on what you’ll need to design.
• Third, please review this step-by-step guide on competing.
Challenge Summary
Welcome to the Dragonet Collateral Management Web App Design Concept Challenge!
In this challenge we need your help to design a modern user interface for our existing application shown in the provided wireframes. We are not looking to deviate very much from the current interface in terms of UX, due to required effort for the user training, but small improvements are welcomed.
Round 1
Submit your initial design for a Checkpoint Feedback1. Landing Page
2. Deal Type
3. Spot Unallocated - Contract Data Tab
4. Spot Unallocated – Payment/Delivery Tab
5. Spot Unallocated – Text Tab and Notes tabs
6. Spot Unallocated – Output Control Tab
7. Spot Unallocated – Technical Infos Tab
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.
Round 2
Submit your Final Design plus Checkpoint Updates1. Landing Page
2. Deal Type
3. Spot Unallocated - Contract Data Tab
4. Spot Unallocated – Payment/Delivery Tab
5. Spot Unallocated – Text Tab and Notes tabs
6. Spot Unallocated – Output Control Tab
7. Spot Unallocated – Technical Infos Tab
8. Spot Unallocated – Repetition Tab
9. In/Out Delivery Deposit – Add Items Tab
10. Search
11. Result Table
12. Settings
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Full Description & Project Guide
Design Problem
Our customer, ABC Bank, is having an Applet application that he is using to manage the collateral precious metals for their clients. We have attached wireframes of the current application. As Applet technology is getting old, they are looking to move this application to be a web one so they need us to design a clean and modern interface for their current screens, which will follow their branding.
Expectation and Special Features
We are expecting an enriched user experience and following are key aspects:
• Faster data entry optimizing time spend on screens & individual input field
• Easy to navigate - work more with keyboard for data entry & submission (prefer less with mouse), navigate easily between tabs or fields within the tab
• Intelligent suggestions/Auto-fill of text as-is in current implementation
• Hints/Suggestions & Validation Messages
Because there are a couple of industry specific terms you can find their explanation below. Note: some of the terms/labels that you’ll see in the input files, might still not be familiar, but you don’t have to explore them as the client wants us to improve the user interface, not to come up with new concepts.
Glossary:
Collateral management: is a property or other asset that a borrower offers as a way for a lender to secure the loan. If the borrower stops making the promised loan payments, the lender can seize the collateral to recoup its losses. Example: using the house as a collateral for buying a new car – if the borrower doesn’t pay, the bank will take his house
Allocated metals: refers to the user owning a certain amount of metal (bars, coins)
Unallocated metals: means the user has bought virtually the metal from the bank by doing a transaction, but doesn’t owns it physical.
Spot: is a contract of buying or selling the precious metals for immediate payment and delivery.
Overall: most of the following pages have a couple of common elements:
- Header section with application name (“Collateral Management”), User ID, date, time, environment (ET/UAT/PROD)
- Progress Bar: it’s showing the progress of action while the application loads the data. A new idea related to it would be appreciated. It sits at the bottom of the page and is shown on all Deal Type screens.
- Message Box: shows different messages related to events like success, warnings and errors (shown on all Deal Type screens, for reference of these check 00_1 Overall.jpg)
- Bottom buttons: they are different for each page, but all have a shortcut key, like F1, F2, S, etc. from the existing application and the client would like to keep them (important!)
- The application should be intuitive and easy to use, so you can show tooltips, hints for UI elements to educate the users
- Deal Type screens follow same layout style (00_2 Deal Type.jpg)
- Most fields will have autocomplete feature – typing one letter would suggest related words
- The application should allow for selection of different languages: English, German, Italian, French
1. Landing Page / Menu
See 01 Landing Page.jpg for reference
This is the first page the user sees from this application and he’d like to perform the most important main actions:
- Deal Capture
- Search
- Single Search
- Settings
Apart from menu options, screen also has Header section containing four items version, application name (“Collateral Management”), User ID, date, time, environment (ET/UAT/PROD).
2. Deal Type
See 02 Deal Type.jpg for reference
On this page, the user can choose which deal type he wants to make for his client. He can either buy / sell allocated or unallocated precious metals.
Unallocated path actions:
- Spot
- Forward
- Transfer
Allocated path actions:
- Spot Delivery
- Spot Deposit
- Spot Consignment
- In/ Out Delivery
- Vault Transfer
For this challenge we are going to focus mostly on designing the pages the user sees when he goes to the Unallocated -> Spot section and 1 screen from the In/Out Deliver Deposit deal type flow.
3. Spot Unallocated - Contract Data Tab
See 03_1 Spot Unallocated – Contract Data Tab.jpg for reference
This is the place where the user starts the enter the details of the previous metal. He needs to enter the contract number (top left) or he can enter the counterpart number and then the FI/BK/CD right section will be auto populated.
The top left corner where “Capture” is, indicates the status of the current screen. For example now it’s showing “Capturing”, but once completed it will show “Entered” and so on.
Initially the input fields are disabled, but user is able to choose Buy/Sell option by pressing the button or F9 shortcut and then he will be able to edit them. User can then chose Metal Type, Quantity and Currency.
When the user is pressing the Metal Code dropdown he will not see a regular dropdown list but it will open up a table with the code and metal description (screen 03_2 Metal Code Selection.jpg will appear).
4. Spot Unallocated – Payment/Delivery Tab
See 04 Payment Tab.jpg for reference
On this page, the user can see more details on the payment for buying that metal. He is seeing their bank account as well as the bank account of the client who wants to buy the metal.
Additional details can be filled at the bottom as settlement instructions.
5. Spot Unallocated – Text Tab and Notes tab
See 05_1 Text Tab.jpg and 05_2 Notes Tab.jpg for reference
These tabs are very similar.
On the Text tab, the bank employee can add here specific text notes as confirmation.
On the Notes tab, he will add internal notes for other employees to see them.
6. Spot Unallocated – Output Control Tab
See 06 Output Control Tab.jpg for reference
This page is used to send a confirmation for the client that he virtually received the metal.
7. Spot Unallocated – Technical Infos Tab
See 07 Technical Infos Tab.jpg for reference
This page displays technical data from the system related to the current operation.
It should also show the bottom buttons and the progress bar.
8. Spot Unallocated – Repetition Tab
See 08 Repetition Tab.jpg for reference
When the user comes to this tab, he is able to choose which transaction to repeat and how many times.
9. In/Out Delivery Deposit – Add Items Tab
See 09 In-Out Delivery Deposit – Add Items Tab.jpg for reference
This page will show up when the user goes from the Deal Type page to Allocated -> In/Out Delivery.
The Add Items tab is active only for this page and allows the user to add more metals of different types to get out of deposit.
It should also show the bottom buttons and the progress bar.
10. Search
See 10_1 Search.jpg for reference
The user is taken to this page when he clicks the Search button from the landing page. It has multiple filters to search for one contract. Once the users presses the Search button he will be taken to the results table.
The user can also chose to do a more simple search from the landing page by going to Search Single Contract on the landing page and this will take him to a simple search - check 10_2 Search Single Contract.jpg for reference.
11. Result Table
See 11_1 Result Table.jpg for reference.
Right now the table is empty, but you can add any data as an example.
This page will display all the results that match the search criterias from the previous point. The Result table has 18 columns. If there are more rows than 18, than the scrollbar is enabled.
The top right of the table shows the total number of resulting rows.
On clicking the header of the table it will sort the data and clicking again will work as a toggle between ascending and descending order.
We’d also like to see the following states on a table:
- Selection of a deal/row in a table – show us how the user can navigate through the table when he selects different rows
- If a user deletes a row than a confirmation popup will appear (11_2 Confirmation Modal.jpg)
- If any deal/row is opened and modified the first column of that row will be marked by an asterisk mark (*)
- If a user presses the Verify button, the progress bar at the bottom will show the progress and then the message box below will show the status: Success, Warning, Error
- Right clicking anywhere on the screen other than the table – opens up the context menu (for reference check 11_3 Context Menu.jpg). Right clicking on the table does not opens up any context menu.
12. Settings
See 12 Settings.jpg for reference
This page is used by the user to customize the resulting data displayed on screens like for ex: number of rows to display in the table screen or the host printer code.
Branding
We have provided specific branding colors and font sizes for this challenge in the attached files (check Branding.jpg). Please follow those as described.
Stock Artwork & Icons
- Stock photo and icons are allowed in this challenge. Remember to read our policy about te allowed site and declare them accordingly: https://help.topcoder.com/hc/en-us/sections/203967808-Design-Copyright-Font-and-Icon-Policies
Target Devices
Design for the following size of a web application:
- Desktop: 1366px width and height as much as needed
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Employees of the client
Judging Criteria
- How modern does the interface looks?
- Does the design follows the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.