Challenge Overview
Welcome to WAME Studio Application UI Prototype Challenge!
The main task of this challenge is to build the “Workload Assessment and Migration Engine (WAME) “ Studio Application UI Prototype. The result of this challenge would become a part of the customer’s existing running application. Hence, it is very essential to use the given structure /skeleton and styles wherever applicable.
The customer of this project already have an application and through this challenge, they are looking to update one of the pages (Value Stream) with a new section.
We are providing you with the Structure/skeleton for the value stream page - so you can just focus only on the section that is being newly added and not required to focus on the navigation, header, footer, etc
Rolling Checkpoint:
Note: As the result of this challenge would become a part of the customer’s existing running application. Hence, it is very essential to use the given structure /skeleton and styles wherever applicable. So, we are including a ROLLING CHECKPOINT in this UI Prototype Challenge during which client will be reviewing the code structure and will be giving you feedback if you are going in the right direction (This is very crucial to win this challenge). NOTE: For rolling checkpoint, we are not expecting the prototype to be complete.
All Submissions received before "Rolling Checkpoint Deadline: 07/15/2018 at 9:00 PM EDT" will be eligible for rolling checkpoint feedback and Top 5 eligible submissions will win $50
Note: Important Rolling Checkpoint Details
- Along with your submission, please create a detailed “how to” documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
- Client will be available to review and share the Rolling Checkpoint Feedback!
- We will answer questions and provide Rolling Feedback as fast as possible.
- You must watch the Forum for your feedback!
Let’s discuss any questions you have on challenge forum!
~
Important:
- For this prototype submission, we need you to build using Angular 4 (single page architecture) and not a responsive.
- Create README.md file that explains your UI Prototype submission structure and commands
- Create a detailed “how to” documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
- Your prototype need to support fluid width as all pages will use the full width of the screen
UI Prototype Specific Requirements:
- This project is all about updating an existing application, so only a section within the “Value Stream” page is being updated, we are supplying the skeleton of the overall value stream page (angular) and you will be just updating “Workload Assessment and Migration Engine(WAME)” section.
- Also in the “Customer Report” section, you will just need to change the status of “Project Creation, Davie, and Decision Engine” as per the storyboards/as indicated in the requirements below.
- Note that apart from matching your screens with the storyboards, you will also make API calls. There are actions on the pages that will require you to make API calls and in some cases, display the responses from these API calls. We have provided you with a detailed API documentation.
- In the API document, you can see the last column as “UI Validations Rules”, so we will need you to make sure to include the validation rules for each of the fields as mentioned in the excel file.
- The appropriate API needs to be called as per the event/screen/ on click event in the API document. The response of the APIs are mocked for the development. No need to use the hard-coded response for this challenge.
- We are providing a style guide that should help with the button hover styles, fonts, etc (Also in the storyboards you can hover styles, etc)
Required Screens:
Please also refer to the marvelapp for flow/interaction..
01 Value Stream:
Reference: 01_01_Value_Stream_WAME_default.png
There are 6 categories in this section: Configuration, Davie, Decision engine, Check Status, Administration and Reporting
Configuration:
- Project Creation will show 14_01_Project_Creation_default.png
Davie:
- Pre Process Input will show 08_01_Pre-process_Input_Data_default.png
- Upload Template will show 02_01_Upload_from_Template_default.png
- Generate Filled Template will show 04_01_Generate_Filled_Template_default.png
- Delete Key Data will show 05_01_Delete_Key_Data_default.png
- IP Address Administration will show 07_01_IP_Address_Administration_default.png
- Export Data will show 15_01_Export_Data_default.png
- Decision Engine
- Check Status will show 16_01_Check_Status.png
- Administration will be dead link
- Reporting will be dead link
02 Project Creation:
Project Creation, helps the user to create a WAME project in Studio. This is the first step of the process. All other substeps / micro–processes should remain disabled until a project is created successfully.
Reference: 14_01_Project_Creation_default.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- User enters all the details as shown in 14_02_Project_Creation_filled_DS.png
- After all the details are entered, they click on the Submit button to see a confirmation screen as shown in 14_04_Project_Creation_success.png (button hover style is shown in 14_05_Project_Creation_success_moC.png)
- NOTE: Based on the status of the project creation, we show the status in the Value Stream Status Summary section under Project Creation as “Success, Failed or In-progress” (please refer 14_06_Project_Creation_In_Progress.png, 14_07_Project_Creation_Completed.png, 14_08_Project_Creation_Failed.png)
03 Pre Process Input Data:
This step be enabled only after project creation step is executed.
Reference: 08_01_Pre-process_Input_Data_default.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- There are 5 links arrows within this section, four (Export Storage, Pre-process storage, Export IP Address, Pre-process IP address) of the links are disabled and gets enabled only when user choose a checkbox (either FMO or In scope only) under them.
- - - Export Storage: User selects “FMO and/or In-scope only” (08_02_Pre-process_Input_Data_1st_selected.png), this enables the right arrow icon/link, clicking on the link will show a modal window as shown in 08_06_Pre-process_Input_Data_Export_Storage_Success.png
- - - Pre-process storage: User selects “FMO” (08_03_Pre-process_Input_Data_2nd_selected.png), this enables the right arrow icon/link, clicking on the link will show a modal window as shown in 12_01_Pre-process_Storage_completed.png
- - - Export IP Address: User selects “FMO and/or In-scope only” (08_04_Pre-process_Input_Data_3rd_selected.png), this enables the right arrow icon/link, clicking on the link will show a modal window as shown in 08_08_Pre-process_Input_Data_Export_IP_Success.png
- - - Pre-process IP address: User selects “FMO” (08_05_Pre-process_Input_Data_4th_selected.png), this enables the right arrow icon/link, clicking on the link will show a modal window as shown in 13_01_Pre-process_IP_Address_completed.png
- - - “Pre-Process F5 Load balancer text file” link is enabled by default and takes the user to 09_01_Load_Balancer_default.png
03 1 Load Balancer:
- By default this will show view as 09_01_Load_Balancer_default.png
- Back icon should take back user to Pre-Process Input Data screen ( 08_01_Pre-process_Input_Data_default.png)
- NOTE: By default - all “actions” mentioned under “2. Select Function” is disabled except “Clear Tables”
- User will enter all the required details and once the file has been selected (09_02_Load_Balancer_filled.png), user will be able to perform any of the actions mentioned under ”2. Select Functions”
- Clicking on “Upload Text File” will show a modal window that allows users to upload multiple files as shown in 11_01_LB_File_Upload_default.png
- Clicking on “Parse Text File” shows success modal window (09_03_Load_Balancer_Success_parsed.png)
- Clicking on “Create Text File” shows success modal window (09_05_Load_Balancer_Success_created.png)
- Clicking on “Clear Tables” shows success modal window (09_07_Load_Balancer_Success_cleared.png)
03 2 Load Balancer Upload:
Reference: 11_01_LB_File_Upload_default.png
- This modal windows allows users to upload multiple files at once either by choosing files in the choose file dialog box or just allow them to drag & drop the files to this window
- Once the files are chosen we need to show file names that were selected
- Cancel button: This will just hide the modal window
- Submit button: This will show the success modal window as shown in 11_07_LB_File_Upload_successful.png
04 Upload from Template:
Reads data from uploaded templates and populates in staging and production reliability tables. This step be enabled only after Publish & Link step is executed.
Reference: 02_01_Upload_from_Template_default.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- ‘Upload Templates’ button: Clicking on this will take user to 03_01_Upload_Template_default.png
- Any other links other than “Upload Template” link (please see marvel app for flow): Will show a success message as shown in 02_02_Upload_from_Template_default_success.png
- Close button in success modal will hide the modal window
04 1 Upload Template:
Reference: 03_01_Upload_Template_default.png
- Back icon in this section top left will take user back to 02_01_Upload_from_Template_default.png
- By default, “submit” button is disabled.
- ‘Upload New Template’ button: Clicking on this will open file upload dialog box that allows them to choose the file to upload, once the file is chosen - we show a “Clear Uploads” button and also the Submit button is active.
- User will also choose the “Select Reliability” Rating as shown in 03_03_Upload_Template_uploaded.png
- ‘Clear Uploads’ button: Clicking on will show clear the value selected in “Select Reliability Rating” combobox and hides the “Clear Uploads” button, view will be similar to 03_01_Upload_Template_default.png
- ‘Submit’ button: Once the files are chosen, and clicking on the “Submit” button will show success message as shown in 03_06_Upload_Template_success.png
- Close button in success pop-up: Clicking on Close button will the user back to Upload from template screen (02_01_Upload_from_Template_default.png)
05 Generate Filled Template:
Generates a template filled with existing data to be passed to SME for verification and possible change. This step be enabled only after Upload from Template step is executed.
Reference: 04_01_Generate_Filled_Template_default.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- User will see a list of table names and template names with search at the top and a pagination at the bottom..and will allow user to choose any of the templates as shown in04_02_Generate_Filled_Template_selected.png
- Typing anything in the search will dynamically return values i.e as the user starts typing results are filtered.
- Once selections are made, “Export Selected From” button is enabled
- “Export Selected From” button: Clicking on it shows a modal window as shown in 04_04_Generate_Filled_Template_success.png (Clicking on “Close” in modal hides it)
06 Delete Key Data:
Allows the user to correct incorrect key data or delete unwanted keys. This step be enabled only after Upload from Template step is executed.
Reference: 05_01_Delete_Key_Data_default.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- By default, Export Key Data and Delete Key Data buttons are disabled
- This shows list of table name with search at the top and a pagination at the bottom..and will allow user to choose any of the templates as shown in 05_02_Delete_Key_Data_selected.png Typing anything in the search will dynamically return values i.e as the user starts typing results are filtered.
- ‘Export Key Data’ button: Clicking on this will show 05_04_Delete_Key_Data_exportOK.png
- ‘Delete Key Data’ button: Clicking on this will show a modal window as shown in 06_01_Delete_Key_Data_Upload_default.png
06 1 Delete Key Upload
Reference: 06_01_Delete_Key_Data_Upload_default.png
- This modal window allows users to upload multiple files at once either by choosing files in the choose file dialog box or just allow them to drag & drop the files to this window
- Once the files are chosen we need to show file names that were selected
- Cancel button: This will just hide the modal window
- Submit button: This will show the success modal window as shown in 06_07_Delete_Key_Data_Upload_deleteOK.png
07 IP Address Administration:
Used to update/ delete IP Addresses after data has been uploaded. This step is enabled only after Upload from Template step is executed.
Reference: 07_01_IP_Address_Administration_default.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- By default, “Search IP Address” is disabled, once user enters values in “Host Name and domain name” (07_02_IP_Address_Administration_IP_entered.png) and then “Search IP Address” is enabled
- ‘Search IP Address; button: Clicking on this shows few fields in “Modify IP” and a table under “Delete IP” as shown in 07_04_IP_Address_Administration_search_done.png, any changes made in these fields will enable the “Modify IP Address” button as shown in 07_05_IP_Address_Administration_modify.png
- Modify IP Address button: Clicking this will show a success message as shown in 07_07_IP_Address_Administration_modify_success.png (Clicking on close within the modal window will hide it)
- Delete IP: User will be able to select an value (checkbox) in the table (07_10_IP_Address_Administration_delete.png) and click on “Delete IP”, clicking on this button shows a modal window as shown in 07_12_IP_Address_Administration_delete_successful.png
- NOTE: The value that was selected in the table gets removed, please 07_14_IP_Address_Administration_deleted.png
08 Export Data:
Used to extract the transactional data of the project into Ms Access database. This step be enabled only after Upload from Template step is executed.
Reference: 15_01_Export_Data_default.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- ‘Download Database’ button: Clicking on this will show a modal window as shown in 15_03_Export_Data_success.png, clicking on “Close” in modal window will take the user back to Value stream page (01_01_Value_Stream_WAME_default.png).
09 Check Status:
Displays the status of each WAME process i.e.
a. Project Creation
b. DAVIE
c. Decision Engine
This section should remain enabled all the time. Possible status for above-mentioned processes are Not Initiated, In-Progress, Completed, Failed
Reference: 16_01_Check_Status.png
- Back icon in this section top left will take user back to default value stream page 01_01_Value_Stream_WAME_default.png
- This allows the user to check the status of “Project Creation, Davie and Decision Engine”
- Clicking on “Detailed Status” button in any will show a modal window as shown in 16_03_Check_Status_details.png
~
TECHNOLOGIES
- HTML5
- Angular 4
- JavaScript
- CSS
- Single page architecture.
- Non-responsive
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient UI Prototype that works in all the requested browsers.
- All elements should be consistent pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Additional technical requirements would be available in the forum.
Browsers Requirements
- IE 11
- Firefox, Chrome, Safari (latest version)
Final Submission Guidelines
Final Submission Guidelines:- UI Prototype source code as a zip along with
- Create README.md file that explains your UI Prototype submission structure and commands
- Create a detailed “how to” documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md