Challenge Summary
Welcome to Dragonet - Worksheet UI/UX Design Concepts Challenge, in this challenge, we are looking to improve the overall UI/UX of a legacy app built in 1998.
For this challenge, we are going to handle a minor part of the application called FOBO worksheet - we have provided wireframes from the existing desktop application to help you get started.
We are excited to see your designs for this challenge.
Good Luck!
01 FOBO Worksheet Criteria
02 Book Summary
03 Details
03 1 Details
03 2 Aging
03 3 Feeds
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
01 FOBO Worksheet Criteria
02 Book Summary
03 Details
03 1 Details
03 2 Aging
03 3 Feeds
04 Break Reason
05 Product Type
06 Reports
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Books:
A Book is a basic structure, i.e. a collection of trades or positions, for which a single trader is responsible and which are used for calculating risk and P&L (Profit and Loss). We have a defined hierarchy (book -> department -> cluster -> region etc.) for each book, a Book Owner and it also has many other attributes that are required for reporting purposes.
Example: Book Name: JCB, Description: Japan Corporate Bonds.
This book keeps an inventory of all trades executed by the Japanese Corporate Bond Desk. A Desk implies a group of traders assigned to this trading activity book is at the lowest level, traders are assigned books based on the specialization/basket of trades they are most likely to trade in.
Ex: TW swap flow contains swaps and hedges, NY proprietary trading, etc. Different kind of financial products, what they are actually specializing in..book will be re that product.
Design Considerations
- We are looking for simple, easy-to-use, Informative, modern design.
- Have your designs of size: 1366 x 768px
- We have a branding guidelines document, please follow that.
- We are providing wireframes to help you get started with the designs.
Required Screens
01 FOBO Worksheet Criteria:
- The user will initially choose the criteria to select the book they want to work with.
- Selection criteria could include “System Source, Business Date, P&L (drop-down), Present Value (PV), Breaks Only (checkbox or something similar in functionality), Product Types (multiple items will be chosen), Business Unit (textbox)
- - - In the above criteria, when the user decides to include “breaks only” then they can enter/set “Price and Present value” (both these are just numbers that are entered) criteria to filter out the books
- Based on the criteria, results are shown, user can view books at different hierarchical level (there are about 23 ways to view the books “product controller, book owner, trader, strategy, system, user-defined, legal, ADR group, SLAP cluster, GPL report, batch print, CCY report, trade group, Euro group, Euro report, company, product, cluster, product line, reports, region, book, APAC book”). Your design needs to show on how a user will use these various ways to select a view to seeing the books based on that hierarchical level. For example, we can assume user choose “Product Controller”: This shows the product controller names and the user clicks on a product controller name to see the list of books under them and then the user selects the book they want to view.
02 Book Summary
Front Office back Office performs a comparison based on 4 attributes position, price, P&L, Present value. It tells if there is any difference between FO or BO.
- This includes these columns “Book, description, breaks, W/reason, matched, break summary (position, price, P&L, Present value), search Hugo.
- Filters: When the user decides to include “breaks only” (checkbox) then they can enter/set “Price and Present value” (both these are just numbers that are entered) criteria to filter out the Hugo.
03 Details
- If there is any difference it is shown here in details
- This shows a list of Hugo (securities) in native currency with the 4 attributes mentioned above (position, price, P&L, Present value)
- These columns need to be shown for this table: Book, Hugo, Description, Currency, FOBO difference (position, price, P&L, Present value), age, reason, and sources.
- Choosing a Hugo in one of them will show more details in tabs “ Details, Aging, Feeds”
03 1 Details:
- This shows the details of the security (ISIN, ticker, factor, multiplier, pool factor, ticker (BBG), product type)
- Also show the comparison of values from “position, price, P&L, Present value” for FO and BO
- We also show the age breaks (Purpose of this field is to show the number of days the break has been appearing in the report for respective columns)
03 2 Aging:
- This shows movement for the past few days
- These columns need to be included “Date, Position, Price, P&L, and PV, Comment, Last Updated By and Last Updated” (NOTE: It shows up the data once a user updates the Break Reason against any row).
- Under “Price, P&L, and PV”, we show 2 other columns which are values in FO (FTS, etc) and BO (NTPA, etc).
- We have a difference checkbox (Purpose of this to show the difference between FO & BO values for the respective columns i.e. Position, Price, P&L and PV. See screenshot below - the view in the grid changes when the checkbox is ticked).
03 3 Feeds:
- This shows a table under “FTS (Front office) position feed and BO (Back office) feed” which is compared manually to find the discrepancies between values in columns (NOTE: Both tables has different columns)
- Once they find the main reason for this cause of discrepancies, the user will enter the reason against the Hugo that was selected in 03 Details.
04 Break Reason
- This is a template/static table to maintain the break reasons, which can be used as a drop-down list while mentioning the break reasons.
- We need these columns “Reason Code, Reason description and last updated by, Count (lists how many breaks were marked against each reason categories)”
- This shows the list of standard reasons and also an option called “Other” where they can enter free-form text.
- Provide an option for the user to edit or delete existing reasons
- Should be able to add a new reason
05 Product Type
- Each tab provides a different view of the FOBO data. This “Product Type” tab groups the books/FOBO data according to Product Type.
- This will include these columns “Group, Type, Type Description, Count (indicates the number of books under each Product Type category), and filter”
- Details for each selected Product Type are displayed in the lower table.
06 Reports
- The report is grouped by currency (follow the reference wireframe)
- Provide a way to zoom-in/out of the reports
- Filters: When the user decides to include “breaks only” (checkbox) then they can enter/set “Price and Present value” (both these are just numbers that are entered) criteria to filter out the reports.
NOTE:
- Normally you would expect that FO and BO systems would have the same data. When the data i.e. position, pnL, price, PV, do not match .. it is called as a break. The "breaks-only" checkbox is to filter the records to display only the non-matching ones - which really are the ones users need to validate and provide a reason for the breaks.
- The Reason field updated by the user should be shown on this Tab under Age Narrative Column. The username and time who updated Reason displayed under Upd User and Upd Date column
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Focus on User Experience / how the user interacts within the screens
MarvelApp Prototype
- We need you to upload your screens to Marvelapp
- Please send your Marvel app request to csystic@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience
- Product Controllers (Reconciliation Team)
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.
- Consistency across the UX/UI
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
- Submit Marvelapp as part of your submission.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!
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.
For this challenge, we are going to handle a minor part of the application called FOBO worksheet - we have provided wireframes from the existing desktop application to help you get started.
We are excited to see your designs for this challenge.
Good Luck!
Round 1
Submit your initial designs for a checkpoint feedback01 FOBO Worksheet Criteria
02 Book Summary
03 Details
03 1 Details
03 2 Aging
03 3 Feeds
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final designs with all checkpoint feedback implemented.01 FOBO Worksheet Criteria
02 Book Summary
03 Details
03 1 Details
03 2 Aging
03 3 Feeds
04 Break Reason
05 Product Type
06 Reports
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Books:
A Book is a basic structure, i.e. a collection of trades or positions, for which a single trader is responsible and which are used for calculating risk and P&L (Profit and Loss). We have a defined hierarchy (book -> department -> cluster -> region etc.) for each book, a Book Owner and it also has many other attributes that are required for reporting purposes.
Example: Book Name: JCB, Description: Japan Corporate Bonds.
This book keeps an inventory of all trades executed by the Japanese Corporate Bond Desk. A Desk implies a group of traders assigned to this trading activity book is at the lowest level, traders are assigned books based on the specialization/basket of trades they are most likely to trade in.
Ex: TW swap flow contains swaps and hedges, NY proprietary trading, etc. Different kind of financial products, what they are actually specializing in..book will be re that product.
Design Considerations
- We are looking for simple, easy-to-use, Informative, modern design.
- Have your designs of size: 1366 x 768px
- We have a branding guidelines document, please follow that.
- We are providing wireframes to help you get started with the designs.
Required Screens
01 FOBO Worksheet Criteria:
- The user will initially choose the criteria to select the book they want to work with.
- Selection criteria could include “System Source, Business Date, P&L (drop-down), Present Value (PV), Breaks Only (checkbox or something similar in functionality), Product Types (multiple items will be chosen), Business Unit (textbox)
- - - In the above criteria, when the user decides to include “breaks only” then they can enter/set “Price and Present value” (both these are just numbers that are entered) criteria to filter out the books
- Based on the criteria, results are shown, user can view books at different hierarchical level (there are about 23 ways to view the books “product controller, book owner, trader, strategy, system, user-defined, legal, ADR group, SLAP cluster, GPL report, batch print, CCY report, trade group, Euro group, Euro report, company, product, cluster, product line, reports, region, book, APAC book”). Your design needs to show on how a user will use these various ways to select a view to seeing the books based on that hierarchical level. For example, we can assume user choose “Product Controller”: This shows the product controller names and the user clicks on a product controller name to see the list of books under them and then the user selects the book they want to view.
02 Book Summary
Front Office back Office performs a comparison based on 4 attributes position, price, P&L, Present value. It tells if there is any difference between FO or BO.
- This includes these columns “Book, description, breaks, W/reason, matched, break summary (position, price, P&L, Present value), search Hugo.
- Filters: When the user decides to include “breaks only” (checkbox) then they can enter/set “Price and Present value” (both these are just numbers that are entered) criteria to filter out the Hugo.
03 Details
- If there is any difference it is shown here in details
- This shows a list of Hugo (securities) in native currency with the 4 attributes mentioned above (position, price, P&L, Present value)
- These columns need to be shown for this table: Book, Hugo, Description, Currency, FOBO difference (position, price, P&L, Present value), age, reason, and sources.
- Choosing a Hugo in one of them will show more details in tabs “ Details, Aging, Feeds”
03 1 Details:
- This shows the details of the security (ISIN, ticker, factor, multiplier, pool factor, ticker (BBG), product type)
- Also show the comparison of values from “position, price, P&L, Present value” for FO and BO
- We also show the age breaks (Purpose of this field is to show the number of days the break has been appearing in the report for respective columns)
03 2 Aging:
- This shows movement for the past few days
- These columns need to be included “Date, Position, Price, P&L, and PV, Comment, Last Updated By and Last Updated” (NOTE: It shows up the data once a user updates the Break Reason against any row).
- Under “Price, P&L, and PV”, we show 2 other columns which are values in FO (FTS, etc) and BO (NTPA, etc).
- We have a difference checkbox (Purpose of this to show the difference between FO & BO values for the respective columns i.e. Position, Price, P&L and PV. See screenshot below - the view in the grid changes when the checkbox is ticked).
03 3 Feeds:
- This shows a table under “FTS (Front office) position feed and BO (Back office) feed” which is compared manually to find the discrepancies between values in columns (NOTE: Both tables has different columns)
- Once they find the main reason for this cause of discrepancies, the user will enter the reason against the Hugo that was selected in 03 Details.
04 Break Reason
- This is a template/static table to maintain the break reasons, which can be used as a drop-down list while mentioning the break reasons.
- We need these columns “Reason Code, Reason description and last updated by, Count (lists how many breaks were marked against each reason categories)”
- This shows the list of standard reasons and also an option called “Other” where they can enter free-form text.
- Provide an option for the user to edit or delete existing reasons
- Should be able to add a new reason
05 Product Type
- Each tab provides a different view of the FOBO data. This “Product Type” tab groups the books/FOBO data according to Product Type.
- This will include these columns “Group, Type, Type Description, Count (indicates the number of books under each Product Type category), and filter”
- Details for each selected Product Type are displayed in the lower table.
06 Reports
- The report is grouped by currency (follow the reference wireframe)
- Provide a way to zoom-in/out of the reports
- Filters: When the user decides to include “breaks only” (checkbox) then they can enter/set “Price and Present value” (both these are just numbers that are entered) criteria to filter out the reports.
NOTE:
- Normally you would expect that FO and BO systems would have the same data. When the data i.e. position, pnL, price, PV, do not match .. it is called as a break. The "breaks-only" checkbox is to filter the records to display only the non-matching ones - which really are the ones users need to validate and provide a reason for the breaks.
- The Reason field updated by the user should be shown on this Tab under Age Narrative Column. The username and time who updated Reason displayed under Upd User and Upd Date column
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Focus on User Experience / how the user interacts within the screens
MarvelApp Prototype
- We need you to upload your screens to Marvelapp
- Please send your Marvel app request to csystic@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience
- Product Controllers (Reconciliation Team)
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.
- Consistency across the UX/UI
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
- Submit Marvelapp as part of your submission.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!
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.
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.