Challenge Overview
Welcome to Store Devices Health Monitoring Website Responsive UI Prototype challenge
The main task of this challenge is need to build the Store Devices Health Monitoring Website Responsive UI Prototype challenge!
The result of this prototype needs to implement best practice of responsive solution across required browsers. Prototype will be responsive only for couple of the screens (01 Login and 02 Dashboard) and for other screens will be focussing only on the desktop.
Let’s discuss any questions you have on challenge forum!
~
Important:
- For this prototype submission we need you to build using Angular4 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You also must use Bootstrap 3 to build the page layout
- Use SCSS/SASS for the submission styling
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
- You can set minimum 1366px as minimum width for desktop.
- Your prototype need to support fluid width as all pages will use full width of the screen
Required Screens:
Please also refer to the marvelapp for flow/interaction..
01 Login (This will be responsive i.e. it need to work in desktop, mobile and tablet):
Reference: D00_0-Login.png / T00_0-Login.png / P00_0-Login.png
- Header: Top links (About the app, contact us, FAQs) will be dead links
- Watch demo, should show a overlay with youtube video (we don’t have a screen for this one..please use modal window similar to D02_3-Store-Device-Summary-Dashboard.png)
- Know More will be a deadlink.
- User will be entering username and when user enters password (this will be masked)...clicking on “eye” icon in password will show/reveal the characters ..allow users to toggle on clicking this icon!
- Clicking on “Sign In” will take the user to D01_0-Stores-Device-Health-Dashboard.png
- There are couple of users in this application “general and admin”...so we need your help to simulate the flow for both the types of users (please see below)
General User:
- If user to enter “general” in the username and any password then we need to show the only the “02 Dashboard screen”
- so make sure to remove the “user management and device management” from navigation for these users
Admin:
- If user to enter “admin” in the username and any password then we need to show all the screens (dashboard, user management and device management)
02 Dashboard (This will be responsive i.e. it need to work in desktop, mobile and tablet)
Reference: D01_0-Stores-Device-Health-Dashboard.png / P01_0-Stores-Device-Health-Dashboard.png / T01_0-Stores-Device-Health-Dashboard.png
Header:
(Based on the user type logged in, corresponding navigation need to be shown)
- Logo will take user to D01_0-Stores-Device-Health-Dashboard.png
- Dashboard: Takes user to D01_0-Stores-Device-Health-Dashboard.png
- Device Management: Takes user to D03_0-Device-Management.png
- User Management: Takes user to D04_0-User-Management.png
- Logout icon: takes to D00_0-Login.png
Bar below header:
- Clicking on the country drop-down on the left shows the drop-down as in D01_3-Stores-Device-Health-Dashboard.png
- Country Drop-down: Clicking on “United States” shows D01_5-Stores-Device-Health-Dashboard.png and Clicking on “Canada” shows D01_4-Stores-Device-Health-Dashboard.png and Clicking on “North America” shows D01_0-Stores-Device-Health-Dashboard.png
- NOTE: When changing the country, you can see that corresponding number of stores changes in summary (right sidebar), number of markers in the map changes and also the number mentioned to the right of the country name - please make sure this is captured in your prototype.
- Search will allow user to enter text and click on the search icon (this will be a dead link).
Maps:
- Zoom in / out functionality should work
- Have custom markers as shown in the map, it can placed randomly (they need to be in red and blue color markers)
- In the top right side of the map, we have two buttons that filter the markers in the map, so clicking on “150 active stores” shows only the blue dots as shown in D01_2-Stores-Device-Health-Dashboard.png and clicking on “50 issue stores” shows only the red dots as shown in D01_1-Stores-Device-Health-Dashboard.png
- Hovering over a marker will need to show a pop-up as shown in D02_1-Store-Device-Summary-Dashboard.png
- Clicking on a marker shows highlights (changes the marker dot with a PIN icon in map) and shows details of the selected store in the right sidebar as shown in D02_0-Store-Device-Summary-Dashboard.png
Right Sidebar (Summary):
- Just follow the storyboards, all contents are static
- We need the charts as shown in the storyboard.
- At the bottom,there are 4 dots, this area just shows the hours from 00:00 to 23:00, at a time only 7hrs (i.e. 00:00, 01:00, 02:00, 03:00, 04:00, 05:00, 06:00) can be shown..clicking on the dot will allow user to swipe through these hours.
- When user clicks on "Today,Feburary 9, 2018", will show a date picker!
Right Sidebar (Store Details)
Reference: D02_0-Store-Device-Summary-Dashboard.png
- Clicking on the close icon in the right will hide this and show the default summary for that country (ex: D01_2-Stores-Device-Health-Dashboard.png)
- Clicking on “Store Details” at the the bottom will show the modal window as shown in D02_3-Store-Device-Summary-Dashboard.png (we need the sort to be working)
Footer:
- Clicking on the up arrow at the bottom right will take the user to top of the page.
03 Device Management:
Reference: D03_0-Device-Management.png
- Show the grid view as in the storyboard
- Should allow user to select each of the row by using the checkbox
- Clicking on the list icon in D03_0-Device-Management.png will show D03_1-Device-Management.png and clicking on grid icon in D03_1-Device-Management.png will show D03_0-Device-Management.png
- Pagination need to work
- User can click on the rows with small triangle to sort by ascending or descending
- Add Device: Will show the right sidebar as in D03_2-Device-Management.png
- Please rename the "Deactive device" as "Deactivate device".
- Deactivate device: User will be able to select and click Deactivate device..which will deactivate the selected devices as shown in D03_3-Device-Management.png
- Update device: Will show a view similar to D03_2-Device-Management.png but all contents will be entered and the title will be “Update Device” in the right sidebar.
Right Sidebar (Add New Device or Update Device):
Reference: D03_2-Add-Device.png
- Clicking on the close icon hides this view
- Follow the storyboards for all the fields as shown in the storyboard
- Submit/ Cancel will hides this view
04 User Management:
Reference: D04_0-User-Management.png
(NOTE: Layout is almost similar to that of device management screens just that content are changed)
- Show the grid as in the storyboard
- Should allow user to select each of the row by using the checkbox
- Clicking on the list icon in D04_0-User-Management.png will show D04_1-User-Management.png and clicking on grid icon in D04_1-User-Management.png will show D04_0-User-Management.png
- User can click on the rows with small triangle to sort by ascending or descending
- Pagination need to work
- Add user: Will show the right sidebar as in D04_2-User-Management.png
- Please rename the "Deactive user" as "Deactivate user".
- Deactivate user: User will be able to select and click Deactivate user..which will deactivate the selected users as shown in D04_3-User-Management.png
- Reset password will be a dummy link
- Update user: Will show a view similar to D04_2-User-Management.png but all contents will be entered and the title will be “Update Device” in the right sidebar.
Right Sidebar (Add New user or Update user):
Reference: D04_2-User-Management.png
- Clicking on the close icon hides this view
- Follow the storyboards for all the fields as shown in the storyboard
- Submit/ Cancel will hides this view
CODE REQUIREMENTS:
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.
CSS3
- Provide comments on the SCSS code. We need 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 code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling
Javascript
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Put clear comment/documentation for all AngularJS components
- 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/SVG
- 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.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
Client is using windows 7, so please make sure all browsers specific to that platform will make this prototype work
- IE11
- Microsoft Edge
- Firefox, safari and chrome latest version
- Chrome / Safari mobile browsers
- Documentation instructions to run your submission
- Heroku URL hosting your app
The main task of this challenge is need to build the Store Devices Health Monitoring Website Responsive UI Prototype challenge!
The result of this prototype needs to implement best practice of responsive solution across required browsers. Prototype will be responsive only for couple of the screens (01 Login and 02 Dashboard) and for other screens will be focussing only on the desktop.
Let’s discuss any questions you have on challenge forum!
~
Important:
- For this prototype submission we need you to build using Angular4 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You also must use Bootstrap 3 to build the page layout
- Use SCSS/SASS for the submission styling
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
- You can set minimum 1366px as minimum width for desktop.
- Your prototype need to support fluid width as all pages will use full width of the screen
Required Screens:
Please also refer to the marvelapp for flow/interaction..
01 Login (This will be responsive i.e. it need to work in desktop, mobile and tablet):
Reference: D00_0-Login.png / T00_0-Login.png / P00_0-Login.png
- Header: Top links (About the app, contact us, FAQs) will be dead links
- Watch demo, should show a overlay with youtube video (we don’t have a screen for this one..please use modal window similar to D02_3-Store-Device-Summary-Dashboard.png)
- Know More will be a deadlink.
- User will be entering username and when user enters password (this will be masked)...clicking on “eye” icon in password will show/reveal the characters ..allow users to toggle on clicking this icon!
- Clicking on “Sign In” will take the user to D01_0-Stores-Device-Health-Dashboard.png
- There are couple of users in this application “general and admin”...so we need your help to simulate the flow for both the types of users (please see below)
General User:
- If user to enter “general” in the username and any password then we need to show the only the “02 Dashboard screen”
- so make sure to remove the “user management and device management” from navigation for these users
Admin:
- If user to enter “admin” in the username and any password then we need to show all the screens (dashboard, user management and device management)
02 Dashboard (This will be responsive i.e. it need to work in desktop, mobile and tablet)
Reference: D01_0-Stores-Device-Health-Dashboard.png / P01_0-Stores-Device-Health-Dashboard.png / T01_0-Stores-Device-Health-Dashboard.png
Header:
(Based on the user type logged in, corresponding navigation need to be shown)
- Logo will take user to D01_0-Stores-Device-Health-Dashboard.png
- Dashboard: Takes user to D01_0-Stores-Device-Health-Dashboard.png
- Device Management: Takes user to D03_0-Device-Management.png
- User Management: Takes user to D04_0-User-Management.png
- Logout icon: takes to D00_0-Login.png
Bar below header:
- Clicking on the country drop-down on the left shows the drop-down as in D01_3-Stores-Device-Health-Dashboard.png
- Country Drop-down: Clicking on “United States” shows D01_5-Stores-Device-Health-Dashboard.png and Clicking on “Canada” shows D01_4-Stores-Device-Health-Dashboard.png and Clicking on “North America” shows D01_0-Stores-Device-Health-Dashboard.png
- NOTE: When changing the country, you can see that corresponding number of stores changes in summary (right sidebar), number of markers in the map changes and also the number mentioned to the right of the country name - please make sure this is captured in your prototype.
- Search will allow user to enter text and click on the search icon (this will be a dead link).
Maps:
- Zoom in / out functionality should work
- Have custom markers as shown in the map, it can placed randomly (they need to be in red and blue color markers)
- In the top right side of the map, we have two buttons that filter the markers in the map, so clicking on “150 active stores” shows only the blue dots as shown in D01_2-Stores-Device-Health-Dashboard.png and clicking on “50 issue stores” shows only the red dots as shown in D01_1-Stores-Device-Health-Dashboard.png
- Hovering over a marker will need to show a pop-up as shown in D02_1-Store-Device-Summary-Dashboard.png
- Clicking on a marker shows highlights (changes the marker dot with a PIN icon in map) and shows details of the selected store in the right sidebar as shown in D02_0-Store-Device-Summary-Dashboard.png
Right Sidebar (Summary):
- Just follow the storyboards, all contents are static
- We need the charts as shown in the storyboard.
- At the bottom,there are 4 dots, this area just shows the hours from 00:00 to 23:00, at a time only 7hrs (i.e. 00:00, 01:00, 02:00, 03:00, 04:00, 05:00, 06:00) can be shown..clicking on the dot will allow user to swipe through these hours.
- When user clicks on "Today,Feburary 9, 2018", will show a date picker!
Right Sidebar (Store Details)
Reference: D02_0-Store-Device-Summary-Dashboard.png
- Clicking on the close icon in the right will hide this and show the default summary for that country (ex: D01_2-Stores-Device-Health-Dashboard.png)
- Clicking on “Store Details” at the the bottom will show the modal window as shown in D02_3-Store-Device-Summary-Dashboard.png (we need the sort to be working)
Footer:
- Clicking on the up arrow at the bottom right will take the user to top of the page.
03 Device Management:
Reference: D03_0-Device-Management.png
- Show the grid view as in the storyboard
- Should allow user to select each of the row by using the checkbox
- Clicking on the list icon in D03_0-Device-Management.png will show D03_1-Device-Management.png and clicking on grid icon in D03_1-Device-Management.png will show D03_0-Device-Management.png
- Pagination need to work
- User can click on the rows with small triangle to sort by ascending or descending
- Add Device: Will show the right sidebar as in D03_2-Device-Management.png
- Please rename the "Deactive device" as "Deactivate device".
- Deactivate device: User will be able to select and click Deactivate device..which will deactivate the selected devices as shown in D03_3-Device-Management.png
- Update device: Will show a view similar to D03_2-Device-Management.png but all contents will be entered and the title will be “Update Device” in the right sidebar.
Right Sidebar (Add New Device or Update Device):
Reference: D03_2-Add-Device.png
- Clicking on the close icon hides this view
- Follow the storyboards for all the fields as shown in the storyboard
- Submit/ Cancel will hides this view
04 User Management:
Reference: D04_0-User-Management.png
(NOTE: Layout is almost similar to that of device management screens just that content are changed)
- Show the grid as in the storyboard
- Should allow user to select each of the row by using the checkbox
- Clicking on the list icon in D04_0-User-Management.png will show D04_1-User-Management.png and clicking on grid icon in D04_1-User-Management.png will show D04_0-User-Management.png
- User can click on the rows with small triangle to sort by ascending or descending
- Pagination need to work
- Add user: Will show the right sidebar as in D04_2-User-Management.png
- Please rename the "Deactive user" as "Deactivate user".
- Deactivate user: User will be able to select and click Deactivate user..which will deactivate the selected users as shown in D04_3-User-Management.png
- Reset password will be a dummy link
- Update user: Will show a view similar to D04_2-User-Management.png but all contents will be entered and the title will be “Update Device” in the right sidebar.
Right Sidebar (Add New user or Update user):
Reference: D04_2-User-Management.png
- Clicking on the close icon hides this view
- Follow the storyboards for all the fields as shown in the storyboard
- Submit/ Cancel will hides this view
CODE REQUIREMENTS:
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.
CSS3
- Provide comments on the SCSS code. We need 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 code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling
Javascript
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Put clear comment/documentation for all AngularJS components
- 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/SVG
- 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.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
Client is using windows 7, so please make sure all browsers specific to that platform will make this prototype work
- IE11
- Microsoft Edge
- Firefox, safari and chrome latest version
- Chrome / Safari mobile browsers
Final Submission Guidelines
- UI Prototype source code- Documentation instructions to run your submission
- Heroku URL hosting your app