Challenge Summary
Welcome to "Dragonet KRI Dashboard - Power BI DViz UI Design Challenge", in this challenge, we are looking to explore design interfaces for new Data Visualization reports that will be implemented using "Microsoft Power BI". The client is looking for topcoder community design expertise in coming up with creative design concepts.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Challenge Objectives
The purpose of this project is to design a web desktop resolution KRI reports generated through Power BI.
The objective of the project is to design a modern and intuitive report that allows the easy understanding of a huge amount of data by KRI.
01 KRIs Reports (Initial group)
Critical Application Access Management
Critical Patching
Technical Security Controls
End-of-Life (EOL) Software
Integrated Information Security Baseline (IISB)
IT Risk & Control Security Assessment (RCSA/BCA) Gaps
Supplier Information Security Due Diligence & Security Assessments
Intune Relaxed Mobile Application Management (MAM) Group
As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01 KRIs Reports (All groups)
As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2.
BACKGROUND INFORMATION
Dragonet is the codename for our client, which is a global company focused on life and non life insurances. The APAC (Asia Pacific) Information Security Risk & Compliance (ISRC) team prepares an APAC Information Security report on a monthly basis. The report, in the form of a PowerPoint file, provides stakeholders and other interested parties with the Key Risk Indicator (KRI) metrics for the past month. There are currently around 80 to 85 KRIs covering various Information Security domains, such as vulnerability management and incident reporting.
Through this challenge, the client is looking for the topcoder community to come up with a design for a set of reports that will be displaying relevant information for internal BISOs and stakeholders. We would like to create the reports in PowerBI, so it is easy to consume by everyone.
THE PROCESS
Data comes from various sources, api, flat files, manual (via web application), the data is validated, processed to obtain KRI's.
Data ---> rules ---> process---> KRI
Currently, to prepare the report, ISRC collects raw data from Information Security team members, and company reporting systems. Data collected is further analysed to derive focus areas requiring attention by Business Information Security Officers (BISOs) of various APAC locations, and regional security leads. Results from this analysis are reflected on the draft dashboard sent to the BISOs and regional security leads for comment. These comments are then integrated into the draft to be reviewed by the APAC BISO and ISRC Manager. Adjustments proposed during the review are applied by ISRC into a final version for distribution to the APAC Information Security community. APAC IT Service Management also receives a copy for inclusion within regional IT reporting. In the future, ISRC intends to utilise a data visualisation tool (e.g. Power BI) to produce reports tha
AUDIENCE
- Information Security Risk & Compliance (ISRC) team
- Business Information Security Officers (BISOs)
- Stakeholders
DESIGN CONSIDERATIONS
We are looking for a simple, easy-to-use, Informative, modern and clean layout..
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. You need to work with the colors provided in the branding section of this challenge.
Have your designs of size: 1366 x 768px (Desktop only, Power BI is responsive by nature so just need to design/ build once)
We have provided some reference images for ideas on the type of KPI’s but please don’t follow them as we are looking for something creative from the topcoder design community.
POWER BI REQUIREMENTS
All principles of good UX design e.g. minimize user clicks, make the experience more intuitive, minimal time to reach desired selection criteria, store user selections for multiple reports and performance, good color and font themes, etc, these are all critical success factors for this challenge.
Needs to follow Power BI Design Best Practices and also take a look at the Design Tips
Please do some research on the Power BI software and get familiar with its purpose, limitations, and what's possible.
You can reference this video about Power BI.
REFERENCE
Example dashboards design reference for your considerations:
- https://powerbi.microsoft.com/en-us/
- https://community.powerbi.com/t5/Data-Stories-Gallery/bd-p/DataStoriesGallery
- https://docs.microsoft.com/en-us/power-bi/service-dashboard-create
- https://id.pinterest.com/steffuhnee/power-bi-dashboards/?lp=true
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters):
REQUIRED FEATURES:
Intuitive experience for end customers
Developer friendly and easy to build designs
Easy to translate to Microsoft Power BI reports.
Allow a different variety of charts and data visualization. Think on filtering, sorting and exporting the data.
SCREEN REQUIREMENTS
For this challenge, we are looking for the below screens to be created in your submission. The functionality details listed below need to be included in your solution:
01 KRIs Reports (16 groups)
We are looking for a dashboard design where we can show and present the different 16 groups which contains around 83 to 85 different KRI to be represented in this power BI report.
The organization of these KRI is up to you, but keep in mind that there are several business locations, and each of these business locations (namely ANZ, CN, HK, ID, MY, JP, SG) will have its own set of KRI figures. Please ensure that your design considers this. You can spread the KRI into several dashboard pages, or just provide a single dashboard page where users can select a region with a dropdown and navigate through the KRI. Consider the simpler and cleaner user experience.
These KRIs are generated through different sources such as:
SharePoint REST API
CSV files
Manual uploaded / added
We need you to design the different KPI/KRI views for all security areas listed below:
Each of these security areas have different categories within. Please refer to ”Infosec KRI Summary (20200825) - with descriptions.xlsx” file to see all the categories and the data source to each. The unit indicator (# or %) gives a hint on how the values can be presented (e.g. pie chart, bar graph etc.).
Comparing KRIs against standards and historical values
"Standards" mean the "brackets" that we use for some KRIs, e.g. Not good (80% and below), average/needs improvement (80-95%), good (> 95%). So now we use the arrow colours and direction to describe whether things are better or worse than before (color indicating whether the value is good or bad, arrow direction means whether the risk is increased "upwards" or decreased "downwards" as compared to the last data refresh).
The gist is that we need to illustrate the trend and what it means to the risk level. Perhaps we can derive a trend indicator by looking at more values instead of the very last one (which is what we are doing now).
Presently, KRI values on a dashboard page are accompanied by visual indicators, which lets the reader know whether a value is “good” or “bad”.
Symbols are used to indicate whether the risk to the organisation has changed, when the current KRI value is compared to the value from a previous version of the dashboard (eg: last month). An upward pointing arrow indicates increased risk, and a downward pointing arrow indicates decreased risk. A square indicates no change.
The “KPI-Historical-Value-Comparison.png” graphic shows a sample of how to represent this.
“Brackets” are defined for a few KRIs (e.g. < 80% is red, 80% - 95% is amber, > 95% is green). The colour of the symbol shall indicate which bracket it falls under.
The “APAC-Information-Security-Dashboard.png” provides a view of how the data is organized and alternate samples of charts for the different KRIs.
BRANDING GUIDELINES (Link at forum)
Please use the branding guidelines provided in the forum.
You need to work with these colors only. DO NOT ADD new colors beyond the ones detailed in the branding material.
Also we are providing some reference sketches so you can have a better understanding of the requested pages .
MARVEL PROTOTYPE
We need you to upload your screens to Marvel App
Please request for marvel app in the challenge forum
You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
TARGET DEVICE
Desktop: 1366 x 768px.
SUBMISSION AND SOURCE FILES
Submission File
Submit all JPG/PNG image files based on Challenge submission requirements stated above
Source File
All source files of all graphics created in either Power Bi (.pbix), Adobe Photoshop, XD, Sketch, or Figma and saved as an editable layer
Declaration File
Declaration files document contains the following information:
Stock Photos Name and Links from allowed sources
Stock Art/Icons Name and Links from allowed sources
Fonts Name and Links source from allowed sources
MarvelApp share link for review
FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Challenge Objectives
The purpose of this project is to design a web desktop resolution KRI reports generated through Power BI.
The objective of the project is to design a modern and intuitive report that allows the easy understanding of a huge amount of data by KRI.
Round 1
Submit your initial designs for the checkpoint review. Feel free to add any screens which are necessary to explain your concept01 KRIs Reports (Initial group)
Critical Application Access Management
Critical Patching
Technical Security Controls
End-of-Life (EOL) Software
Integrated Information Security Baseline (IISB)
IT Risk & Control Security Assessment (RCSA/BCA) Gaps
Supplier Information Security Due Diligence & Security Assessments
Intune Relaxed Mobile Application Management (MAM) Group
As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final designs plus checkpoint feedback implemented for the final round. Feel free to add any screens which are necessary to explain your concept:01 KRIs Reports (All groups)
As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2.
BACKGROUND INFORMATION
Dragonet is the codename for our client, which is a global company focused on life and non life insurances. The APAC (Asia Pacific) Information Security Risk & Compliance (ISRC) team prepares an APAC Information Security report on a monthly basis. The report, in the form of a PowerPoint file, provides stakeholders and other interested parties with the Key Risk Indicator (KRI) metrics for the past month. There are currently around 80 to 85 KRIs covering various Information Security domains, such as vulnerability management and incident reporting.
Through this challenge, the client is looking for the topcoder community to come up with a design for a set of reports that will be displaying relevant information for internal BISOs and stakeholders. We would like to create the reports in PowerBI, so it is easy to consume by everyone.
THE PROCESS
Data comes from various sources, api, flat files, manual (via web application), the data is validated, processed to obtain KRI's.
Data ---> rules ---> process---> KRI
Currently, to prepare the report, ISRC collects raw data from Information Security team members, and company reporting systems. Data collected is further analysed to derive focus areas requiring attention by Business Information Security Officers (BISOs) of various APAC locations, and regional security leads. Results from this analysis are reflected on the draft dashboard sent to the BISOs and regional security leads for comment. These comments are then integrated into the draft to be reviewed by the APAC BISO and ISRC Manager. Adjustments proposed during the review are applied by ISRC into a final version for distribution to the APAC Information Security community. APAC IT Service Management also receives a copy for inclusion within regional IT reporting. In the future, ISRC intends to utilise a data visualisation tool (e.g. Power BI) to produce reports tha
AUDIENCE
- Information Security Risk & Compliance (ISRC) team
- Business Information Security Officers (BISOs)
- Stakeholders
DESIGN CONSIDERATIONS
We are looking for a simple, easy-to-use, Informative, modern and clean layout..
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. You need to work with the colors provided in the branding section of this challenge.
Have your designs of size: 1366 x 768px (Desktop only, Power BI is responsive by nature so just need to design/ build once)
We have provided some reference images for ideas on the type of KPI’s but please don’t follow them as we are looking for something creative from the topcoder design community.
POWER BI REQUIREMENTS
All principles of good UX design e.g. minimize user clicks, make the experience more intuitive, minimal time to reach desired selection criteria, store user selections for multiple reports and performance, good color and font themes, etc, these are all critical success factors for this challenge.
Needs to follow Power BI Design Best Practices and also take a look at the Design Tips
Please do some research on the Power BI software and get familiar with its purpose, limitations, and what's possible.
You can reference this video about Power BI.
REFERENCE
Example dashboards design reference for your considerations:
- https://powerbi.microsoft.com/en-us/
- https://community.powerbi.com/t5/Data-Stories-Gallery/bd-p/DataStoriesGallery
- https://docs.microsoft.com/en-us/power-bi/service-dashboard-create
- https://id.pinterest.com/steffuhnee/power-bi-dashboards/?lp=true
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters):
- Creativity: 8
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
- Aesthetics: 10
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
- Exploration: 8
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
- Branding: 5
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
REQUIRED FEATURES:
Intuitive experience for end customers
Developer friendly and easy to build designs
Easy to translate to Microsoft Power BI reports.
Allow a different variety of charts and data visualization. Think on filtering, sorting and exporting the data.
SCREEN REQUIREMENTS
For this challenge, we are looking for the below screens to be created in your submission. The functionality details listed below need to be included in your solution:
01 KRIs Reports (16 groups)
We are looking for a dashboard design where we can show and present the different 16 groups which contains around 83 to 85 different KRI to be represented in this power BI report.
The organization of these KRI is up to you, but keep in mind that there are several business locations, and each of these business locations (namely ANZ, CN, HK, ID, MY, JP, SG) will have its own set of KRI figures. Please ensure that your design considers this. You can spread the KRI into several dashboard pages, or just provide a single dashboard page where users can select a region with a dropdown and navigate through the KRI. Consider the simpler and cleaner user experience.
These KRIs are generated through different sources such as:
SharePoint REST API
CSV files
Manual uploaded / added
We need you to design the different KPI/KRI views for all security areas listed below:
- Critical Application Access Management
- Critical Patching
- Technical Security Controls
- End-of-Life (EOL) Software
- Integrated Information Security Baseline (IISB)
- IT Risk & Control Security Assessment (RCSA/BCA) Gaps
- Supplier Information Security Due Diligence & Security Assessments
- Intune Relaxed Mobile Application Management (MAM) Group
- Exceptions
- Security Awareness
- Data Security Initiatives (DSI) Compliance
- Security Incidents
- Data Loss Prevention (DLP) Incidents
- Aperture DLP
- Data Storage
- Asset Inventory
Each of these security areas have different categories within. Please refer to ”Infosec KRI Summary (20200825) - with descriptions.xlsx” file to see all the categories and the data source to each. The unit indicator (# or %) gives a hint on how the values can be presented (e.g. pie chart, bar graph etc.).
Comparing KRIs against standards and historical values
"Standards" mean the "brackets" that we use for some KRIs, e.g. Not good (80% and below), average/needs improvement (80-95%), good (> 95%). So now we use the arrow colours and direction to describe whether things are better or worse than before (color indicating whether the value is good or bad, arrow direction means whether the risk is increased "upwards" or decreased "downwards" as compared to the last data refresh).
The gist is that we need to illustrate the trend and what it means to the risk level. Perhaps we can derive a trend indicator by looking at more values instead of the very last one (which is what we are doing now).
Presently, KRI values on a dashboard page are accompanied by visual indicators, which lets the reader know whether a value is “good” or “bad”.
Symbols are used to indicate whether the risk to the organisation has changed, when the current KRI value is compared to the value from a previous version of the dashboard (eg: last month). An upward pointing arrow indicates increased risk, and a downward pointing arrow indicates decreased risk. A square indicates no change.
The “KPI-Historical-Value-Comparison.png” graphic shows a sample of how to represent this.
“Brackets” are defined for a few KRIs (e.g. < 80% is red, 80% - 95% is amber, > 95% is green). The colour of the symbol shall indicate which bracket it falls under.
The “APAC-Information-Security-Dashboard.png” provides a view of how the data is organized and alternate samples of charts for the different KRIs.
BRANDING GUIDELINES (Link at forum)
Please use the branding guidelines provided in the forum.
You need to work with these colors only. DO NOT ADD new colors beyond the ones detailed in the branding material.
Also we are providing some reference sketches so you can have a better understanding of the requested pages .
MARVEL PROTOTYPE
We need you to upload your screens to Marvel App
Please request for marvel app in the challenge forum
You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
TARGET DEVICE
Desktop: 1366 x 768px.
SUBMISSION AND SOURCE FILES
Submission File
Submit all JPG/PNG image files based on Challenge submission requirements stated above
Source File
All source files of all graphics created in either Power Bi (.pbix), Adobe Photoshop, XD, Sketch, or Figma and saved as an editable layer
Declaration File
Declaration files document contains the following information:
Stock Photos Name and Links from allowed sources
Stock Art/Icons Name and Links from allowed sources
Fonts Name and Links source from allowed sources
MarvelApp share link for review
FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths
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.