Challenge Overview
Welcome to John Hancock - Project Snapshot Multiple Updates UI Prototype Challenge
For this UI Prototype challenge, we need your help to do finishing touches on a completed UI Prototype, based on provided document. Read more detailed information below.
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!
This F2F is subjective - so the first solution that the client likes and fulfills the required updates will win. We will consider all submissions until a winner is declared.
Attachment Files
Files are available in the forum
Important!
- Main purpose of this challenge is update existing Responsive AngularJS UI Prototype to follow some updates based on storyboard design and specification listed bwlow
- 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
- Data for each pages need loaded from JSON files.
- Hover state should be consistent for all buttons
- Tooltips for buttons should work
- Pay attention to some updates below, some tasks are minor. Let us know if you need some clarification.
Your prototype submission need support these following sizes:
a. Desktop Size
- Provided storyboard using Standard (1x) size 1280px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper
b. Tablet Size
- Provided storyboard using Retina (2x) size 1536px width
- Make sure your submission supports Standard size with 768px width
- Make user graphics look sharp on Retina and Standard version
- You must adjust sizing for any elements to make them look proper with existing tablet look and feel.
c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission supports Standard layout with 320px width
- Make user graphics look sharp on Retina and Standard version
- All pages need use fluid layout when transform into Landscape or Portrait view.
- You might need adjust some element placement in 320px width screen size. Let’s discus any doubt about adjustments
UI Prototype Updates Requirements:
General Updates
- Pay attention to storyboard design, there are lots of small updates that need to be captured in your submission. Let us know if you need clarification
- Text need use TitleCase format on dropdown
- Compare related screens for Mobile, Tablet and Desktop
- Make sure red, green, and yellow colors are consistent throughout
Note: The majority of the items outlined below were all updated in design and included as part of the this challenge. Use this as your "checklist" for the items that need to included/ updated in the existing prototype. The end goal is to the match the storyboard/ designs with the prototype.
1). NEW Advance Search (Mobile, Tablet, and Desktop)
- User will have the ability to search for project cards containing search terms in the following fields: Project name, Acting Project Manager, Executive Sponsor, Project Sponsor, Business unit, Project Description
- You need add new advance button on the right side of search text input
- Click the button need load the search terms contains some checkboxes options
- Re-use existing checkboxes styling
2). Like and Dislike page (Mobile, Tablet, and Desktop)
- Establish links to “����Likes”���� and “����Dislikes”���� pages from the Project Details View (Count of Likes and Dislikes in General information section), and from Count of Thumbs up in Card view
- We already created the "Like" page on mobile
- Create a different page for "Dislike". This page can follow the same general layout at "Like", just change the title
- Remove the email button on the right side of Like and Dislike pages
- We need to design a "Likes" and "Dislikes" pages (can be overlays/ modal windows) for Desktop
3). Section headings Updates (Mobile, Tablet, and Desktop)
- General Information, Health, Status, etc., should be Bigger and bolder.
- Need to be designed as more headings. Currently getting lost in the other text
4). Subheading color (Mobile, Tablet, and Desktop)
- All subheadings and anything currently displayed as light gray e.g., Planned Implementation Date, Acting Project Manager, PMF Phase, Overall
- Should be a darker color - consistent with the "17 Likes" displayed in Project Detail view
5). Search Result Close Button (Mobile and Tablet)
- Add Close link on Mobile, Tablet when search result show up
- Design it to make the Desktop designs
6). Change title on Sort Option (from icon on Toolbar) to: "Sort by:"
- Text should read: "Sort by:"
7). Change Title on Filter option (from icon on Toolbar) to: "Filter by:"
- Text should read: "Filter by:"
8). Remove Profile Menu from sidebar (Mobile and Tablet)
- Remove Profile link from the sidebar menu on Mobile
9). Sorting Panel Update (Mobile, Tablet, and Desktop)
- Change to 2 dropdowns.
- Dropdown 1: select Planned Implementation Date, Project Name, Current Health Indicator - Overall, etc.
- Dropdown 2: allow the user to select the sorting open based on the dropdown 1 selection: Nearest to Latest, A to Z, Red to Green, etc.
- It's a 2 step process. They need to select dropdown 1 before they can select dropdown 2
- Cancel and Apply buttons should still remain
10). NEW Project Issues & Project Risks(Mobile, Tablet, and Desktop)
- Split the “����Risk and Issues”���� content into two different section boxes. 1 for Project Issues and the other for Project Risks
- Rename to just "Issues" and "Risks"
- Add navigation/ tab items for each of these to the current blue bar (see item 11 for more info on nav bar)
- Show more than one Issue and Risk for each of these
- Allow the user to expand/ collapse to reveal all issues and risks . There could be more than we would want to expose/ show all at once
- Add a number of total Issues and total number of Risks somewhere in those content sections
- "Issues" should go before "Risks"
11). NEW Navigation Bar Updates (Mobile, Tablet, and Desktop)
- In addition to the number 10 item above
- Add a "Comments" nav item
- Change "Next" to "Action"
- Add a "Sentiment" nav item
- Note: all items may not fit, that's ok. Just indicate to the user somehow that more items are available to the right.
- Complete navigation bar order should be: General, Status, Health, Sentiment, Gating, Costs, Issues, Risks, Action, Comments
12). Sign On/ Preferences Screens (Tablet and Desktop)
- We have the designs for these already in mobile
- Just need to transfer those over to tablet and desktop and adjust any UX/ UI issues/ flows
- The mobile screens are: 0-Mobile---Projects---Login-Error-Massage.png, 1a-Mobile---Projects---First-Use-Success.png, 1a-Mobile---Projects---First-Use-Skip.png, 1a-Mobile---Projects---First-Use-1.png, 1a-Mobile---Projects---First-Use-2.png
13). NEW Profile Dropdown (Tablet and Desktop)
- We need to design the dropdown selection when clicking on the profile/ down arrow in the top right. User selections should be:
- Project Information�� (dynamically displayed only when user has been given this right)
- Settings
14). Menu Updates (Mobile, Tablet, and Desktop)
- For the mobile/ tablet side menu AND the desktop top right down arrow menu; we need to remove: "Profile", and "Sign Out"
- The only two menu options should be: "Project Information", and "Settings"
15). NEW PPM Information (now Project Information) Modal (Tablet and Desktop)
- We need to take the Project Information screen on mobile and include it for Desktop
- The menu option is accessible from the top right profile/ down arrow (see items 13 above)
- This doesn't need to be a new screen. It can just be an overlay/ modal window.
- All of the same selections, functionality, and features should remain that are on mobile; just redesigned for desktop.
16). NEW Settings Modal (Tablet and Desktop)
- Take the Settings modal window from mobile and include that in the desktop designs
- The menu option is accessible from the top right profile/ down arrow (see items 13 above)
- This doesn't need to be a new screen. It can just be an overlay/ modal window.
- All of the same selections, functionality, and features should remain that are on mobile; just redesigned for desktop.
- Note: the settings screens are 1a-Mobile---Projects---First-Use-Success.png, 1a-Mobile---Projects---First-Use-Skip.png, 1a-Mobile---Projects---First-Use-1.png, 1a-Mobile---Projects---First-Use-2.png
17). Consistent Status Color (Mobile, Tablet, and Desktop)
Screenshot: Picture1.png
- Yellow color need use consistent. They must use Bright Yellow
- Refer to Triangle shape on Health Section, that’s the Bright Yellow
- All colors for health and sentiment must be the same Red/Yellow/Green hues. Colors must match. The same goes with the shapes, sentiment bars, health color bars
18). Sentiment Color Status Coordination (Mobile, Tablet, and Desktop)
Refer to screenshot folder (Picture1.png Picture2.png)
Screenshot: Picture2.png
- Project bottom border color, health icon and Project health need to be consistent based on Overall Health Color
- Project Health (Overall Health) and color displayed on border on card should be the same
- Project Sentiment score and icons is independent of Project Overall Health
19). Project Name needs to be Clickable (Mobile, Tablet, and Desktop)
- Project Name needs to be Clickable and provide blue color as hover text
20). Inconsistent Font Sizing in Responsive Mode (Mobile, Tablet, and Desktop)
- You need make every font sizes to be consistent across Mobile, Tablet, and Desktop
21). Tooltips (Mobile, Tablet, and Desktop)
- Tooltips in Gating, Cost and Sentiment Sections stick (stays displayed) when user moves on to other sections.
- Tooltips need closed when user start scrolling the page/section
- They should close when user clicks again or add a close button.
- Tooltip should be rounded to nearest dollar - no decimal places.
22). Tooltips Cost (Mobile, Tablet, and Desktop)
- Cost Section: Rounding: Should to nearest Thousands, consistent with Gating, e.g., $196K, $245K, $102K, with tooltip to display actual amount (to the nearest dollar).
- Use updated function like required above
23). Tab Transition (Mobile, Tablet, and Desktop)
- Transition using tabs on navigation bar is not smooth. Screen “jumps”
- Use slide up or down effect
- Mouse wheel on IE11 results in shuddering
24). IE11 - Project image does not resize in proportion (Desktop)
- Project image does not resize in proportion
25). Project Detail Health (Mobile, Tablet, and Desktop)
- Remove the shading/shadow from the Green Circle Health icon on Project Detail View
26). View More Function (Mobile, Tablet, and Desktop)
- Click View More of Status & Current Period Accomplishments should expand more data
- Then View less button show, click this button need revert to default look
27). Project Details Edit Icon (Mobile and Tablet)
- Remove Edit Icon (pencil) on the Project Details view (top right)
28). Health Section (Desktop)
- There is a shadow image on the Health section on the Previous triangle
- Check cross-browser and make sure text shadow removed
- "View More" should display other Health indicators if they have been selected to show on the admin screen. These include: Cost Health, Schedule Health, and Scope Health. They should display just as the "Overall" Health is displayed.
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.
CSS
- Use SCSS 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
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
Web Browsers Requirements
- IE10
- IE11
- Firefox latest version
- Safari latest version
- Chrome latest version
- Safari on iPhone (Landscape & Portrait View)
- Safari on iPad (Landscape & Portrait View)
For this UI Prototype challenge, we need your help to do finishing touches on a completed UI Prototype, based on provided document. Read more detailed information below.
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
IMPORTANTThis F2F is subjective - so the first solution that the client likes and fulfills the required updates will win. We will consider all submissions until a winner is declared.
Attachment Files
Files are available in the forum
Important!
- Main purpose of this challenge is update existing Responsive AngularJS UI Prototype to follow some updates based on storyboard design and specification listed bwlow
- 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
- Data for each pages need loaded from JSON files.
- Hover state should be consistent for all buttons
- Tooltips for buttons should work
- Pay attention to some updates below, some tasks are minor. Let us know if you need some clarification.
Your prototype submission need support these following sizes:
a. Desktop Size
- Provided storyboard using Standard (1x) size 1280px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper
b. Tablet Size
- Provided storyboard using Retina (2x) size 1536px width
- Make sure your submission supports Standard size with 768px width
- Make user graphics look sharp on Retina and Standard version
- You must adjust sizing for any elements to make them look proper with existing tablet look and feel.
c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission supports Standard layout with 320px width
- Make user graphics look sharp on Retina and Standard version
- All pages need use fluid layout when transform into Landscape or Portrait view.
- You might need adjust some element placement in 320px width screen size. Let’s discus any doubt about adjustments
UI Prototype Updates Requirements:
General Updates
- Pay attention to storyboard design, there are lots of small updates that need to be captured in your submission. Let us know if you need clarification
- Text need use TitleCase format on dropdown
- Compare related screens for Mobile, Tablet and Desktop
- Make sure red, green, and yellow colors are consistent throughout
Note: The majority of the items outlined below were all updated in design and included as part of the this challenge. Use this as your "checklist" for the items that need to included/ updated in the existing prototype. The end goal is to the match the storyboard/ designs with the prototype.
1). NEW Advance Search (Mobile, Tablet, and Desktop)
- User will have the ability to search for project cards containing search terms in the following fields: Project name, Acting Project Manager, Executive Sponsor, Project Sponsor, Business unit, Project Description
- You need add new advance button on the right side of search text input
- Click the button need load the search terms contains some checkboxes options
- Re-use existing checkboxes styling
2). Like and Dislike page (Mobile, Tablet, and Desktop)
- Establish links to “����Likes”���� and “����Dislikes”���� pages from the Project Details View (Count of Likes and Dislikes in General information section), and from Count of Thumbs up in Card view
- We already created the "Like" page on mobile
- Create a different page for "Dislike". This page can follow the same general layout at "Like", just change the title
- Remove the email button on the right side of Like and Dislike pages
- We need to design a "Likes" and "Dislikes" pages (can be overlays/ modal windows) for Desktop
3). Section headings Updates (Mobile, Tablet, and Desktop)
- General Information, Health, Status, etc., should be Bigger and bolder.
- Need to be designed as more headings. Currently getting lost in the other text
4). Subheading color (Mobile, Tablet, and Desktop)
- All subheadings and anything currently displayed as light gray e.g., Planned Implementation Date, Acting Project Manager, PMF Phase, Overall
- Should be a darker color - consistent with the "17 Likes" displayed in Project Detail view
5). Search Result Close Button (Mobile and Tablet)
- Add Close link on Mobile, Tablet when search result show up
- Design it to make the Desktop designs
6). Change title on Sort Option (from icon on Toolbar) to: "Sort by:"
- Text should read: "Sort by:"
7). Change Title on Filter option (from icon on Toolbar) to: "Filter by:"
- Text should read: "Filter by:"
8). Remove Profile Menu from sidebar (Mobile and Tablet)
- Remove Profile link from the sidebar menu on Mobile
9). Sorting Panel Update (Mobile, Tablet, and Desktop)
- Change to 2 dropdowns.
- Dropdown 1: select Planned Implementation Date, Project Name, Current Health Indicator - Overall, etc.
- Dropdown 2: allow the user to select the sorting open based on the dropdown 1 selection: Nearest to Latest, A to Z, Red to Green, etc.
- It's a 2 step process. They need to select dropdown 1 before they can select dropdown 2
- Cancel and Apply buttons should still remain
10). NEW Project Issues & Project Risks(Mobile, Tablet, and Desktop)
- Split the “����Risk and Issues”���� content into two different section boxes. 1 for Project Issues and the other for Project Risks
- Rename to just "Issues" and "Risks"
- Add navigation/ tab items for each of these to the current blue bar (see item 11 for more info on nav bar)
- Show more than one Issue and Risk for each of these
- Allow the user to expand/ collapse to reveal all issues and risks . There could be more than we would want to expose/ show all at once
- Add a number of total Issues and total number of Risks somewhere in those content sections
- "Issues" should go before "Risks"
11). NEW Navigation Bar Updates (Mobile, Tablet, and Desktop)
- In addition to the number 10 item above
- Add a "Comments" nav item
- Change "Next" to "Action"
- Add a "Sentiment" nav item
- Note: all items may not fit, that's ok. Just indicate to the user somehow that more items are available to the right.
- Complete navigation bar order should be: General, Status, Health, Sentiment, Gating, Costs, Issues, Risks, Action, Comments
12). Sign On/ Preferences Screens (Tablet and Desktop)
- We have the designs for these already in mobile
- Just need to transfer those over to tablet and desktop and adjust any UX/ UI issues/ flows
- The mobile screens are: 0-Mobile---Projects---Login-Error-Massage.png, 1a-Mobile---Projects---First-Use-Success.png, 1a-Mobile---Projects---First-Use-Skip.png, 1a-Mobile---Projects---First-Use-1.png, 1a-Mobile---Projects---First-Use-2.png
13). NEW Profile Dropdown (Tablet and Desktop)
- We need to design the dropdown selection when clicking on the profile/ down arrow in the top right. User selections should be:
- Project Information�� (dynamically displayed only when user has been given this right)
- Settings
14). Menu Updates (Mobile, Tablet, and Desktop)
- For the mobile/ tablet side menu AND the desktop top right down arrow menu; we need to remove: "Profile", and "Sign Out"
- The only two menu options should be: "Project Information", and "Settings"
15). NEW PPM Information (now Project Information) Modal (Tablet and Desktop)
- We need to take the Project Information screen on mobile and include it for Desktop
- The menu option is accessible from the top right profile/ down arrow (see items 13 above)
- This doesn't need to be a new screen. It can just be an overlay/ modal window.
- All of the same selections, functionality, and features should remain that are on mobile; just redesigned for desktop.
16). NEW Settings Modal (Tablet and Desktop)
- Take the Settings modal window from mobile and include that in the desktop designs
- The menu option is accessible from the top right profile/ down arrow (see items 13 above)
- This doesn't need to be a new screen. It can just be an overlay/ modal window.
- All of the same selections, functionality, and features should remain that are on mobile; just redesigned for desktop.
- Note: the settings screens are 1a-Mobile---Projects---First-Use-Success.png, 1a-Mobile---Projects---First-Use-Skip.png, 1a-Mobile---Projects---First-Use-1.png, 1a-Mobile---Projects---First-Use-2.png
17). Consistent Status Color (Mobile, Tablet, and Desktop)
Screenshot: Picture1.png
- Yellow color need use consistent. They must use Bright Yellow
- Refer to Triangle shape on Health Section, that’s the Bright Yellow
- All colors for health and sentiment must be the same Red/Yellow/Green hues. Colors must match. The same goes with the shapes, sentiment bars, health color bars
18). Sentiment Color Status Coordination (Mobile, Tablet, and Desktop)
Refer to screenshot folder (Picture1.png Picture2.png)
Screenshot: Picture2.png
- Project bottom border color, health icon and Project health need to be consistent based on Overall Health Color
- Project Health (Overall Health) and color displayed on border on card should be the same
- Project Sentiment score and icons is independent of Project Overall Health
19). Project Name needs to be Clickable (Mobile, Tablet, and Desktop)
- Project Name needs to be Clickable and provide blue color as hover text
20). Inconsistent Font Sizing in Responsive Mode (Mobile, Tablet, and Desktop)
- You need make every font sizes to be consistent across Mobile, Tablet, and Desktop
21). Tooltips (Mobile, Tablet, and Desktop)
- Tooltips in Gating, Cost and Sentiment Sections stick (stays displayed) when user moves on to other sections.
- Tooltips need closed when user start scrolling the page/section
- They should close when user clicks again or add a close button.
- Tooltip should be rounded to nearest dollar - no decimal places.
22). Tooltips Cost (Mobile, Tablet, and Desktop)
- Cost Section: Rounding: Should to nearest Thousands, consistent with Gating, e.g., $196K, $245K, $102K, with tooltip to display actual amount (to the nearest dollar).
- Use updated function like required above
23). Tab Transition (Mobile, Tablet, and Desktop)
- Transition using tabs on navigation bar is not smooth. Screen “jumps”
- Use slide up or down effect
- Mouse wheel on IE11 results in shuddering
24). IE11 - Project image does not resize in proportion (Desktop)
- Project image does not resize in proportion
25). Project Detail Health (Mobile, Tablet, and Desktop)
- Remove the shading/shadow from the Green Circle Health icon on Project Detail View
26). View More Function (Mobile, Tablet, and Desktop)
- Click View More of Status & Current Period Accomplishments should expand more data
- Then View less button show, click this button need revert to default look
27). Project Details Edit Icon (Mobile and Tablet)
- Remove Edit Icon (pencil) on the Project Details view (top right)
28). Health Section (Desktop)
- There is a shadow image on the Health section on the Previous triangle
- Check cross-browser and make sure text shadow removed
- "View More" should display other Health indicators if they have been selected to show on the admin screen. These include: Cost Health, Schedule Health, and Scope Health. They should display just as the "Overall" Health is displayed.
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.
CSS
- Use SCSS 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
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
Web Browsers Requirements
- IE10
- IE11
- Firefox latest version
- Safari latest version
- Chrome latest version
- Safari on iPhone (Landscape & Portrait View)
- Safari on iPad (Landscape & Portrait View)