BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "Hierarchical  Dashboard - DViz Design Concepts Challenge".

In this challenge, we are looking to explore design concepts for a new Data Visualization Dashboard that will be implemented as a web report or using Qlik Sense. We are looking to design the data visualization experience to represent hierarchical financial information of multiple levels (5 levels at the very minimum). There will be different hierarchies for different financial entities.

We are really excited to kick off this new DViz Design Concepts Challenge.

Round 1

Submit your initial designs for a checkpoint feedback

- 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 the correct flow! Use correct file numbering. (00, 01, 02, 03)

 

Round 2

Submit your final designs with all checkpoint feedback implemented.

- 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 the correct flow! Use correct file numbering. (00, 01, 02, 03)

 

In this challenge, we are looking to design creative (and useful) data visualization dashboards that will be created as a web-report or using Qlik Sense.

Design Considerations
- We are looking for a simple, easy-to-use, Informative, modern design.
- Try not to have too much information on your dashboard, you can make them compelling by making the visualization interactive and enable users to walk through or drill into the different insights.
- Use color, visual comparison, and drill-down charts to highlight comparison.
- Have your designs of size: 1366 x 768px
- Branding is open to the designers

Required Dashboard Designs
The customer for whom we are building this UI/UX is a bank. The bank has further “contracts” with other financial institutions like other banks, financial institutions etc. Due to a new financial regulation raised by governments, these contracts have come under risk - some high risk, some medium, some low risk, some no risk (not affected by regulation).

The customer wants to build a dashboard where they can track these contracts. They want to see the total value of the contracts and how much of that value is at high risk, medium risk, low risk and no risk.
Since this is a dashboard, they want the ability to drill down the contract value by the various attributes of the contract.

01 Dashboard:
- We are looking for your help to design a dashboard that represents hierarchical Financial information of multiple levels (5 levels at the very minimum). There will be different hierarchies for different financial entities. 

FUNCTIONAL UNDERSTANDING:
These contracts have various properties.
- Bank Division: The division which has this contract
- Sub-division: The client with which the contract has been done.
- Client category: the Client can be assigned a category (Bank, Investment firm, financial institution etc.)
- Product type: Type of contract
- Sub product type
- Trade type – what is the trade type covered in the contract
- Contract END DATE (2020, 2021, etc. etc. )
- Contract Currency
- Contract value
- Many more attributes

We are looking to have 3 to 5 levels of hierarchies. We can expand each hierarchy with further attributes like currency (EUR, JPY, GBP, USD, CHF) or Trade maturity bucket (2020, 2021, 2023,2025,>2025 etc).

Examples of hierarchies are:
A. Divisional Exposure - Hierarchical structure
LEVEL1: Bank Division (APAC, GM, APAC, SUB, IWM, Corporate Center)
LEVEL 2: Sub-division (GM Equity, GM Credit, APAC Markets, XVA, etc)
LEVEL3: Either Booking entity or Cluster (Booking entity is a bank or trading company. Cluster is a group of trading companies in a market)

B. Counterparty Category - Hierarchical structure
LEVEL1: Risk Category (High, Medium, Low)
LEVEL2: Client Category (Private Client, Hedge fund, Corporate, Bank, Clearing House, etc.
LEVEL3:

C. Product Category - Hierarchical structure
- LEVEL1: Product Type (e.g. Loan, Derivative, Inventory)
- LEVEL2: Sub product category (e.g. OTC Derivative, Cleared Derivatives, Bonds, Syndicated Loan, Corp Loans and Mortgages, etc )
- LEVEL3: Trade Type (e.g. IR Swap, Repo, IR Futures, IR Options, Mortgage loan, Corporate Loan, etc)

Provide a way for the customers to run filters on the hierarchy.

02 Hierarchy Management:
Provide the ability to build their own hierarchical control by dragging and dropping from a master list of attributes just like we do in a pivot table in excel. Then the customer can save a version of the control for use next time and not have to build a tree-view control from scratch every time.

Reference:
1. Customer has used a tree-view to represent three-level hierarchical information (https://drive.google.com/open?id=1J16BPh0kHI7VvO9TEGh4CtST3j-u5lec)
2. The size of each node of the tree-view represents the dollar value of the node. The larger the dollar value, the larger is the size of the node.
3. Also different colors of the nodes (e.g. red, amber and green) would represent if the dollar value is at high risk, medium risk or low risk.

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 dashboard

MarvelApp Prototype
- We need you to upload your screens to the Marvel App
- 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
- CFO, Retail & Corporate Finance Heads

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30111726