Challenge Overview
Welcome to Living Progress - Sheventures - Responsive Desktop UI Prototype Challenge
The main task of this project is to create the Living Progress - Sheventures Responsive UI Prototype based on the provided PSD Storyboard design with focus on Desktop layout
For this challenge you just need create prototype submission to support responsive on Desktop platform. In the end of this challenge we need solid UI prototype result with best practice solutions
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
https://drive.google.com/folderview?id=0B31nrwic_6z0dk51SEUwN3JWOEk&usp=sharing
Storyboard.zip - Storyboard Design
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use HTML5/CSS3/Javascript as base of this UI Prototype submission
- 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 SCSS/SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Rounded, Shadow effect as possible need created on CSS stylesheet instead of image based
- Let discuss any of your questions and let us know if need clarification.
- As far as possible, we need all pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Match form element styling like storyboard look and feel.
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!
- Also you can use open source library like jQuery.
Page Requirements:
Please go through the requirements and look to capture all interactions as mentioned below..
1). Landing Page
Screenshot: 00_Landing.jpg
- Landing page before user logged in
- Background image need covered whole browser screen
- Main content remain centered like storyboard look
- There’s floating dots button on the right side of screen
- User can click the dots to automatically scroll down/up the related section
- When user scrolling then the floating dots need reflecting the position
- Page content divided by these sections:
Header
- SheVentures logo placed on the left side
- Login and Register button placed on the right side
Introduction
- Background need covered browser screen
- Get Started button need placed centered
What is SheVentures
- Match content
What you will learn
- 3 boxes contains icons, title and some quick description
Quote
- Build auto rotate Quote slide
- Suggest the animation effect
- Active quote using colored image
- Inactive using grey colored
Credits
- There’s 3 boxes with client logo
- Box need created using css stylesheet
- Hover on thumbnail need load more information (Screenshot: 08_About2.jpg)
Get Started Today
- Place both buttons centered
Footer
- Footer divided by left and right side
- match content like storyboard look
Login Modal Window
Screenshot: 01_Enter Account.jpg
- Click Enter Account need load the modal window
- X button need close the modal
- There’s tab for Login and Register
- Match form like storyboard look
- Put social buttons below the Login
- Login Button take user to Dashboard
Register Tab
Screenshot: 01_Enter Account1.jpg
- Match form content like storyboard
- There’s a checkbox for I Agree to Terms & Conditions
- Register Button placed on the bottom and take user to Terms and Condition Modal Window
- Play Anonymous take user to Terms and Condition Modal Window explained below
Terms and Condition Modal Window
Screenshot: 01_Enter Account2.jpg
- Match content like storyboard look
- Back Button take user to Landing Page
2). Dashboard
Screenshot: 02_Dashboard.jpg
- For this Dashboard page, you need make all layout using fluid width on any browser screen
- You can see on the left sidebar, bottom part button always stick to the browser screen
- Left side will use same height like browser height
Left Sidebar
- For the left sidebar, you can use fixed width
- Match styling for active/inactive menu navigation
- This is sample Dashboard approach on actual desktop screen (Screenshot: 02_Dashboard1.jpg)
- There’s user thumbnails placed on the bottom of browser even when browser height changed
- User can expand the left sidebar by press top button (Screenshot: 02_Dashboard0.jpg)
Content Area
- Content area need use fluid width
- Completed Stories & Current Stories tabs navigation placed on top.
- Click this tab need let user load different tab. Put dead link for now
- Match active/inactive state for tab
Slideshow
- This is slideshow area
- No need auto playing
- User can navigate by press left and right arrow to change the slide
- Start and View Chapters Button placed centered
- Start button take user to Story Selection page as explained below
- View Chapter button take user to Chapter Selection page as explained below
Popular Resources
- This area build as 2 columns layout
- With icons, title and other information
- Title need clickable, put dead link
- Match different icons and content like storyboard
FAQ
- All text are links for FAQ
- Click title need expand the answers.
- Create some dummy content
Latest Achievements
- User can expand by click title and arrow button
- My badges will filled with different graphic
Friends Who Play This
- User can expand by click title and arrow button
- This area will contains some user thumbnails
- Make sure thumbnails use fluid layout
Leaderboard
- Leaderboard placed on table layout
- Match content and style for the table
- Expand Leaderboard link need load another rows
3). Story Selection
Screenshot: 02_Dashboard0_1.jpg
- This is Story Selection screen
- Match breadcrumb like storyboard
- Match active state on the left navigation
- Top area will re-use same slideshow function, match content like storyboard
- Start Button & Explore Chapters take user to Chapter Selection
- For Stories area, there are thumbnails with fluid layout
- On the right side of title there’s list and grid view button, put dead links
- Match thumbnail structure from image, tooltips on the right side
- Click the “!” need load additional information like this above the image thumbnail (Screenshot: 02_Dashboard0_3.jpg)
- Then below the thumbnail, there’s title, badge and star icons
- Click each thumbnail need take user to Chapter selection
- Notice on the bottom, there’s Story Locked with black overlay background.
- Put dead link for Locked story and make sure tooltips not works
4). Chapter Selection
Screenshot: 02_Dashboard0_2.jpg
- This is Story Selection screen
- Match breadcrumb like storyboard
- Start Button & Explore Chapters, Create Characters take user to Create Character button
- For Chapters area, there are thumbnails with fluid layout
- On the right side of title there’s list and grid view button, put dead links
- Match thumbnail structure from image, tooltips on the right side
- Click the “!” need load additional information like this above the image thumbnail (Screenshot: 02_Dashboard0_3.jpg)
- Then below the thumbnail, there’s title, badge and star icons
- Click each thumbnail need take user to Create Character selection
5). Create Character
Screenshot: 03_Create Character.jpg
- This is create character screen
- User can navigate to different tab content
- Match active/Active
- Start Over will take user back to Body type
- Finish & Skip These button take user to Story page explained below
Body type
- User can change to different gender
- User can choose body type, show us selected/unselected style
- You need build the image selection by using image based
- Ignore the implementation of Undo button
- Just put plain graphic on the right side
Skin Tone
Screenshot: 03_Create Character1.jpg
- User can choose the skin tone
Outfit
Screenshot: 03_Create Character2.jpg
- User can select outfit
- Match active/inactive state
- User can click the dots to see the another outfit set
- Use different image on the right side like storyboard look
Accessories
Screenshot: 03_Create Character3.jpg
- User can select Accessories
- Match active/inactive state
- User can click the dots to see the other Accessories set
- Use different image on the right side like storyboard look
5). Story
Screenshot: 04_Story.jpg
- This is Story page look
- Match breadcrumbs and title on top
- Re-use completed slideshow function
- On grey background area, there’s what you can earn and friends who play this information
- Hover on What you can earn icons need load the tooltip (Screenshot: 04_Story1.jpg)
- Apply tooltips to another icons
- Under Scenes, user see scenes in grid view
- Put dead link to List View
- Play button placed on top right of each thumbnail
- Click whole box need take user to Story Detail explained below
- There’s locked version on the bottom of view
6). Story Detail
Screenshot: 05_Story Detail.jpg
- Match breadcrumb like storyboard look
- Some thumbnails scattered on page
- User can select each thumbnail
- Create blue border as hover state
- Click thumbnail need load Scene Detail (Screenshot: 05_Story Detail1.jpg)
- Some text placed on text bubbles. Bubble text can be image based
- Background need covered whole browser screen
- You need slice girl image as separated graphic
- There’s bar on top with Points and $ information
- User can click Prev and Next button to navigate to each screen
- Click Start button need load another screen (Screenshot: 05_Story Detail2.jpg)
- Text part need to be editable
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail3.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail4.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail5_1.jpg)
- User need choose between Yes and now buttons
- Hover state for yes button (Screenshot: 05_Story Detail5.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail6_1.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail6_2.jpg)
- Match overlay background
- Click Next button, this screen display other options user need to picked (Screenshot: 05_Story Detail6_3.jpg)
- Then next screen load (Screenshot: 05_Story Detail6.jpg)
- New background image loaded as separated graphic, text placed on the bottom
- Click next button then need load failed message (Screenshot: 05_Story Detail7_1.jpg)
- Click Retry Scene take user to passed screen
- This is passed screen (Screenshot: 05_Story Detail7.jpg)
- Match icons, text and button like storyboard
- Hover on each icons need load the tooltips (Screenshot: 05_Story Detail8.jpg)
- Return to Chapter button take user to Chapter page
- Learn More button take user to can be dead link
7). My Profile
Screenshot: 07_My Profilw.jpg
- User landed to My profile after click user icon from the left sidebar navigation
- Match active/inactive state
- On the right side of My Profile title need updated to Delete Profile. Ignore storyboard look
- Delete button need load confirmation modal window (Screenshot: 07_My Profilw2.jpg)
- For My Progress, There are thumbnails for Story
- My Badges placed on the bottom
- Hover need on badges load the tooltips
8). About
Screenshot: 08_About.jpg
- This is About page
- User landed on this page from the “!” button on the left sidebar navigation
- Some total Informations placed below the top background image
- Credits area is for clients logo
- Hover on thumbnail need load more information (Screenshot: 08_About2.jpg)
- Awards area contains some thumbnails
- Use auto looping slideshow
- Dots pagination need change to different slideshow set
- Hover on thumbnail need load more information (Screenshot: 08_About1.jpg)
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 Pixel Precisions, 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
- 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.
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.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
The main task of this project is to create the Living Progress - Sheventures Responsive UI Prototype based on the provided PSD Storyboard design with focus on Desktop layout
For this challenge you just need create prototype submission to support responsive on Desktop platform. In the end of this challenge we need solid UI prototype result with best practice solutions
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Challenge Downloadablehttps://drive.google.com/folderview?id=0B31nrwic_6z0dk51SEUwN3JWOEk&usp=sharing
Storyboard.zip - Storyboard Design
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use HTML5/CSS3/Javascript as base of this UI Prototype submission
- 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 SCSS/SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Rounded, Shadow effect as possible need created on CSS stylesheet instead of image based
- Let discuss any of your questions and let us know if need clarification.
- As far as possible, we need all pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Match form element styling like storyboard look and feel.
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!
- Also you can use open source library like jQuery.
Page Requirements:
Please go through the requirements and look to capture all interactions as mentioned below..
1). Landing Page
Screenshot: 00_Landing.jpg
- Landing page before user logged in
- Background image need covered whole browser screen
- Main content remain centered like storyboard look
- There’s floating dots button on the right side of screen
- User can click the dots to automatically scroll down/up the related section
- When user scrolling then the floating dots need reflecting the position
- Page content divided by these sections:
Header
- SheVentures logo placed on the left side
- Login and Register button placed on the right side
Introduction
- Background need covered browser screen
- Get Started button need placed centered
What is SheVentures
- Match content
What you will learn
- 3 boxes contains icons, title and some quick description
Quote
- Build auto rotate Quote slide
- Suggest the animation effect
- Active quote using colored image
- Inactive using grey colored
Credits
- There’s 3 boxes with client logo
- Box need created using css stylesheet
- Hover on thumbnail need load more information (Screenshot: 08_About2.jpg)
Get Started Today
- Place both buttons centered
Footer
- Footer divided by left and right side
- match content like storyboard look
Login Modal Window
Screenshot: 01_Enter Account.jpg
- Click Enter Account need load the modal window
- X button need close the modal
- There’s tab for Login and Register
- Match form like storyboard look
- Put social buttons below the Login
- Login Button take user to Dashboard
Register Tab
Screenshot: 01_Enter Account1.jpg
- Match form content like storyboard
- There’s a checkbox for I Agree to Terms & Conditions
- Register Button placed on the bottom and take user to Terms and Condition Modal Window
- Play Anonymous take user to Terms and Condition Modal Window explained below
Terms and Condition Modal Window
Screenshot: 01_Enter Account2.jpg
- Match content like storyboard look
- Back Button take user to Landing Page
2). Dashboard
Screenshot: 02_Dashboard.jpg
- For this Dashboard page, you need make all layout using fluid width on any browser screen
- You can see on the left sidebar, bottom part button always stick to the browser screen
- Left side will use same height like browser height
Left Sidebar
- For the left sidebar, you can use fixed width
- Match styling for active/inactive menu navigation
- This is sample Dashboard approach on actual desktop screen (Screenshot: 02_Dashboard1.jpg)
- There’s user thumbnails placed on the bottom of browser even when browser height changed
- User can expand the left sidebar by press top button (Screenshot: 02_Dashboard0.jpg)
Content Area
- Content area need use fluid width
- Completed Stories & Current Stories tabs navigation placed on top.
- Click this tab need let user load different tab. Put dead link for now
- Match active/inactive state for tab
Slideshow
- This is slideshow area
- No need auto playing
- User can navigate by press left and right arrow to change the slide
- Start and View Chapters Button placed centered
- Start button take user to Story Selection page as explained below
- View Chapter button take user to Chapter Selection page as explained below
Popular Resources
- This area build as 2 columns layout
- With icons, title and other information
- Title need clickable, put dead link
- Match different icons and content like storyboard
FAQ
- All text are links for FAQ
- Click title need expand the answers.
- Create some dummy content
Latest Achievements
- User can expand by click title and arrow button
- My badges will filled with different graphic
Friends Who Play This
- User can expand by click title and arrow button
- This area will contains some user thumbnails
- Make sure thumbnails use fluid layout
Leaderboard
- Leaderboard placed on table layout
- Match content and style for the table
- Expand Leaderboard link need load another rows
3). Story Selection
Screenshot: 02_Dashboard0_1.jpg
- This is Story Selection screen
- Match breadcrumb like storyboard
- Match active state on the left navigation
- Top area will re-use same slideshow function, match content like storyboard
- Start Button & Explore Chapters take user to Chapter Selection
- For Stories area, there are thumbnails with fluid layout
- On the right side of title there’s list and grid view button, put dead links
- Match thumbnail structure from image, tooltips on the right side
- Click the “!” need load additional information like this above the image thumbnail (Screenshot: 02_Dashboard0_3.jpg)
- Then below the thumbnail, there’s title, badge and star icons
- Click each thumbnail need take user to Chapter selection
- Notice on the bottom, there’s Story Locked with black overlay background.
- Put dead link for Locked story and make sure tooltips not works
4). Chapter Selection
Screenshot: 02_Dashboard0_2.jpg
- This is Story Selection screen
- Match breadcrumb like storyboard
- Start Button & Explore Chapters, Create Characters take user to Create Character button
- For Chapters area, there are thumbnails with fluid layout
- On the right side of title there’s list and grid view button, put dead links
- Match thumbnail structure from image, tooltips on the right side
- Click the “!” need load additional information like this above the image thumbnail (Screenshot: 02_Dashboard0_3.jpg)
- Then below the thumbnail, there’s title, badge and star icons
- Click each thumbnail need take user to Create Character selection
5). Create Character
Screenshot: 03_Create Character.jpg
- This is create character screen
- User can navigate to different tab content
- Match active/Active
- Start Over will take user back to Body type
- Finish & Skip These button take user to Story page explained below
Body type
- User can change to different gender
- User can choose body type, show us selected/unselected style
- You need build the image selection by using image based
- Ignore the implementation of Undo button
- Just put plain graphic on the right side
Skin Tone
Screenshot: 03_Create Character1.jpg
- User can choose the skin tone
Outfit
Screenshot: 03_Create Character2.jpg
- User can select outfit
- Match active/inactive state
- User can click the dots to see the another outfit set
- Use different image on the right side like storyboard look
Accessories
Screenshot: 03_Create Character3.jpg
- User can select Accessories
- Match active/inactive state
- User can click the dots to see the other Accessories set
- Use different image on the right side like storyboard look
5). Story
Screenshot: 04_Story.jpg
- This is Story page look
- Match breadcrumbs and title on top
- Re-use completed slideshow function
- On grey background area, there’s what you can earn and friends who play this information
- Hover on What you can earn icons need load the tooltip (Screenshot: 04_Story1.jpg)
- Apply tooltips to another icons
- Under Scenes, user see scenes in grid view
- Put dead link to List View
- Play button placed on top right of each thumbnail
- Click whole box need take user to Story Detail explained below
- There’s locked version on the bottom of view
6). Story Detail
Screenshot: 05_Story Detail.jpg
- Match breadcrumb like storyboard look
- Some thumbnails scattered on page
- User can select each thumbnail
- Create blue border as hover state
- Click thumbnail need load Scene Detail (Screenshot: 05_Story Detail1.jpg)
- Some text placed on text bubbles. Bubble text can be image based
- Background need covered whole browser screen
- You need slice girl image as separated graphic
- There’s bar on top with Points and $ information
- User can click Prev and Next button to navigate to each screen
- Click Start button need load another screen (Screenshot: 05_Story Detail2.jpg)
- Text part need to be editable
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail3.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail4.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail5_1.jpg)
- User need choose between Yes and now buttons
- Hover state for yes button (Screenshot: 05_Story Detail5.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail6_1.jpg)
- Click Next button on top right then navigate to next screen (Screenshot: 05_Story Detail6_2.jpg)
- Match overlay background
- Click Next button, this screen display other options user need to picked (Screenshot: 05_Story Detail6_3.jpg)
- Then next screen load (Screenshot: 05_Story Detail6.jpg)
- New background image loaded as separated graphic, text placed on the bottom
- Click next button then need load failed message (Screenshot: 05_Story Detail7_1.jpg)
- Click Retry Scene take user to passed screen
- This is passed screen (Screenshot: 05_Story Detail7.jpg)
- Match icons, text and button like storyboard
- Hover on each icons need load the tooltips (Screenshot: 05_Story Detail8.jpg)
- Return to Chapter button take user to Chapter page
- Learn More button take user to can be dead link
7). My Profile
Screenshot: 07_My Profilw.jpg
- User landed to My profile after click user icon from the left sidebar navigation
- Match active/inactive state
- On the right side of My Profile title need updated to Delete Profile. Ignore storyboard look
- Delete button need load confirmation modal window (Screenshot: 07_My Profilw2.jpg)
- For My Progress, There are thumbnails for Story
- My Badges placed on the bottom
- Hover need on badges load the tooltips
8). About
Screenshot: 08_About.jpg
- This is About page
- User landed on this page from the “!” button on the left sidebar navigation
- Some total Informations placed below the top background image
- Credits area is for clients logo
- Hover on thumbnail need load more information (Screenshot: 08_About2.jpg)
- Awards area contains some thumbnails
- Use auto looping slideshow
- Dots pagination need change to different slideshow set
- Hover on thumbnail need load more information (Screenshot: 08_About1.jpg)
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 Pixel Precisions, 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
- 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.
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.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser