Challenge Summary
In this challenge, we are looking for your help to come up with design concepts for a “Cloud migration platform”. 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.
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 Feedback01 Migration Service Provider - Landing Page
02 Customer Dashboard
03 Customer Response Collection
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 Updates01 Migration Service Provider - Landing Page
02 Customer Dashboard
03 Customer Response Collection
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.)
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 life cycle management discover to assess to migrate to assurance
Design Considerations:
- Come up with a modern and intuitive design!
- You will need to use the provided branding guidelines.
- 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:
00 General:
- For all the pages, come up with a header that shows the name/photo of the logged in user
- Provide ability to logout
A. Service Provider (Cloud Migration Engineer)
01 Migration Service Provider - Landing Page:
In this new Migration service provider landing page, we will be having links to other features in this application, so the flow will be like > a user lands on this page and select the appropriate Phase they want to do by selecting the button or link and move forward to other screens in this app.
Phases:
Discovery: This Allows user to “Upload Data”
Assessment: This includes three options
- Pre- Assessment: Is initial phase where you collect details and preferences about customer
- Create Assessment: You launch the assessment for the customer and they need to login to answer using Customer Response screen
- Recommendation: This is the detailed analysis based on information shared by the customer
Migration: This includes three options “Rehost, Replatform and Refactor” (These are called R-Lanes and are the forms of application Cloud migration)
Assurance (Security and Testing): These are links for Engineer’s to go to the testing landing page and initiate the test
Report: This is not one of the phases but the user will have access to these reports “Pre-App Report, Consolidated Report, Discovery Report, Move Group, R-Lane, Progress Report, Migration Report, Code Analysis Report, Testing Report, Security Report”
Other features /things to be considered for this landing page:
- Please include an icon for each of the above actions/links
- Do you think any help information/tooltip will be useful for the users?
- What else do you think need to be shown, we are open to your thoughts.
B. Customers
02 Customer Dashboard:
This screen will provide one view that will help the customer to know their landscape and know how migration progress is happening. Below visualizations need to be shown:
We are looking for your help to come up with visualization based on below
Key Metrics:
- LOB (Line of Business) -> Program Name -> Application View
- Multi-Cloud (CSP -> Cloud Service Provider)
- Phase View (Discovery, Assessment, Migration, and Assurance)
- Summary/Detailed View: Please allow the user to view the summary in the initial view and on drill-down show detailed view.
Detailed Metrics:
Discovery:
Summary
- LOB/Data Center/Box Type (Prod/Stag/Dev/Test) View
- Host View (Server IP/OS View as per screenshot)
- Software View (which software are installed e.g Web Server)
- Application View (Which app is installed on the box)
- Host - Process - Service Mapping View -> App Level (Mapping between above 3)
Assessment:
- R-Lane & CSP Report (Rehost, Refactor, Replatform etc and CSP recommendation view)
- Program Name -> Application/LOB View (One program will have multiple apps and an app belongs to a LOB)
- Application Dependency Mapping
- Application Move Group (Grouping of apps based on R-Lane recommendation so planning to migrate these groups should be highlighted)
Other features/things to be considered for this landing page:
- Provide option to upload files, the user should be able to upload a Single (or) MultiFile.
- Show us how the navigation will look like / so we have way for the user to access the Customer response collection page (Make sure we can more navigation items in the future).
03 Customer Response Collection:
This is the page for the customer and will be capturing the response to a predefined set of questions with possible responses. All questions will be Multiple Choice Questions (MCQ).
Tabs:
We will have 2 main tabs Current State and Desired State, under current and desired state we will have more tabs..see below
- Current State: Generic, CI, CF, CR, etc
- Desired State: Tab 1, tab 2, tab 3, tab 4, etc
Table:
Under each of the category selected above, there are be many questions with pagination and each row will have these
- Question ID
- Question Text: Use dummy text for each question
- Response (Multiple Choice questions, will be put up as radio buttons and the user will choose one) - Eg: For a question, they will have radio buttons as “Web Application, Console App, others” and the user will choose one.
- Process followed/Tools used: This will be a drop-down.
- Type (For all rows have value as “Tool”)
- Remark: This will be a textbox to allow the user to enter remarks for each of the question/row.
Branding Guidelines:
We need to follow the provided Wipro branding guidelines:
https://drive.google.com/open?id=1CODcyyDdW3XvcxAC_geqB0jvYaNLPoo0
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 Marvel App.
- 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.
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.