[72 Hours] Zero Touch Panner - Angular Prototype

Note - This challenge has shorter phases - please carefully see the submission, review, appeals, FF timelines

Challenge Summary:
Welcome to Zero Touch Planner Angular UI Prototype Challenge
This app will be used by Clients, Advisors and Administrators. Advisors will be able to generate unique login codes for potential respondents. Administrators will be able to manage the survey functionality (i.e edit questions and responses).

• Desktop experience for the advisor and administrator screens.
• ���Mobile experience for client screens.

  This simple challenge is focussed on creating a few desktop and few mobile screens based on the provided design assets. Have any questions, let’s discuss in forums!

Application Flow:

The customer uses the mobile screens to fill the survey. When customer completes the questionnaire and assessment, result emails will be sent to advisors (first 2 screens of desktop design - these are the email templates).

Important Guidelines:
- Use SCSS/SASS for CSS Preprocessor.
- Create README.md file that explains your UI Prototype submission structure and commands.
- Create clear documentation to set-up your submission locally and on Herokuapp.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md

Screens to be prototyped:

1. The following desktop screens are in scope

General Requirements

• Breadcrumb must be clickable
• Clicking DXC icon or label should navigate user to 08_advisor_landing

06_email_qustionnare

• This is an email template

• When user clicks on https://cl.ly/0X3t3D3U1j2h - they are redirected to 08_advisor_landing page

• ‘View this email in your browser’ is a dead link

• ‘Zero_Touch_Questionnare.csv’ is a dead link 

07_email_assessment

• This is an email template

• When user clicks on https://cl.ly/012q1H0O2V0Q - they are redirected to 08_advisor_landing page

• ‘View this email in your browser’ is a dead link

• Both csv files shown as attachments are dead links

 

08_advisor_landing_page

• Clicking ‘Register User’ navigates user to 09_advisor_registration

• Clicking ‘View Zero Touch Questionnaire’ navigates user to 11_admin_questionnnare

• ‘View My Profile’ is a dead link

 

09_advisor_registration

• Validate mandatory fields for non-null

• Validate email id for format correctness

• No need to validate phone number

• When Customer role is selected, do not show Password field whereas when Advisor is selected, display Password field. User should be able to enter password for the user

• Clicking submit takes user to 10_advisor_registration_completed

 

10_advisor_registration_completed

• Show values for all fields based on the user’s provided input in 09_advisor_registration

• When Customer role is selected, do not show Password field whereas when Advisor is selected, display Password field. User should be able to enter password for the user

• Clicking Re-generate should change the number with a random 9-digit number

• Clicking Register new user should take user to 09_advisor_registration

 

11_admin_questionnare

• Pagination is not required

• Clicking edit leads to 12_admin_edit_question

 

12_admin_edit_question

• Question should be non-null

• In case of ‘Single Value’, show a single textbox ‘value’ and validate as a positive number

• In case of ‘Range’, show min value and max value as in storyboard and validate both as positive numbers. Also validate min value <= max value

• In case of ‘Ratio’, show a single textbox and validate as a positive number

• Answer Preview - slider should be draggable. Value must change based on slider drag operation.

 

12_2_admin_edit_question

• Shows the range case

 

12_3_admin_edit_question

• Shows the ratio case

2. The following mobile screens are in scope

 

01_1_client_login

• Validate email format

• Show password as masked

• If email format is not valid, show an error with red text ‘Please specify a valid email’

• If password is not correct, show an error with red text ‘Incorrect password’

• If email and password are not correct, show an error with red text ‘Invalid email or password’

• Do not show more than one message - show only one message based on the applicable case

• Forgot Password is a dead link

• Show a spinner for 1 second when user clicks ‘Log in’ and then take user to 00_2_client_login screen

 

00_2_client_login

• Clicking ‘Start Zero Touch Questionnaire’ takes user to next screen

 

01_1_client_questionnare

• Clicking Previous takes user to earlier question (e.g. if current question is ‘3’, clicking previous takes user to ‘2’)

• Clicking Next takes user to next question (e.g. if current question is ‘3’, clicking previous takes user to ‘4’)

• Please start with question 1 and NOT question 3 as shown in storyboard - disable Previous button in this case

• Clicking on ? show Lorem Ipsum tooltip text (from a JSON file) as shown in 03 screen

• Current question must be highlighted as <number>/10 as shown in storyboard

• % values must change based on slider

 

01_2_client_questionnare

• Help screen, clicking ‘x’ should dismiss the modal

 

02_client_questionnare_summary

• The user can click on pencil icon for any question and go back to editing their answer for that question

• They should be able to edit answer for any of the questions

• Add a ‘Submit’ button at the bottom and clicking this button should navigate the user to next screen

 

03_1_client_questionnare_summary_results

• Show only 1st 3 metrics & rating values (not the prediction details)

• If user wants to view all 7 metrics then show Zero Touch Detailed Results. Just display all 7 metrics & rating (without prediction) in a single view as shown in 03_02

• Show Help Text - small question mark/ tooltip to understand metrics used in Output screen

• On click of each metric, show the metric, rating & detailed prediction
  in a new screen (03_03)

 

03_2_client_questionnare_summary_results

• Clicking ‘View Detailed Results’ takes user to 03_03

• Clicking ‘Continue Assessment’ should take user to 04

 

03_3_client_questionnare_summary_results

• Clicking ? should show help with Lorem ipsum text (as on earlier screen)

 

04_client_assessment

• ‘Yes’ should be default for each option

• User can toggle it to ‘No’

• Add a submit button at the bottom of the screen

 

05_01_client_submit_confirmation

• Clicking ‘Email me the Report’ takes user to 05_02

 

05_02_client_submit_confirmation

• Clicking ‘x’ should dismiss the modal
   

  TECHNOLOGIES

• HTML 5

• CSS

• Angular.JS (5.x)

• Spring Boot (Will be used in Development)

• Spring MVC (Will be used in Development)

• Spring REST (Will be used in Development)

• Hibernate (Will be used in Development)

• SQL Server (Will be used in Development)

• Other open source code, frameworks and libraries to be determined

• 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.

  Challenge Downloadable Available on Challenge Forum:
  Storyboard.zip - Storyboard Design
  Marvelapp Links
  
  Client Priorities (The items that are considered highest prototype priorities)

  - Creating quality and efficient UI Prototype that works in all the requested browsers.

  - No data must be hardcoded, please read all data from JSON file

  - All elements should be consistent pay attention to padding, margin, line-height, etc.

  - Matching the storyboards (as close as possible) across the required browsers.

  - Responsive Web Design solution!

   

  CODE REQUIREMENTS:

   

  No W3C Compliance Errors or Warnings

  Reviewers will be expected to check for compliance and score down any violations.

   

  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.

Final Submission Guidelines

- Zipped prototype code
- Please host your submission on Heroku and make sure to include a Heroku URL
- Provide deployment and configuration instructions (e.g. credentials to be used)