Challenge Overview
Welcome to John Hancock - Project Snapshot AngularJS Responsive UI Prototype Challenge
The main task of this challenge is to create Responsive AngularJS UI Prototype of the John Hancock - Project Snapshot based on the provided Storyboard design with responsive Desktop/tablet and mobile.
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!
https://drive.google.com/folderview?id=0B31nrwic_6z0QzRMR19sTTRNQm8&usp=sharing
Storyboard.zip - Storyboard design
Important!
- Main purpose of this challenge is build all storyboard design into into Responsive AngularJS UI Prototype
- Use latest version of AngularJS, you can grab from this site: http://angularjs.org
- You can use Angular 1 or Angular 2. Open to your suggestion.
- Follow Best Practice of AngularJS directory structure from this site
- 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/SCSS folder also CSS the output on your prototype
- Data for each pages need loaded from JSON files.
- Hover state need remain consistent for all buttons
- Tooltips for buttons need remain works
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 support Standard size with 768px width
- Make user graphics look sharp on Retina and Standard version
- You must adjust sizing for any elements to make they look proper with existing tablet look and feel.
c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission support 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 Requirements
MOBILE VERSION
1). Error Screen
Screenshot: 0-Mobile---Projects---Login-Error-Massage.png
- This is error screen after user logged in
- Click OK button take user to Projects Page - First Use
2). Projects - First Use
Screenshot: 1a-Mobile---Projects---First-Use-1.png
- This modal window need show up when user landed to Projects page at the first time
- There are up and down arrow on the right side
- Click the arrow need display sort option below the title (Screenshot: 1a-Mobile---Projects---First-Use-2.png)
- Revert the text when user click the up arrow
- Click Skip need load another modal window (Screenshot: 1a-Mobile---Projects---First-Use-Skip.png)
- Done button take to different modal window with checkmark icon (Screenshot: 1a-Mobile---Projects---First-Use-Success.png)
- After click OK button, modal window hidden and user see the Projects page
3). Projects
Screenshot: 1b-Mobile---Projects.png
- This is Projects page look and feel
- On header bar, there’s menu button, logo, sort, filter and search buttons
- Then Project cards displayed below the header
- Match the layout structure for each cards
Cards
- Click Whole cards should take user Project Detail page
- Image need covered the top area
- Some card placed the play button on top of image.
- There’s different border on each card based on health, match storyboard look
- Project title, month and refine button on the left side
- Health status will be different on each cards, refer storyboard look
- Sentiment area will be a slider, user can slide. There’s number information on the right side
- When user slide to red area, drag bar changed to red. Match the icon (Screenshot: 1b-Mobile---Projects-----Sad-Sentiment.png)
- When change to yellow area need turn to yellow (Screenshot: 1b-Mobile---Projects-----Neutral-Sentiment.png)
- Percentage Number on the right side should be relected the slide position
- Also make sure also works when slide to green area
- Then, there’s 3 lines of quick information
- Like, dislike and comments buttons placed on the bottom right
- Card rounded and shadow need created using css stylesheet
Menu Navigation
Screenshot: 1c-Mobile---Projects---Menu.png
- Click menu button need load the sidebar navigation
- user profile placed on top
- Match navigation menu
- As possible we need each menu linked to correct pages
Sort
Screenshot: 1d-Mobile---Projects---Sorting-Function-1.png
- This is sort function
- User need able to select 1 option at a time
- Ignore this storyboard screen (Screenshot: 1d-Mobile---Projects---Sorting-Function-2.png)
- Before the radio button you need place up and down arrow like on previous page (Screenshot: 1a-Mobile---Projects---First-Use-2.png)
- Re-use same function to display sort text below the title
- Cancel and Apply button need hide the modal
Filter
Screenshot: 1e-Mobile---Filter-Functionality.png
- This filter show up after click the filter button
- Modal window need placed centered of browser screen
- Match styling for checked on/off the checkboxes
- Cancel and Apply button need hide the modal
Search
Screenshot: 1f-Mobile---Projects---Search-Function.png
- This the search modal window
- Search input placed on top
- Search result list displayed on the bottom
- User can navigate by click Previous and Next button
4). PPM Information
Screenshot: 2-Mobile---PPM-Info.png
- User landed to this page from PPM Information menu on the left sidebar
- Match content like storyboard
5). Project Details
Screenshot: 3a-Mobile---Project-Details.png
- This is Project Detail page
- On header bar there’s Back, title and Edit button
- On Project image, you can see there’s camera icon on the bottom right
- Click this need load upload modal window
- Project title, sentiment, health, like and dislike buttons placed on the bottom
- Click like button need toggle the color to blue (Screenshot: 3b-Mobile---Project-Details--Like.png)
- Click dislike button need toggle the color to red (Screenshot: 3b-Mobile---Project-Details--Dislike.png)
- Then, tab navigation for different sections
- User need able to swipe to see another tab (Screenshot: 3c-Mobile---Project-Details--Navigation-Slide.png)
- Match active/inactive state for tab
- Click different tab will make the page scrolling to related sections
- When scrolling the page, tab remain fixed in place (Screenshot: 3h-Mobile---Project-Details---Scroll.png)
General
- Content using left and right side
- Match color differences and font styling
- In the bottom there are user information with thumbnail
Status
- Refine button there’s a “?” button
- Click the “?” need load the tooltips (Screenshot: 3d-Mobile---Project-Details---Tooltip-Status-Help.png)
- There’s view more button for every status
Health
- Display Current, overall and previous health
Sentiment
- Change to different color need load different icon for drag bar
- Number percentage placed on the right side
- Click “?” need load the tooltips (Screenshot: 3e-Mobile---Project-Details---Tooltip-Sentiment.png)
Gating
- Display same gates with Target, Approval Date and Approved Costs
- Click Each Approved Cost need load tooltips contains full price (Screenshot: 3f-Mobile---Project-Details---Tooltip-Gating.png)
Costs
- There are some bar chart with cost on the right side
- Click Cost need load tooltips contains full price (Screenshot: 3g-Mobile---Project-Details---Tooltip-Costs.png)
Risk and Issues
- Match content like storyboard
Next Steps
- Match content like storyboard
Comments
- This are consists of some comments
- User can type on the write comment area (Screenshot: 3i-Mobile---Project-Details---Comment-A.png, Screenshot: 3j-Mobile---Project-Details---Comment-B.png)
6). Likes Page
Screenshot: 4a-Likes-or-Dislikes-names.png
- When user click Like or Dislike buttons from Projects page user landed on this screen
- Display user thumbnail, title and email button on the right side
TABLET VERSION
Screenshot: 1a-Tablet.png
- This is how tablet screen look
- Projects card and details placed side by side
- Header bar also different, on the left side there’s Logo, sort and filter button
- On the right side, there’s user dropdown
- On main content area, left side can use fixed width
- And the detail page need use fluid width
- Click on Sort button need use same content like on mobile (Screenshot: 1b-Tablet--Sorting-Functionality.png & Screenshot: 1b-Tablet--Sorting-Functionality-2.png)
- Match selected style for the sort button
- Click filter need load Filter flyout (Screenshot: 1c-Tablet--Filter-Functionality.png)
- Search input placed o top of project cards
- When user type need load the flyout (Screenshot: 1d-Tablet--Search-Functionality.png)
- Click different cards need load different project detail
- Simulate different datasets for each project cards
- Use standard browser for scrollbar. Both left and right side can scrolling separately
- Functions will remain same for most element
- For the Project detail area, make sure you follow the fluid layout like storyboard
DESKTOP VERSION
Screenshot: 1a-Desktop.png
Screenshot: 1b-Desktop---Sorting-Functionality-1.png
Screenshot: 1b-Desktop---Sorting-Functionality-2.png
Screenshot: 1c-Desktop---Filter-Functionality.png
Screenshot: 1d-Desktop--Search-Function.png
- This is how desktop screen look
- Not much different than tablet look
- Desktop screen need use fluid width in most part
- Let us know if you need some clarification about desktop implementation
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient AngularJS/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.
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
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- 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 create Responsive AngularJS UI Prototype of the John Hancock - Project Snapshot based on the provided Storyboard design with responsive Desktop/tablet and mobile.
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:https://drive.google.com/folderview?id=0B31nrwic_6z0QzRMR19sTTRNQm8&usp=sharing
Storyboard.zip - Storyboard design
Important!
- Main purpose of this challenge is build all storyboard design into into Responsive AngularJS UI Prototype
- Use latest version of AngularJS, you can grab from this site: http://angularjs.org
- You can use Angular 1 or Angular 2. Open to your suggestion.
- Follow Best Practice of AngularJS directory structure from this site
- 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/SCSS folder also CSS the output on your prototype
- Data for each pages need loaded from JSON files.
- Hover state need remain consistent for all buttons
- Tooltips for buttons need remain works
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 support Standard size with 768px width
- Make user graphics look sharp on Retina and Standard version
- You must adjust sizing for any elements to make they look proper with existing tablet look and feel.
c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission support 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 Requirements
MOBILE VERSION
1). Error Screen
Screenshot: 0-Mobile---Projects---Login-Error-Massage.png
- This is error screen after user logged in
- Click OK button take user to Projects Page - First Use
2). Projects - First Use
Screenshot: 1a-Mobile---Projects---First-Use-1.png
- This modal window need show up when user landed to Projects page at the first time
- There are up and down arrow on the right side
- Click the arrow need display sort option below the title (Screenshot: 1a-Mobile---Projects---First-Use-2.png)
- Revert the text when user click the up arrow
- Click Skip need load another modal window (Screenshot: 1a-Mobile---Projects---First-Use-Skip.png)
- Done button take to different modal window with checkmark icon (Screenshot: 1a-Mobile---Projects---First-Use-Success.png)
- After click OK button, modal window hidden and user see the Projects page
3). Projects
Screenshot: 1b-Mobile---Projects.png
- This is Projects page look and feel
- On header bar, there’s menu button, logo, sort, filter and search buttons
- Then Project cards displayed below the header
- Match the layout structure for each cards
Cards
- Click Whole cards should take user Project Detail page
- Image need covered the top area
- Some card placed the play button on top of image.
- There’s different border on each card based on health, match storyboard look
- Project title, month and refine button on the left side
- Health status will be different on each cards, refer storyboard look
- Sentiment area will be a slider, user can slide. There’s number information on the right side
- When user slide to red area, drag bar changed to red. Match the icon (Screenshot: 1b-Mobile---Projects-----Sad-Sentiment.png)
- When change to yellow area need turn to yellow (Screenshot: 1b-Mobile---Projects-----Neutral-Sentiment.png)
- Percentage Number on the right side should be relected the slide position
- Also make sure also works when slide to green area
- Then, there’s 3 lines of quick information
- Like, dislike and comments buttons placed on the bottom right
- Card rounded and shadow need created using css stylesheet
Menu Navigation
Screenshot: 1c-Mobile---Projects---Menu.png
- Click menu button need load the sidebar navigation
- user profile placed on top
- Match navigation menu
- As possible we need each menu linked to correct pages
Sort
Screenshot: 1d-Mobile---Projects---Sorting-Function-1.png
- This is sort function
- User need able to select 1 option at a time
- Ignore this storyboard screen (Screenshot: 1d-Mobile---Projects---Sorting-Function-2.png)
- Before the radio button you need place up and down arrow like on previous page (Screenshot: 1a-Mobile---Projects---First-Use-2.png)
- Re-use same function to display sort text below the title
- Cancel and Apply button need hide the modal
Filter
Screenshot: 1e-Mobile---Filter-Functionality.png
- This filter show up after click the filter button
- Modal window need placed centered of browser screen
- Match styling for checked on/off the checkboxes
- Cancel and Apply button need hide the modal
Search
Screenshot: 1f-Mobile---Projects---Search-Function.png
- This the search modal window
- Search input placed on top
- Search result list displayed on the bottom
- User can navigate by click Previous and Next button
4). PPM Information
Screenshot: 2-Mobile---PPM-Info.png
- User landed to this page from PPM Information menu on the left sidebar
- Match content like storyboard
5). Project Details
Screenshot: 3a-Mobile---Project-Details.png
- This is Project Detail page
- On header bar there’s Back, title and Edit button
- On Project image, you can see there’s camera icon on the bottom right
- Click this need load upload modal window
- Project title, sentiment, health, like and dislike buttons placed on the bottom
- Click like button need toggle the color to blue (Screenshot: 3b-Mobile---Project-Details--Like.png)
- Click dislike button need toggle the color to red (Screenshot: 3b-Mobile---Project-Details--Dislike.png)
- Then, tab navigation for different sections
- User need able to swipe to see another tab (Screenshot: 3c-Mobile---Project-Details--Navigation-Slide.png)
- Match active/inactive state for tab
- Click different tab will make the page scrolling to related sections
- When scrolling the page, tab remain fixed in place (Screenshot: 3h-Mobile---Project-Details---Scroll.png)
General
- Content using left and right side
- Match color differences and font styling
- In the bottom there are user information with thumbnail
Status
- Refine button there’s a “?” button
- Click the “?” need load the tooltips (Screenshot: 3d-Mobile---Project-Details---Tooltip-Status-Help.png)
- There’s view more button for every status
Health
- Display Current, overall and previous health
Sentiment
- Change to different color need load different icon for drag bar
- Number percentage placed on the right side
- Click “?” need load the tooltips (Screenshot: 3e-Mobile---Project-Details---Tooltip-Sentiment.png)
Gating
- Display same gates with Target, Approval Date and Approved Costs
- Click Each Approved Cost need load tooltips contains full price (Screenshot: 3f-Mobile---Project-Details---Tooltip-Gating.png)
Costs
- There are some bar chart with cost on the right side
- Click Cost need load tooltips contains full price (Screenshot: 3g-Mobile---Project-Details---Tooltip-Costs.png)
Risk and Issues
- Match content like storyboard
Next Steps
- Match content like storyboard
Comments
- This are consists of some comments
- User can type on the write comment area (Screenshot: 3i-Mobile---Project-Details---Comment-A.png, Screenshot: 3j-Mobile---Project-Details---Comment-B.png)
6). Likes Page
Screenshot: 4a-Likes-or-Dislikes-names.png
- When user click Like or Dislike buttons from Projects page user landed on this screen
- Display user thumbnail, title and email button on the right side
TABLET VERSION
Screenshot: 1a-Tablet.png
- This is how tablet screen look
- Projects card and details placed side by side
- Header bar also different, on the left side there’s Logo, sort and filter button
- On the right side, there’s user dropdown
- On main content area, left side can use fixed width
- And the detail page need use fluid width
- Click on Sort button need use same content like on mobile (Screenshot: 1b-Tablet--Sorting-Functionality.png & Screenshot: 1b-Tablet--Sorting-Functionality-2.png)
- Match selected style for the sort button
- Click filter need load Filter flyout (Screenshot: 1c-Tablet--Filter-Functionality.png)
- Search input placed o top of project cards
- When user type need load the flyout (Screenshot: 1d-Tablet--Search-Functionality.png)
- Click different cards need load different project detail
- Simulate different datasets for each project cards
- Use standard browser for scrollbar. Both left and right side can scrolling separately
- Functions will remain same for most element
- For the Project detail area, make sure you follow the fluid layout like storyboard
DESKTOP VERSION
Screenshot: 1a-Desktop.png
Screenshot: 1b-Desktop---Sorting-Functionality-1.png
Screenshot: 1b-Desktop---Sorting-Functionality-2.png
Screenshot: 1c-Desktop---Filter-Functionality.png
Screenshot: 1d-Desktop--Search-Function.png
- This is how desktop screen look
- Not much different than tablet look
- Desktop screen need use fluid width in most part
- Let us know if you need some clarification about desktop implementation
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient AngularJS/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.
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
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- 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