Challenge Overview
Welcome to John Hancock - Risk Assessment Admin Functionalities UI Prototype Challenge
The main task of this challenge is to continue updating UI Prototype of the John Hancock - Risk Assessment UI Prototype based on the provided Storyboard design with focus on Desktop version. Pay attention to small updates, you also need grab actual data need filled for some form elements based on provided xls files and let us know if you need clarification.
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Storyboard.zip - Storyboard design
jh-ra-ui-f2f.zip - Base of Prototype Update
Assets.zip - Data need embedded in some form elements
old-version-tooltips.zip - Old Prototype with tooltips function
UI Prototype Requirements
1). AngularJS Conversion
- Main purpose of this challenge is convert ALL pages inside existing prototype into AngularJS app
- Use latest version of AngularJS, you can grab from this site: http://angularjs.org
- Updated Prototype with AngularJS MUST use same look and feel
- Follow Best Practice of AngularJS directory structure from this site
- Suggest use Best Practice of AngularJS Coding or you can follow this site as starting point
- Use proper naming for application routes.
- Hover state need remain consistent for all buttons
- Hyperlinks need remain works when navigate each pages
- Tooltips for buttons need remain works
- Breadcrumb need take user to correct pages
- Data for each pages need loaded from JSON files.
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS/SCSS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
2). Admin Functionalities
Login Info:
- This prototype contains 2 different flow, from login page, access both flow with these credentials:
a). Owner
username: owner
password: password
b). Approver
username: approver
password: password
c). Admin
- We will need this Admin Functionalities built into existing prototype. This requires a new user type of "admin" and it adds an additional menu item to the menu bar for "edit fields".
- Admin page need able to access by use this credentials from login page
username: admin
Password: password
Screenshot: 1-Access-to-admin-functionalities.jpg
- Admin flow will be whole new flow for this prototype. You need re-use/grab existing prototype.
- Add new "Edit Fields" link next to Home on Main navigation page
- Add new button for Notification next to Welcome John. Click the button need load flyout. Read more details below
- You also need put number indicator, refer to screenshot: 4a-User-additions.png
- As possible re-use existing form element styling from existing prototype
- Also please check screenshot: NOTE.jpg to make sure you capture expected functions that might missing from challenge specification.
Screenshot: 2a-BU-Info---Data-Change.png
- Admin Functionalities consists of 3 tabs: "Business Unit Info", "Function Modifications" & "Process & Control Assessment"
Important
- There is one additional requirement that I'd also like to add. It's a small fix that got removed from the last prototype for some reason. In the previous prototype, there was a rollover "tooltip" for each column header. This, somehow, got removed but we need it added back in for the admin flow for sure.
- Check old-version-tooltips.zip > add-assessment-processes.html
- Re-use that tooltips function, add to each table column header for Admin role.
a). Business Unit Info
Data to grab: Table Data Format (BU Info and Drop-Down Selections)_042016.xls
- Please check provided xls, make sure you capture all data into your prototype. Let us know if need clarification.
- All collapsible are need expanded by default
- Click whole title area need able to collapse and expand
- There's selected style for "Investments (Transfer Agent)" with blue light background.
- When Business Unit selected, you need grab correct content for each sections based on xls files
- Always need select 1 row by default. For this prototype please set to 1st p
- On each sections there's input to allow user to add data. Re-use existing function from add-assessment-processes.html
- Hover on item need display grey background and additional icon on the left side and x button (Screenshot: 2b-BU-Info---Data-Change---Hover-1.png, Screenshot: 2c-BU-Info---Data-Change---Hover-2.png)
- Need able to remove each item by click the x button
- Double click the label need transform into editable text input (Screenshot: 2d-BU-Info---Data-Change---Edit-1.png, Screenshot: 2e-BU-Info---Data-Change---Edit-2.png)
- Press enter need save the edited value (Screenshot: 2f-BU-Info---Data-Change---Edit-3.png)
- Apply inline edit function to all labels. If there's existing value on text input, you need capture those text on editablet input
- Make sure each text input capture correct data.
- Within every section, user need able to drag and drop by click the 3 dots graphic on the left side (Screenshot: 2g-BU-Info---Data-Change---Order-1.png)
- Use box shadow when user start dragging (Screenshot: 2h-BU-Info---Data-Change---Order-2.png)
- Other list need auto move up/down when change the order (Screenshot: 2i-BU-Info---Data-Change---Order-3.png)
b). Function Modifications
Screenshot: 3a-Functional-modifications.png
Data to grab: Table Data Format (Functional Area section)_042016.xls
- This is Function Modification tabs
- Match content like storyboard look
- User need able to do inline edit and add by type on text input
- User need able to select any Type
c). Process & Control Assessment
Screenshot: 3b-Processes-_-Controls-Assessment---KPIs-SLAs.png
- For this tab, you need show sub-tabs. Re-use from existing function. Refer to this page: add-assessment-processes.html
- User need able to navigate each sub-tabs and edit the data
- Match form element like storyboard look
- For KPI/SLA’s You need present data to all tabs based on Table Data Format (KPI-SLA,Training,BCP,RM,IS and DPsection)_042016.xls
- There’s 3 dots button on the left side of Category items, this make user able to drag and drop to change the order
- When user dragging that button need able to drag all other columns.
- Specifically for For Functional Area section you need present data based on Table Data Format (Functional Area section)_042016.xls
- You also need add red indicator for “Process & controls Assessment, KP/SLA’s, Information Security and there’s red text with PENDING FOR APPROVAL text (Screenshot: 4i-Processes-and-Control---Data-Change---Pending.png)
3). User Additions
Screenshot: 4a-User-additions.png
- Click Add a New Assessment from main navigation take user to this screen
- Go to Process & Control Assessment tab
- You also need add “Overall Risk Rating” tab
- On the right side, there’s a Bulk Data Import and Edit button
- There’s table with column header, follow from storyboard look
- No need display the placeholder link
- By default there’s dropdown placed on the right side
- User need able to add new option by type on text input (Screenshot: 4b-User-additions---Multiple-1.png)
- After add new input there’s label placed with grey background, drag button and x button (Screenshot: 4c-User-additions---Multiple-2.png)
- This is look after add some items (Screenshot: 4d-User-additions---Multiple-3.png)
- User need able to drag and drop (Screenshot: 4e-User-additions---Order-1.png, Screenshot: 4f-User-additions---Order-2.png)
- Need able to do inline edits (Screenshot: 4g-User-additions---Edit.png)
4). Notification
Screenshot: 4h-User-additions---Admin-notifications.png
- When the notification button need display the flyout
- Match Styling of notification
- Grey notification is for unread notification
- Put dead links for Approve, Reject and Edit links
5). Bulk Data Import
Screenshot: 5a-Bulk-data-Import---Step-1.png
- User landed to this page from Bulk Data Import button
- There’s progress step placed on the right side
- Match active/inactive state
Step 1
- Click upload button need load browser modal window selection
- How it works graphic placed on the bottom
- After user select some file, then user navigate to next step
Step 2
- For this prototype you need simulate the some table columns on green background rows
- User need able to drag & Drop to the Business Unit Info area (Screenshot: 5b-Bulk-data-Import---Step-2.png)
- Sample when drag to different section (Screenshot: 5c-Bulk-data-Import---Step-2---Drag-A.png, Screenshot: 5d-Bulk-data-Import---Step-2---Drag-B.png & Screenshot: 5e-Bulk-data-Import---Step-2---Drag-C.png)
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code 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.
- Consistency with existing prototype
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.
SASS/CSS
- Use SASS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
- 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
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
The main task of this challenge is to continue updating UI Prototype of the John Hancock - Risk Assessment UI Prototype based on the provided Storyboard design with focus on Desktop version. Pay attention to small updates, you also need grab actual data need filled for some form elements based on provided xls files and let us know if you need clarification.
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:Storyboard.zip - Storyboard design
jh-ra-ui-f2f.zip - Base of Prototype Update
Assets.zip - Data need embedded in some form elements
old-version-tooltips.zip - Old Prototype with tooltips function
UI Prototype Requirements
1). AngularJS Conversion
- Main purpose of this challenge is convert ALL pages inside existing prototype into AngularJS app
- Use latest version of AngularJS, you can grab from this site: http://angularjs.org
- Updated Prototype with AngularJS MUST use same look and feel
- Follow Best Practice of AngularJS directory structure from this site
- Suggest use Best Practice of AngularJS Coding or you can follow this site as starting point
- Use proper naming for application routes.
- Hover state need remain consistent for all buttons
- Hyperlinks need remain works when navigate each pages
- Tooltips for buttons need remain works
- Breadcrumb need take user to correct pages
- Data for each pages need loaded from JSON files.
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS/SCSS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
2). Admin Functionalities
Login Info:
- This prototype contains 2 different flow, from login page, access both flow with these credentials:
a). Owner
username: owner
password: password
b). Approver
username: approver
password: password
c). Admin
- We will need this Admin Functionalities built into existing prototype. This requires a new user type of "admin" and it adds an additional menu item to the menu bar for "edit fields".
- Admin page need able to access by use this credentials from login page
username: admin
Password: password
Screenshot: 1-Access-to-admin-functionalities.jpg
- Admin flow will be whole new flow for this prototype. You need re-use/grab existing prototype.
- Add new "Edit Fields" link next to Home on Main navigation page
- Add new button for Notification next to Welcome John. Click the button need load flyout. Read more details below
- You also need put number indicator, refer to screenshot: 4a-User-additions.png
- As possible re-use existing form element styling from existing prototype
- Also please check screenshot: NOTE.jpg to make sure you capture expected functions that might missing from challenge specification.
Screenshot: 2a-BU-Info---Data-Change.png
- Admin Functionalities consists of 3 tabs: "Business Unit Info", "Function Modifications" & "Process & Control Assessment"
Important
- There is one additional requirement that I'd also like to add. It's a small fix that got removed from the last prototype for some reason. In the previous prototype, there was a rollover "tooltip" for each column header. This, somehow, got removed but we need it added back in for the admin flow for sure.
- Check old-version-tooltips.zip > add-assessment-processes.html
- Re-use that tooltips function, add to each table column header for Admin role.
a). Business Unit Info
Data to grab: Table Data Format (BU Info and Drop-Down Selections)_042016.xls
- Please check provided xls, make sure you capture all data into your prototype. Let us know if need clarification.
- All collapsible are need expanded by default
- Click whole title area need able to collapse and expand
- There's selected style for "Investments (Transfer Agent)" with blue light background.
- When Business Unit selected, you need grab correct content for each sections based on xls files
- Always need select 1 row by default. For this prototype please set to 1st p
- On each sections there's input to allow user to add data. Re-use existing function from add-assessment-processes.html
- Hover on item need display grey background and additional icon on the left side and x button (Screenshot: 2b-BU-Info---Data-Change---Hover-1.png, Screenshot: 2c-BU-Info---Data-Change---Hover-2.png)
- Need able to remove each item by click the x button
- Double click the label need transform into editable text input (Screenshot: 2d-BU-Info---Data-Change---Edit-1.png, Screenshot: 2e-BU-Info---Data-Change---Edit-2.png)
- Press enter need save the edited value (Screenshot: 2f-BU-Info---Data-Change---Edit-3.png)
- Apply inline edit function to all labels. If there's existing value on text input, you need capture those text on editablet input
- Make sure each text input capture correct data.
- Within every section, user need able to drag and drop by click the 3 dots graphic on the left side (Screenshot: 2g-BU-Info---Data-Change---Order-1.png)
- Use box shadow when user start dragging (Screenshot: 2h-BU-Info---Data-Change---Order-2.png)
- Other list need auto move up/down when change the order (Screenshot: 2i-BU-Info---Data-Change---Order-3.png)
b). Function Modifications
Screenshot: 3a-Functional-modifications.png
Data to grab: Table Data Format (Functional Area section)_042016.xls
- This is Function Modification tabs
- Match content like storyboard look
- User need able to do inline edit and add by type on text input
- User need able to select any Type
c). Process & Control Assessment
Screenshot: 3b-Processes-_-Controls-Assessment---KPIs-SLAs.png
- For this tab, you need show sub-tabs. Re-use from existing function. Refer to this page: add-assessment-processes.html
- User need able to navigate each sub-tabs and edit the data
- Match form element like storyboard look
- For KPI/SLA’s You need present data to all tabs based on Table Data Format (KPI-SLA,Training,BCP,RM,IS and DPsection)_042016.xls
- There’s 3 dots button on the left side of Category items, this make user able to drag and drop to change the order
- When user dragging that button need able to drag all other columns.
- Specifically for For Functional Area section you need present data based on Table Data Format (Functional Area section)_042016.xls
- You also need add red indicator for “Process & controls Assessment, KP/SLA’s, Information Security and there’s red text with PENDING FOR APPROVAL text (Screenshot: 4i-Processes-and-Control---Data-Change---Pending.png)
3). User Additions
Screenshot: 4a-User-additions.png
- Click Add a New Assessment from main navigation take user to this screen
- Go to Process & Control Assessment tab
- You also need add “Overall Risk Rating” tab
- On the right side, there’s a Bulk Data Import and Edit button
- There’s table with column header, follow from storyboard look
- No need display the placeholder link
- By default there’s dropdown placed on the right side
- User need able to add new option by type on text input (Screenshot: 4b-User-additions---Multiple-1.png)
- After add new input there’s label placed with grey background, drag button and x button (Screenshot: 4c-User-additions---Multiple-2.png)
- This is look after add some items (Screenshot: 4d-User-additions---Multiple-3.png)
- User need able to drag and drop (Screenshot: 4e-User-additions---Order-1.png, Screenshot: 4f-User-additions---Order-2.png)
- Need able to do inline edits (Screenshot: 4g-User-additions---Edit.png)
4). Notification
Screenshot: 4h-User-additions---Admin-notifications.png
- When the notification button need display the flyout
- Match Styling of notification
- Grey notification is for unread notification
- Put dead links for Approve, Reject and Edit links
5). Bulk Data Import
Screenshot: 5a-Bulk-data-Import---Step-1.png
- User landed to this page from Bulk Data Import button
- There’s progress step placed on the right side
- Match active/inactive state
Step 1
- Click upload button need load browser modal window selection
- How it works graphic placed on the bottom
- After user select some file, then user navigate to next step
Step 2
- For this prototype you need simulate the some table columns on green background rows
- User need able to drag & Drop to the Business Unit Info area (Screenshot: 5b-Bulk-data-Import---Step-2.png)
- Sample when drag to different section (Screenshot: 5c-Bulk-data-Import---Step-2---Drag-A.png, Screenshot: 5d-Bulk-data-Import---Step-2---Drag-B.png & Screenshot: 5e-Bulk-data-Import---Step-2---Drag-C.png)
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code 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.
- Consistency with existing prototype
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.
SASS/CSS
- Use SASS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
- 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
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser