Challenge Summary
Welcome to "Customer Maintenance Web App Design Concepts Challenge".
We are looking for your help to come up with design concepts for a web application/platform that will provide risk processing capabilities to multiple customers whose data will be ingested and processed for analytics data to be made available in a dashboard.
In this initial challenge, we are looking to design an interface that is about registering and maintaining customer data related to the platform operations. This application will be used by the Platform Operations team to manage customers.
The customer of this challenge is looking for the help of topcoder design community to provide the best user experience.
We are really excited to see your designs for this challenge.
See you in the forums!
01 Customer Details
02 Users
03 Threat Report Sources
04 Master Controls
- 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 Customer Details
02 Users
03 Threat Report Sources
04 Master Controls
- 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)
This website is a cybersecurity risk analytics platform that will be operated in a SaaS (Software as a Service) model.
This platform will provide risk processing capabilities to multiple customers whose data will be ingested and processed for analytics data to be made available in a dashboard. This dashboard (not in scope for this challenge) will provide risk performance insights that will enable customers to take corrective actions by placing counter-measures in mitigating cybersecurity risks.
Design Considerations
- We are looking for simple, easy-to-use, intuitive, modern design.
- We are providing wireframes to help you get started.
- Have your designs of size: 1366px (width) and height as required
Branding Guidelines:
- Branding is Open!
- Design needs to professional and corporate look considering “analytics” theme
- This will be a white label design, i.e. your design should allow us to change the colors easily as per the branding of the client.
Required Designs:
We need below screens to be designed
00 Header, Logo, Navigation:
- Include a header and placeholder for the logo.
- The top header of the web page to have a navigation menu bar including a link for Customer Maintenance.
- Include a footer, this need to have the copyright information and also the browser compatibility information.
The assumption, the user views a list of customers (this page is not in scope for this challenge)...they select one of the customers and sees 4 tabs (it can be tabs or we are open to your thoughts on how they should be put up), these are tabs that will be shown:
- Customer details
- Users
- Threat Report Sources and
- Master Controls”
We have provided information for each of the tabs which need to be designed for this challenge.
01 Customer Details:
- In this page, the user will enter basic details about the customer.
- Below are the details that need to be entered
- - Customer Organization Name: This will be a textbox
- - Organization Logo (option): provide a way for the user to upload the logo
- - Industry (IT/Retail/banking/Finance/Others) - This will be a drop-down
- - Status (Trial/Active/On-hold/In-Active) - This will be a drop-down
Configuration Management Source Connection:
- - Source Type (API/Webservice/Cloud DB URL ) - This will be a drop-down
- - CMDB Source URL : This will be a textbox
- - User ID: This will be a textbox
- - Password: This will be a textbox
02 Users:
- In this page, Operation’s Team will be able to add a list of users under the company.
- For each of the user, this information will be included: “User, email ID, Password, Status (Trial, Active, Revoked)
- We would like you to think about how easily a user can be added
- If the status of a user needs to be changed, how can it be done?
- Operations team will be able to add or remove users from this page
03 Threat Report Sources:
- There are 3 sections in this page and each section will be shown only if the user had selected it
- Show three section names “Intsights, Cycognito, Qualys”
- Based on what is selected above, corresponding details will be shown
Intsights:
Below details will need to be entered by the user:
- API Url - This will be a textbox
- Organization Key - This will be a textbox
- User ID - This will be a textbox
- Password - This will be a textbox
- Frequency (One Time / Weekly / Monthly / Quarterly / Yearly) - This will be drop-down.
Cycognito:
Below details will need to be entered by the user:
- Just provide a way for the user to upload a file
- Think on how to show the progress of a file upload.
- If there is an error with the upload, think on how to show them.
Qualys:
Below details will need to be entered by the user:
- API Url - This will be a textbox
- Organization Key - This will be a textbox
- User ID - This will be a textbox
- Password - This will be a textbox
- Frequency (One Time / Weekly / Monthly / Quarterly / Yearly) - This will be drop-down.
04 Master Controls:
- There are three master tables that need to be included in this page.
- The Values for each of the elements should be easy for the user to update
- The values need to be accepted as input in textboxes.
Counter Measure:
Column 1 (Counter Measure)
- No Info (Default)
- Not Planned
- Planned
- Initiated
- Implemented
Column 2 (% Risk Weightage)
Below values will be editable, think on how to allow the user to edit these values, Value range will be from 0 to 100
- 100
- 100
- 80
- 80
- 1
Exploitation Complexity:
Column 1 (Complexity)
- Complex
- Medium
- Intermediate
- Easy
Column 2 (Rating):
Below values will be editable, think on how to allow the user to edit these values, Value range will be from 1 to 10
- 7
- 8
- 9
- 10
Dollar Impact Sales
Column 1 (Impact)
- Low
- Medium
- High
- Critical
Column 2 ($ Value)
Provide a textbox for the below values, so it easily editable
- $100,000
- $400,000
- $700,000
- $900,000
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 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
Customer IT Team/Operations 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
- How well you interpret the example screens (business relevance) and show us new ideas and concepts.
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.
We are looking for your help to come up with design concepts for a web application/platform that will provide risk processing capabilities to multiple customers whose data will be ingested and processed for analytics data to be made available in a dashboard.
In this initial challenge, we are looking to design an interface that is about registering and maintaining customer data related to the platform operations. This application will be used by the Platform Operations team to manage customers.
The customer of this challenge is looking for the help of topcoder design community to provide the best user experience.
We are really excited to see your designs for this challenge.
See you in the forums!
Round 1
Submit your initial designs for a checkpoint feedback01 Customer Details
02 Users
03 Threat Report Sources
04 Master Controls
- 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 Customer Details
02 Users
03 Threat Report Sources
04 Master Controls
- 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)
This website is a cybersecurity risk analytics platform that will be operated in a SaaS (Software as a Service) model.
This platform will provide risk processing capabilities to multiple customers whose data will be ingested and processed for analytics data to be made available in a dashboard. This dashboard (not in scope for this challenge) will provide risk performance insights that will enable customers to take corrective actions by placing counter-measures in mitigating cybersecurity risks.
Design Considerations
- We are looking for simple, easy-to-use, intuitive, modern design.
- We are providing wireframes to help you get started.
- Have your designs of size: 1366px (width) and height as required
Branding Guidelines:
- Branding is Open!
- Design needs to professional and corporate look considering “analytics” theme
- This will be a white label design, i.e. your design should allow us to change the colors easily as per the branding of the client.
Required Designs:
We need below screens to be designed
00 Header, Logo, Navigation:
- Include a header and placeholder for the logo.
- The top header of the web page to have a navigation menu bar including a link for Customer Maintenance.
- Include a footer, this need to have the copyright information and also the browser compatibility information.
The assumption, the user views a list of customers (this page is not in scope for this challenge)...they select one of the customers and sees 4 tabs (it can be tabs or we are open to your thoughts on how they should be put up), these are tabs that will be shown:
- Customer details
- Users
- Threat Report Sources and
- Master Controls”
We have provided information for each of the tabs which need to be designed for this challenge.
01 Customer Details:
- In this page, the user will enter basic details about the customer.
- Below are the details that need to be entered
- - Customer Organization Name: This will be a textbox
- - Organization Logo (option): provide a way for the user to upload the logo
- - Industry (IT/Retail/banking/Finance/Others) - This will be a drop-down
- - Status (Trial/Active/On-hold/In-Active) - This will be a drop-down
Configuration Management Source Connection:
- - Source Type (API/Webservice/Cloud DB URL ) - This will be a drop-down
- - CMDB Source URL : This will be a textbox
- - User ID: This will be a textbox
- - Password: This will be a textbox
02 Users:
- In this page, Operation’s Team will be able to add a list of users under the company.
- For each of the user, this information will be included: “User, email ID, Password, Status (Trial, Active, Revoked)
- We would like you to think about how easily a user can be added
- If the status of a user needs to be changed, how can it be done?
- Operations team will be able to add or remove users from this page
03 Threat Report Sources:
- There are 3 sections in this page and each section will be shown only if the user had selected it
- Show three section names “Intsights, Cycognito, Qualys”
- Based on what is selected above, corresponding details will be shown
Intsights:
Below details will need to be entered by the user:
- API Url - This will be a textbox
- Organization Key - This will be a textbox
- User ID - This will be a textbox
- Password - This will be a textbox
- Frequency (One Time / Weekly / Monthly / Quarterly / Yearly) - This will be drop-down.
Cycognito:
Below details will need to be entered by the user:
- Just provide a way for the user to upload a file
- Think on how to show the progress of a file upload.
- If there is an error with the upload, think on how to show them.
Qualys:
Below details will need to be entered by the user:
- API Url - This will be a textbox
- Organization Key - This will be a textbox
- User ID - This will be a textbox
- Password - This will be a textbox
- Frequency (One Time / Weekly / Monthly / Quarterly / Yearly) - This will be drop-down.
04 Master Controls:
- There are three master tables that need to be included in this page.
- The Values for each of the elements should be easy for the user to update
- The values need to be accepted as input in textboxes.
Counter Measure:
Column 1 (Counter Measure)
- No Info (Default)
- Not Planned
- Planned
- Initiated
- Implemented
Column 2 (% Risk Weightage)
Below values will be editable, think on how to allow the user to edit these values, Value range will be from 0 to 100
- 100
- 100
- 80
- 80
- 1
Exploitation Complexity:
Column 1 (Complexity)
- Complex
- Medium
- Intermediate
- Easy
Column 2 (Rating):
Below values will be editable, think on how to allow the user to edit these values, Value range will be from 1 to 10
- 7
- 8
- 9
- 10
Dollar Impact Sales
Column 1 (Impact)
- Low
- Medium
- High
- Critical
Column 2 ($ Value)
Provide a textbox for the below values, so it easily editable
- $100,000
- $400,000
- $700,000
- $900,000
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 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
Customer IT Team/Operations 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
- How well you interpret the example screens (business relevance) and show us new ideas and concepts.
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.