User Onboarding Tool - UI Prototype

Challenge Objectives

• Implement the UI prototype for the provided design. 

Project Background

We are building a new UI based tool for a financial services company. This will be an internal tool to onboard new users and manage users from a centralized location.

Technology Stack

• Angular 8

Requirements

You can find the latest design here: https://marvelapp.com/1gd9fcag
Here is the source file: https://drive.google.com/file/d/0B6ELC00hxu09bXQ0eHJRc0FnOFR0NU9FWHo2aS04Y29GMWIw/view

The data should match the provided swagger file. 

General Requirements:
The project has 3 types of roles:

• Regular User - regular user will apply for an application role, and fill applications. (01 pages)
• Approval User - approval user will review the regular users' applications, and approve or reject. (02 pages)
• Admin User - admin user will manage applications, questions, and settings. (02 - 06 pages)

You need to create a simple login screen and demonstrate flow of all 3 types of user. 
And you need to demonstrate all the question types and the conditions as well warnings. 

• Admin - the constructed application questions payload should match the swagger, and it should sent to a json-server (or a simple node-js server). 
• Regular User - then the user can load the application and the questions must be rendered correctly. the submitted answers should match the swagger.
• Approver/Admin - for the application request, the questions and the answers should be rendered correctly

Pages:
01 - A

• Landing page for regular user after login
• By default no application role is selected.
• After user selects any application role, go to 01-D

01 - D

• The user details are pre-populated
• The applications associated with the selected application roles are displayed
• User needs to fill data in at least one application in order to submit. 
• User can fill data in more than one applications, and if nothing is filled in an application, the application is ignored
• Submit will validate the user details input (all are required) and the application inputs

01 - E - H

• Questions in application are built dynamically from the JSON data
• Please refer to the question builder for more details. 

01 - I

• Show the popup if the application is submitted successfully. 

02 - A

• A separate html page with embedded css should be created for this screen. It can reference the images from main app. 
• Approver can click the link to open the application review screen

02 - B

• Approver can only see this page for a specific application request. 
• Approver can edit user's answers to the question, and approve or reject the application. 
• Approver cannot edit the application's question. 
• Admin can also see this page as an inner page of "Request Master List" tab. Admin can only edit application's questions. 

03 - A - T

• Admin will use these screen to create new application or edit existing application. 
• Add an "Application Role" multi-select dropdown to the page to associate the application with application role. 
• "Build Approver List" link should simply redirect to the "Approval Setup" tab with current application selected. Hide the link if the application is not saved. 
• You can use GUID for the question id
• Only the following question types are supported:
  • Text Input - single line text input
  • Dropdown - allow user to configure the options, only need to configure option text, use it for the option value as well when rendering
  • Yes / No
  • Multiple Select - similar as dropdown, expect it allows multiple choices
  • Single Select - similar as dropdown
  • Date Picker
  • Upload Attachment - allow user upload multiple files 
• 03 - A/B/C
  • Required Field Type - means the input is required on 01 page
  • Actions - allow user to copy or delete
  • Dropdown Actions: only need add-description, build-conditional-question, add-to-section and add-alerts
• 03 - D
  • Remove the option-type dropdown. Option-title is good enough
  • Remove the check button on the right as well
• ���03 - E/F/G - image type is not needed
• 03 - H/I/J/K/L - they are needed and obvious
• 03 - M/N
  • Remove the "Conditional Logic" toggle button
  • Rename "Condition" to "If Answer Equals" - it represents the answer the user selects (if question type is dropdown/single-or-multiple select) or enters (for the other question types)
  • and rename "Go To" to "Show" - it means if the regular user's answer equals the exected value above, then another dependent question should be displayed
  • Note that a question can only depend upon one question. so you need to ensure it can only be selected once, and ensure there is no cyclic dependency as well.
  • Remove the "check" icon on the right
  • Upload Attachment question-type doesn't support condition or warning
• 03 - S - O - they are not needed
• 03 - T
  • No need to use popup here. 
  • Just show like the condition with:
    • "If Answer Equals"  - dropdown or text input
    • "Show Warning". - simple text input for warning

04 - A - D

• Add a global "Save" button to call the API to save all the changes. 
• 1st Approval / 2nd Approval etc., each represent an approval phase
• Allow user to remove or duplicate an approval phase
• Allow user to drag & drop an approver from one phase to another phase (nice to have)
• Click the "+" button in an approval phase, show a popup like 03-R:
  • The title should be select approvers (the already selected approvers should be removed from it)
  • The popup should have a search input to enter text to filter approvers
  • In the list, the icon on the right should be a checkbox instead
  • Only need two buttons at the bottom: Cancel and Done

05 

• Show all application requests
• Paging should be supported
• Click the questionnare rows, open the screen same as application-review screen. it should be an inner page

06

• Show all the applications on the left
  • Click edit icon opens the question builder for this application
• Show the SMTP settings on the right

 

Code formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• Use appropriate linter to validate your code.

HTML Specific

• HTML should be valid HTML5 compliant.
• 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.

CSS Specific

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
• You may use SCSS in the project.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge

 

Final Submission Guidelines

Submission Deliverable

• Source code
• Deployment Guide and Verification Guide