Challenge Summary
Welcome to "Dragonet Data Management Web Application UI Design Challenge" In this challenge you will be working on creating the high fidelity design for a web based desktop application platform that will help the Information Security Risk & Compliance team of a global company to manage a large amount of data that will be used to generate KRIs.
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 based desktop application that will be used to manage data by creating tables, importing CSV files, and keeping a track of BISOs comments.
The objective of the project is to design a modern and intuitive web application.
Approximately 7 Screens.
01 Data Management Builder workflow
02 Data Management Interface
03 Data Management Interface interactions
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 Data Management Builder workflow
02 Data Management Interface
03 Data Management Interface interactions
04 KRI comments Table
05 KRI Add comments
06 The notification listing
07 Errors Listing Page
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.
BACKGROUND INFORMATION
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.
For this challenge you will be working on creating the workflow to manage the data that generate this KRIs
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 that are centrally accessible to stakeholders.
GLOSSARY
- KRI: Key Risk Indicator, are a way to quantify and monitor the biggest risks an organisation is exposed to or how risky a particular venture or activity is.
- APAC: Asian Pacific
- ISRC: Information Security Risk & Compliance
- BISO: Business Information Security Officers
- CRUD: Create, read, update and delete data.
Information Security Risk & Compliance (ISRC) team
Information Security Risk & Compliance (ISRC) Manager
Business Information Security Officers (BISOs)
Name: John
John is a member of our ISRC team, he needs to collect data from different sources between the 1st and 4th working day of every month. On the 5th working day of the month he needs to send a draft report to BISOs and Security Leads admins in order to get comments and feedback about the KRI generated when entering the data. BISOs have a working day to enter their comments, once this is completed by day 6, John needs to send the completed report to APAC BISO for a final review. This process usually takes 1 to 2 working days. If everything is completed and the requests are met, John finally distributes the report to the stakeholders and other interested parties on Information Security KRIs.
Pain points
John is currently doing all this process manually with spreadsheets. John has a difficult time in collating data , processing it and sharing it with stakeholders
This design is one of the steps to achieve this goal.
Below are some of the goals:
We are looking for a new visual experience beyond the provided wireframes. These are screens that serve as a rough draft of the overall functionality. DO NOT COPY these layouts, use them as reference only. These will be linked directly within this specs wherever are needed.
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):
Interfaces to collect data manually via screens
Ability to keep track of BISO comments.
Interfaces should collect inputs/uploaded raw data from security team members, and/or reporting systems
Overall considerations:
The application will have users belonging to multiple regions and roles.
These will constrain the data and the access levels of the users.
This is a development activity hence designers need not worry about showing role level and data level constraints while designing the screens.
Please make sure to understand that you don’t need to design different views for each role. Just focus on the 7 screens requested below.
Please check the “00-user-flow.png” image in the supporting material (in forum) for better understanding.
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:
This interface will be used by the Security Leads Admins to create different data grids and their columns that map tables within the database.
The attached image in supporting material “01-Data-Management-Builder-workflow.png”, is a rough sketch illustrates how this workflow should be at a high level. The objective is to take this sample as a starting point and provide the best UX with the simpler UI possible.
This screen basically have 3 key areas:
This screen will be used by the Information Security Risk & Compliance team members to present data captured from the various sources (automatic (API, Folder), semi-automatic(csv + screen entry) and manually(via this screen)).
The “02-Data-Management-Interface.png” image illustrates how this workflow should be at a high level. The objective is to take this sample as a starting point and provide the best UX with the simpler UI possible.
The interactions stated above should be shown explicitly in separate pages
Considerations for this screen:
The “04-KRI-Commenting-Interface.png” should give you an idea of how this page will work and the expected features.
This screen will be used by Business Information Security Officers (BISOs). The following are the expected features for this interface:
The system shall allow users to save their comments for later editing.
Users with selected roles (e.g. Workplace Security) shall be able to comment on KRIs under this role.
There should be a way to easily see and display the historical comments.
Users will have an option to notify other users of the updates done . The user will have the ability to search and notify a person.
There will be around 85 KRI’s , the user should be able to navigate, search and add comments.
Notification like KRI comment updates will be listed here.
The user will have the option to be redirected to the KRI comment screen on clicking on a notification
Every time an error occurs within the application this creates a log file that is stored in the server. Users can go to this page to see all error logs.
Users can only see their region data errors.
Basically this will work as a listing page where users can see all “log files” generated with the error details. Consider:
Users can preview the error before downloading the file.
Users should be able to download the file by clicking on a link or icon.[The users can download the error file , correct it and upload for re processing]
The following are the possible errors that a user can get:
API: Some data lines might be accepted, some may be rejected or the complete data might be rejected.
While uploading: a file may be rejected for multiple reasons: File is corrupted, file extension is not correct, file is empty, file exceeds the maximum size, CSV file missing columns, any row with incompatible data types. Some lines might be accepted, some may be rejected or the complete data might be rejected.
In online screen [data entry] there will be errors shown on the screen as the user enters the data. [mandatory , data type ]. Data validation errors shall be highlighted to the user immediately via the user interface (e.g. input area highlighted with red border and error message displayed).
The image “06-error-listing.png” contains a sample screen, designers are free to reimagine this.
The shared references screens are very basic and just for understanding the flow. Do not copy. Please come up with a better workflow for this problem.
Keep things consistent. This means all graphics styles should work together
All of the graphics should have a similar feel and general aesthetic appearance
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 .
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)
Desktop: 1920px (width) and 1080px (height).
Submit all JPG/PNG image files based on Challenge submission requirements stated above
Source File
All source files of all graphics created in either Adobe Photoshop, XD, Sketch, or Figma and saved as an editable layer
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
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 based desktop application that will be used to manage data by creating tables, importing CSV files, and keeping a track of BISOs comments.
The objective of the project is to design a modern and intuitive web application.
Approximately 7 Screens.
Round 1
Submit your initial designs for the checkpoint review. Feel free to add any screens which are necessary to explain your concept01 Data Management Builder workflow
02 Data Management Interface
03 Data Management Interface interactions
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 Data Management Builder workflow
02 Data Management Interface
03 Data Management Interface interactions
04 KRI comments Table
05 KRI Add comments
06 The notification listing
07 Errors Listing Page
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.
BACKGROUND INFORMATION
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.
For this challenge you will be working on creating the workflow to manage the data that generate this KRIs
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 that are centrally accessible to stakeholders.
GLOSSARY
- KRI: Key Risk Indicator, are a way to quantify and monitor the biggest risks an organisation is exposed to or how risky a particular venture or activity is.
- APAC: Asian Pacific
- ISRC: Information Security Risk & Compliance
- BISO: Business Information Security Officers
- CRUD: Create, read, update and delete data.
AUDIENCE
Information Security Risk & Compliance (ISRC) team
Information Security Risk & Compliance (ISRC) Manager
Business Information Security Officers (BISOs)
PERSONA
Name: John
- Occupation: Information Security Risk and Compliance team member
- Goals:
- Collect data from various sources
- Create reports
- Send draft reports to BISOs and security leads
- Create reports
- Collect data from various sources
- Frustrations:
- Significant number of man days are dedicated to the monthly reports effort
- Reporting requirements cannot be satisfied easily and quickly
- Some effort is required to convert KRIs into graphics for visualisation (e.g. charts)
- The cycle repeat when more KRI are expected to be added over time
- Wants:
- A simple interface to add data via manual or automatically
- Ability to keep track of BISO comments
- Data visualisation through BI tool integration. (This is not part of this challenge scope).
USER STORY
John is a member of our ISRC team, he needs to collect data from different sources between the 1st and 4th working day of every month. On the 5th working day of the month he needs to send a draft report to BISOs and Security Leads admins in order to get comments and feedback about the KRI generated when entering the data. BISOs have a working day to enter their comments, once this is completed by day 6, John needs to send the completed report to APAC BISO for a final review. This process usually takes 1 to 2 working days. If everything is completed and the requests are met, John finally distributes the report to the stakeholders and other interested parties on Information Security KRIs.
Pain points
John is currently doing all this process manually with spreadsheets. John has a difficult time in collating data , processing it and sharing it with stakeholders
- Significant number of man-days required to collect, consolidate and present data – The current report preparation process consists of several manual activities (e.g. emailing and waiting for responses from data owners, and the processing of responses on Excel).
- Adhoc reporting and visualisation requirements cannot be satisfied easily and quickly – Historical KRI values are retained on archived report files. Delivering on adhoc reporting and visualisation requirements requires much effort to extract the relevant values from the archived reports, as the content within these files cannot be natively analysed by BI and data visualisation tools (e.g. Power BI).
This design is one of the steps to achieve this goal.
DESIGN GOALS & PRINCIPLES
Below are some of the goals:
- Elegant, clean, simple, user-centered look and feel with a modern aesthetics
- Simple way to add the data manually
- Smart and user friendly interface to add and track comments
- Intuitive experience for end customers
- Developer friendly and easy to build design
- Engaging and easy-to-navigate UI
REFERENCES & WIREFRAME:
We are looking for a new visual experience beyond the provided wireframes. These are screens that serve as a rough draft of the overall functionality. DO NOT COPY these layouts, use them as reference only. These will be linked directly within this specs wherever are needed.
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:
Interfaces to collect data manually via screens
Ability to keep track of BISO comments.
Interfaces should collect inputs/uploaded raw data from security team members, and/or reporting systems
Overall considerations:
- “Dragonet” is a code name for this project, so please do not design a logo for this application.
- “Login” or “Sign up” pages are not in the scope. Do not design these.
- Do not add any extra features or functionalities beyond what is asked on this challenge requirements.
ENVISAGED SCREEN FLOWS
The application will have users belonging to multiple regions and roles.
These will constrain the data and the access levels of the users.
This is a development activity hence designers need not worry about showing role level and data level constraints while designing the screens.
Please make sure to understand that you don’t need to design different views for each role. Just focus on the 7 screens requested below.
Please check the “00-user-flow.png” image in the supporting material (in forum) for better understanding.
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 Data Management Builder workflow
This interface will be used by the Security Leads Admins to create different data grids and their columns that map tables within the database.
The attached image in supporting material “01-Data-Management-Builder-workflow.png”, is a rough sketch illustrates how this workflow should be at a high level. The objective is to take this sample as a starting point and provide the best UX with the simpler UI possible.
This screen basically have 3 key areas:
- Security Areas: Users can add new security areas or select one by the list on the left.
- Security Areas Columns: Once the security area is created, users can select the table it maps to, this will bring in the columns [Tables in database are made up of columns , these columns will be shown on the screen] .
- On selecting the table the columns , its data type and column constraints [required , optional] will be available [The data type and required / optional constraints will be applied when user enters data in the Data management Interface]
02 Data Management Interface
This screen will be used by the Information Security Risk & Compliance team members to present data captured from the various sources (automatic (API, Folder), semi-automatic(csv + screen entry) and manually(via this screen)).
The “02-Data-Management-Interface.png” image illustrates how this workflow should be at a high level. The objective is to take this sample as a starting point and provide the best UX with the simpler UI possible.
03 Data Management Interface interactions
The interactions stated above should be shown explicitly in separate pages
Considerations for this screen:
- Users can upload data through CSV files.
- Users can edit the data grid.
- Once all the data have been uploaded or edited, they should be able to submit this
- Users should be able to add new , update , edit , delete or upload data for their respective countries. For example a HK user can only add new , update , edit , delete or upload HK (Hong Kong) data only. Regional ISRC and designated team members will be able to CRUD the data, so the business location restrictions will not apply here. The restrictions are applicable for the BISO comments only
- Data will run into a lot of rows.
- Advanced search on the data grid.
04 KRI comments Table
The “04-KRI-Commenting-Interface.png” should give you an idea of how this page will work and the expected features.
This screen will be used by Business Information Security Officers (BISOs). The following are the expected features for this interface:
- BISOs and their Consultants will be restricted to their business unit. This is a city within the APAC region, eg: Hong Kong, Tokio, Beijing, etc.
- BISOs and their Consultants shall be able to provide text-based comments for each KRI value.
- BISOs and their Consultants (i.e. those holding BISO and BISO Consultant roles) shall be able to comment on KRIs of their territories.
- BISOs and their Consultants shall be able to view all KRI values relevant to the user’s territory/remit in a tabular format.
- Appropriate controls (e.g. text areas and buttons) shall be located next to each KRI value for commenting.
- Risk ratings shall be provided for each KRI value.
- KRI values on a 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 the previous. An upward pointing arrow indicates increased risk, and a downward pointing arrow indicates decreased risk. A square indicates no change.
- “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. Check the “04-1-kri-validation.png” image for a better visual.
05 KRI Add comments
The system shall allow users to save their comments for later editing.
Users with selected roles (e.g. Workplace Security) shall be able to comment on KRIs under this role.
There should be a way to easily see and display the historical comments.
Users will have an option to notify other users of the updates done . The user will have the ability to search and notify a person.
There will be around 85 KRI’s , the user should be able to navigate, search and add comments.
06 The notification listing
Notification like KRI comment updates will be listed here.
The user will have the option to be redirected to the KRI comment screen on clicking on a notification
07 Errors Listing Page
Every time an error occurs within the application this creates a log file that is stored in the server. Users can go to this page to see all error logs.
Users can only see their region data errors.
Basically this will work as a listing page where users can see all “log files” generated with the error details. Consider:
Users can preview the error before downloading the file.
Users should be able to download the file by clicking on a link or icon.[The users can download the error file , correct it and upload for re processing]
The following are the possible errors that a user can get:
API: Some data lines might be accepted, some may be rejected or the complete data might be rejected.
While uploading: a file may be rejected for multiple reasons: File is corrupted, file extension is not correct, file is empty, file exceeds the maximum size, CSV file missing columns, any row with incompatible data types. Some lines might be accepted, some may be rejected or the complete data might be rejected.
In online screen [data entry] there will be errors shown on the screen as the user enters the data. [mandatory , data type ]. Data validation errors shall be highlighted to the user immediately via the user interface (e.g. input area highlighted with red border and error message displayed).
The image “06-error-listing.png” contains a sample screen, designers are free to reimagine this.
IMPORTANT
The shared references screens are very basic and just for understanding the flow. Do not copy. Please come up with a better workflow for this problem.
Keep things consistent. This means all graphics styles should work together
All of the graphics should have a similar feel and general aesthetic appearance
BRANDING GUIDELINES & SUPPORTING MATERIAL (Link to 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: 1920px (width) and 1080px (height).
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 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.