Blue Diamond - Assurance Report App UI Design Challenge

Welcome to "Blue Diamond - Assurance Report App UI Design Challenge". In this challenge, we need your help to create a new set of screens for our web application that will be used to collect data from various third parties and generate automated assurance reports status for Blue Diamond assets in every period of time. 

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!

Round 1

Submit your initial designs for checkpoint feedback
01) Dashboard screen
02) Assets Detail Breakdown Screens
03) Data Collection in Progress Screens
04) Data Collection Verification Screen

• 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
• After the 1st round submission phase ends, you are NOT ALLOWED to updates your marvel project until the 2nd round start
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
01) Dashboard screen
02) Assets Detail Breakdown Screens
03) Data Collection in Progress Screens
04) Data Collection Verification Screen
05) Settings Screen

• 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

CHALLENGE OBJECTIVE

• Focus on creating design for a Web application 
• Create a new set of screens for application that will automated the flow process of Blue Diamond assurance assets gathering and reporting every period of time 
• Make elegant, clean, simple, user-centered look and feel with modern aesthetics design

BACKGROUND OVERVIEW

• The project involves building an application, which can automate the generation of Blue Diamond Assurance Report, by fetching the relevant data from various third party systems like ServiceNow, Splunk, Saviynt, Etc
• Currently, the data is being manually collected and then manipulated using various checks and formulas via excel document
• The assurance report for SL1 and SL2 compliance of Blue Diamonds is generated every quarter manually
• The main objective of this project is to create a web application, which would integrate data collection with these key systems, and would also allow data to be entered and overridden manually for permissible users, where applicable, and finally generate the Assurance Report with relevant data (online dashboard and download of reports) 
• The Blue Diamond report would cater to:
  • People,
  • Devices, and 
  • Applications/Infrastructure services

TARGET AUDIENCE

• Internal User
• Reporting User
• Approver User

PERSONA

• Name: James Brown
• Occupation: Employee in Blue Diamond company
• Goals: Presenting assurance assets report to stakeholder every quarter 
• Frustrations: Labour works to gather and processing data and create manual presentation takes a long time and lot of efforts
• Wants: An application that able to gather data accurately, quick, and able to presenting it in an interesting way with great visual, and make it simple to get feedback from the stakeholders 

USER STORY

• Every quarter, data from various sources will be gathered to present the status of Blue Diamond assets.
• However, the process to generate status of the assets is currently based on manual labour that takes time and not very effective 
• The full data is gathered in Excel documents called "Reporting Workbook Qx-2021" ('x' refer to quarter period for the report) and in every quarter there will be a new Reporting Workbook document (xlsx) created 
• There will be a team consist of several individuals that is responsible for gathering and updating the Reporting Workbook and the draft report needs to be submitted mid-month for a review by James that responsible for preparing the reports for stakeholder
• After James finish his review and the data summary is correct, he will create draft presentation in powerpoint manually and then the initial report will be sent to the relevant stakeholders
• James will capture and incorporate any feedback from stakeholders and publish the final report and do follow up remediation activities...This activity will continue after the report is circulated
• James need a new way to prepare the reports, he needs an application that can provide automation for the whole workflow for the Assets reporting, including:
  • Data collection part
  • Report generation and sharing (web app)

SCREEN REQUIREMENTS

Please refer to "interaction-diagram.png" to get the idea and our expectation for the flow.

01) Dashboard screen

• This screen will be available for all type of users that use the application
• Users will be able to find and generate approved reports from any past quarter via this screen - need to have a search form that are able to help users to find the reports they are looking for. This form needs to be very simple, user should be able to find reports from any quarter in the past that has been approved easily
• Once the search is being initiated, the application need to show data summary informations for all assets combined in this screen
• There are 9 specific types of assets report that needs to be prepared and shown to the stakeholder every quarter, for this challenge, we will show data in the xlsx document under "Q3 - 2021" sheet and from pdf document under page 2, 3, 4, and 5: 
  • CEO Office & Board / Board 
    • Check Board rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 6 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • EXCOM (Available since "Q2 - 2021", previous quarter don't have this data)
    • Check Excom rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 8 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • People & Global Capability
    • Check People & Global Capability rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 10 from the pdf the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Climate
    • Check Climate rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 13 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Corporate & Legal
    • Check Corporate & Legal rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 15 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Development & Jameseting
    • Check Development & Jameseting rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 18 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Finance & Commercial
    • Check Finance & Commercial rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 21 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Operations
    • Check Operations rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 24 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Sustainability
    • Check Sustainability rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 27 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
• Also need some layout to add "Remediation action plan" and "Under Assessment" under page 30 and 31  from the pdf 
• User should be able to drill down/check the data details of each asset reports
• Need to have a feature where user can compare reports data from different quarter side by side (two or multiple quarters to be compared)
• User should be able to download the generated report as PDF

02) Assets Detail Breakdown Screens  

• This screen will be available to all type of users that use this application
• This screen will be used to show the SL1 and SL2 report details from each assets 
• It's up to you as the designer to decide whether you want to split this detailed breakdown screen with the summary report in the dashboard or combine/merge them into one screen for more simple interaction. Each asset can/should have their own detail screen - again, it's up to you if you want to create one screen template for all details view or create different visual to represent the data inside it:
  • CEO Office & Board / Board 
    • Check Board rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 7 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • EXCOM (Available since "Q2 - 2021", previous quarter don’t have this data)
    • Check Excom rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 9 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • People & Global Capability
    • Check People & Global Capability rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 11 and 12 from the pdf the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Climate
    • Check Climate rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 14 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Corporate & Legal
    • Check Corporate & Legal rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 16 and 17 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Development & Jameseting
    • Check Development & Jameseting rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 19 and 20 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Finance & Commercial
    • Check Finance & Commercial rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 22 and 23 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Operations
    • Check Operations rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 25 and 26 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing
  • Sustainability
    • Check Sustainability rows from xlsx for the data summary under "Q3 - 2021" sheet
    • Check page 28 and 29 from the pdf for the existing visual - please create new visual that more engaging, easier to understand and visually appealing

03)  Data Collection in Progress Screens

• Please refer to xlsx document "Control Info" sheet for the 3rd party setting
• This screen will be used by reporting users to see the status of data collection from all 3rd party applications to create a new asset report for the quarter 
• Show how the data collection process is running in this screen, some ideas:
• Needs to be able to check and verify all 3rd party apps that become the sources for the data collection. This is more like a liveness check for the APIs used. Like a green tick mark if the last automated collection was working well or a red warning if there were issues during last collection
• Provide percentage status of data collection completion from all 3rd party app
• If there is any issue with the data collection from 3rd party or if some data is not available from the 3rd party, there should be a feature where user can do intervention and upload the manual data. We need to have some forms for manual collection. That part is not finalized yet. So for now just keep some simple form for manual data collection ( it will be common to see some intervention and adding some manual data collection details since some systems won’t have integration APIs currently - both automated and manual data collection will be run parallel)
• Needs to have a log activity history that show how many iterations that has been done for the data collections (showing how many times the new reports has been rejected by approver and being modified or showing if there is any intervention and manual data collection happened in particular assets, etc)
• Once the data collection is complete, the reporting user will be able to see the preview of the reports and do preliminary checking. Once they feel the data is good for approval, they will be able to push the complete report for verification and approval by approver user
• If the report being rejected by approver user, the reporting user will adjust and make changes to the report, they can restart the automated process from the system or/and overridden manually the report data by adding data either via form fields or by uploading file

04) Data Collection Verification Screen

• This screen will be used by approver user to review and verify the new initial report data for the running quarter that just recently complete the data collection process  
• Along with the initial report data, please show the Date of collection and the source/person who added the data manually (if there is any data collected manually) - this will be important for verification.
• Approver user will be able to check the reports and verifying if the data on the reports is correct and can be published or incorrect and need some adjustment 
• If the data turns out incomplete or incorrect, they can reject the report and provide comment/feedback about which data that needs adjustment and send the report along with their feedback back to the reporting users so the data can be modified
• If the data turns out complete, approver user can approve the reports and it will be release/generated as official data reports for the quarter 

05) Settings Screen

• Please refer to xlsx document "Control Info" sheet for the configuration
• This screen will be used by Reporting user to configure any related information
• Should have an area where Asset reporting users can check and seeing log history of connection status between the app with other 3rd party systems like ServiceNow, Splunk, Saviynt, and others 3rd party systems that connected with the application
• Needs area where the user can configure time schedule for the application on when the app should start the automated data collection process from all 3rd party system (configuration fields should be every quarter with a configuration of date and time started/completed)

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=841069

DEVICE SPECIFICATIONS

• Web application (Desktop): minimum 1366px width with height adjusting accordingly

DESIGN GOALS AND PRINCIPLES

• Follow best practice for Web/Dashboard application design
• Modern, simple, easy to use, and clean design
• Seamless Navigation and enhanced Features
• Reduce the number of interactions required from users as much as possible
• Use color or great visual comparison to highlight a comparison of important information
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information
• 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

• Please see and follow our provided branding guidelines

JUDGEMENT CRITERIA

• Creativity: Conservative - barely new ideas, use what is already proven to work
• Exploration: Flexible - follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals
• Aesthetics: Hi-fidelity design - provide a top-notch finished looking visual design
• Branding: Flexible - follow the provided guidelines and suggest improvements where seem appropriate and inline with the goals

DOCUMENTATION

• Please request for access in the challenge forum!

MARVEL PROTOTYPE

• We need you to upload your screens to MarvelApp
• Please request your MarvelApp prototype in the respective thread in the challenge forum
• You MUST include your Marvelapp URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload)

FINAL DELIVERABLES

Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• 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
• Full Details of the Topcoder Policy can be found in this LINK

Source Files

• All source files of all graphics created in any design tools such as Adobe XD, Sketch, or Figma and saved as an editable layer

FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your files, add or remove screens or combine details to create a final presentation