Cloud Migration - Web Application Design Challenge - Part 2

Welcome to the Cloud Migration Platform - Web Application Design Challenge - Part 2!

We recently ran a design concepts challenge to come up with designs for a “Cloud migration platform”. In this challenge, we are looking for the topcoder designers to take the designs from the previous challenge and continue creating remaining screens for the application by embracing the design aesthetics and make sure designs you create are in-line with existing designs.

This should be a Simple and FUN challenge. Take a look and let's discuss in the forums any questions you may have!
We are very excited to see your designs for this challenge!

Round 1

Submit your initial design for a Checkpoint Feedback
01 Assurance Execution and Report
01 1 Assurance Execution
01 2 Reports

02 Migration Service Provider: Migration - Re-Platform
02 1 Re-platform Landing page
02 2 Blueprint Detail Page

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 the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01 Assurance Execution and Report
01 1 Assurance Execution
01 2 Reports

02 Migration Service Provider: Migration - Re-Platform
02 1 Re-platform Landing page
02 2 Blueprint Detail Page
02 3 Create Blueprint Page
02 4 Configure Server Page
02 5 Add Server Page
02 6 View Blueprint

As part of your final submission, you must upload your submission to MarvelApp so we can
provide direct feedback on your designs.
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Background Overview:
This application will be used by Customer, Cloud migration engineer and we are looking for your help to come up with designs that provide the best user experience.

Cloud migration platform will act as the one-stop solution to migrate applications from on-premise to public cloud. Cloud migration provides end-to-end migration lifecycle management discover to assess to migrate to assurance

Design Considerations:
- We are providing design from the previous challenge which needs to be used as the base for this challenge
- Your design needs to be in line with the existing designs
- Make sure you are following the colors and design aesthetics from 
- Come up with a design for these screen sizes:
- - - Desktop: 1366px as width and height as required.

Required Screens:
We wanted to give you an idea on the screens and functionalities:

A. Migration Service Provider
Below screens will be initiated from A7_Migration-Engineer-V2.png��� (existing design)

01 Assurance Execution and Report:
01 1 Assurance Execution
Landing Page - Test Suite:
(We don't have a wireframe screenshot for assurance execution)
To perform assurance testing, the user will select an Application and then will enter the detail based on his/her selection on the below:
- Deployment
- Functional
- Performance
- Operational Readiness
- Security
- Reports

Test Execution Page: Detailed Test Case Execution & Parameters:
Deployment:
- Host Name / IP Address (textbox)
- User Name (textbox)
- Password (textbox)
- pem file (file chooser - option to browse files)

Functional:
- Functional Tools List (drop-down)
- Applications List (drop-down)

Performance:
- Performance Tools List (drop-down)
- Applications List (allow multiple applications to be selected from the list)

Performance Parameters:
- No of Threads (textbox)
- No of Users (textbox)

Operational Readiness
Below there will be either checkbox or something similar
- Operational Readiness for AWS
- Operational Readiness for Azure
- Operational Readiness for GCP

Security:
- Security Tools List (drop-down)
- Applications List (drop-down)
- OS Scanning
- Code Scanning
- Network Ports Scanning
- Data Security
- Data Compliance

01 2 Reports
Reference: 01 1 Assurance Summary Report.png
This screen will provide one view of the assurance progress and result for Engineer. This detail would provide an overall summary and detail view of the assurance progress. We are looking for your help to come up with visualization based on below:

Key Metrics:
Total number of Test Scenario with # passes and failed for:
Deployment Testing
Functional Testing
Performance Testing
Operational Readiness Testing
Security Testing

Detailed Metrics:
Deployment Testing:
Reference: 01 2 Deployment Testing Report.png
- The user will choose application name, testing type and Create date
- On choosing the above attributes and then clicking on “View Report” will show “Host Name, Total Memory,  Computer Architecture, CPU Status, S3 Location”
- Follow the pagination as shown in the existing designs

Functional Testing:
Reference: 01 3 Functional Test Report.png
- The user will choose application name, testing type and Create date
- On choosing the above attributes and then clicking on “View Report” will show “Total number of test cases, Test Cases Pass, Test Cases Skip, Test Cases Fail, S3 Location”
- Follow the pagination as shown in the existing designs

Performance Testing:
Reference: 01 4 Performance test Report.png
- The user will choose application name, testing type and Create date
- On choosing the above attributes and then clicking on “View Report” will show “Page, Response, Time taken, Number of Users, Status, Failure Message, DateTime, S3 Location”
- Follow the pagination as shown in the existing designs

Operational Readiness Testing
(We will be providing reference screenshot for this on Monday 11/27)

Security Testing:
Reference: 01 5 Security Report.docx
- The detailed report should be shown in tabular format or another view is also welcomed.
- This shows the security report either by Vulnerability Region or Vulnerability Application
- Show a Visualization that shows how the vulnerability is distributed by status (Critical, Very High, High, Medium, Low) 
- Clicking on the any of the statuses in the visualization will reveal more which shows the machines (that will be hyperlinked), and a table with the following data “QID, Title, Thread, Impact, Solution”.

02 Migration Service Provider: Migration - Re-Platform:
Reference: 02 1 Re-platform Landing page.png
- When the user clicks on “Re-platform” in A6_Migration-Engineer-V2.png in existing designs, we see this landing page (03 1 Re-platform Landing page.png in Wireframes) for the engineers to perform Re-Platform Migration.

Re-Platform Flow:
We would like below pages in the re-platform flow to be put up as a single page i.e. we can showcase it as progress across various steps.

02 1 Re-platform Landing page:
Reference: 02 1 Re-platform Landing page.png
- An engineer can select the cloud provider and then choose the type of migration like Windows Server 2003/2008, SAP Migration, AIX to Linux, Websphere Application Server Migration, SQL to No SQL, Migrate to Open Source DB’s, Please make sure, your designs allow this page to grow, as a tool’s capability is developed with time there is a possibility that more and more migration type would get added.

02  2 Blueprint Detail Page:
Reference: 02 2 Blueprint detailing page.png
Assuming user had chosen “SAP” in the migration type, we show these sections and links as shown in 03 2 Blueprint detailing page.png

02 3 Create Blueprint Page:
Reference: 02 3 Create BluePrint Page.png
Assuming the user has chosen “Create SAP Instance Blueprint”, we show these fields:
- Type of SAP System (drop-down)
- Type of SAP Product (drop-down)
- Type of SAP Environment (drop-down)
- Project Name (drop-down)
- Blueprint Name (Text area)
- Resource Group (drop-down)

02 4 Configure Server Page:
Reference: 02 4 Configure Server page.png
- Once the user had created the blueprint, we take the user to the “Configure Server Page” where a user will be able to view the list of servers that were created.
- For the list, we need to show these columns “Type of Server, Created Date, Modified Date, Action”
- Provide a way for the user to “Add a new server, Copy blueprint, Preview & Launch, Delete Blueprint”
- Also, we show the project name, blueprint name under which this is being created

02 5 Add Server Page:
Reference: 02 5 Add Server page.png
- From the configure server screen, a user will be able to select “Add Server” and see the “Add Server” screen (03 5 Add Server page.png). In this screen, the user will enter these

Details:
- Type of Server (Application Server, ABAP Central Server, Database Server”) - You can have it as a drop-down or anything else you think would improve the user experience.
- HostName (textbox)
- Admin Username (textbox)
- Admin Password (textbox)
- Operating System (drop-down)
- VM Size (drop-down)
- SAP Application Input Type (drop-down)
- System ID (textbox)
- System number (drop-down)
- Timezone (drop-down)

02 6 View Blueprint:
Reference: 02 6 BluePrint View page.png
- From the 03 2 Blueprint detailing page.png, the user will click on “View All SAP Instance Blueprint” and then they land on this page: 03 6 BluePrint View page.png
- Blueprint is a technical term used in the Cloud world. 
- Here we need to show a list of blueprints based on the selected project
- These are columns required: 
- - Blueprint Name 
- - Created On
- - Latest Launch on
- - Status
- - Action: We need these actions “View, Launch and, delete”

Branding Guidelines:
- We need to follow the provided Wipro branding guidelines

Stock Artwork & Icons
-  Stock photo and icons are allowed in this challenge. Remember to read our policy about the allowed site and declare them accordingly: https://help.topcoder.com/hc/en-us/sections/203967808-Design-Copyright-Font-and-Icon-Policies

~
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 and other pages

MarvelApp Prototype
- We need you to upload your screens to Marvelapp.
- Please send your Marvel app request to csystic@gmail.com
- 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 Users:
- Customer, Cloud migration engineer

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 and saved as a layered PSD file, or Adobe Illustrator as a layered AI file, Sketch or Adobe XD!

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.