Challenge Overview
Welcome to "GUARD - Crimson Platform UI Prototype challenge". In this UI Prototype Challenge, we need your help to create an HTML5 prototype for our Crimson Portal that able to give our user more easy experience to view, manipulate and download their inspection data and inspection reports. Read more details below and Join us in this challenge!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
Crimson is a web application that allows customers to view, manipulate and download their inspection data and inspection reports. Customers can be set to be on Crimson from the individual systems, whereby a POT is created in Crimson for the users and their reports are migrated.
Customers benefit from Crimson as they get the interface free of cost. Also, the report is available on Crimson much quicker as compared to the time it takes to reach them in the conventional snail mail.
A customer gets benefit from Crimson by not having to file the reports and maintain them for future reference in case of paper reports, whereas if they were on Crimson, they just need to log on to the site and all the reports appear on the site and can be easily searched.
Crimson is accessed by Approximately 100 internal office based staff performing Underwriting/Sales roles across the Birmingham, Leeds, Croydon and Manchester Offices as well as home-based Inspection Engineers and there are Approximately 58,000 external customers who access this web application.
Crimson holds Statutory Inspection reports such as the inspection of lifts, machinery, pressure systems, power presses, electrical plant, wiring and LEV (local exhaust ventilation) reports.
Primary Goal
- Create a UI Prototype for our Crimson Portal based on provided Storyboard.
- Please match the storyboards as close as possible.
- Please comment your HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Target Devices
- Desktop: 1366px width with Height adjusted accordingly
Target Audience
- External customers (commercial users rather than a consumer. Users range from different disciplines; health & safety, compliance, insurance, maintenance, broker, administrator etc, but the intended audience are from the engineering discipline)
- Brokers
- Internal users
Competition Task Overview
The main task of this competition is to develop an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Notes:
- We will provide additional $100 as bonus for the 1st place at the end of this challenge
- We will use Angular 5 and Bootstrap as the main technology
- Do not hardcode the data inside your HTML files, for any Data content, please put them in JSON files.
- Replicate the design of the approved Storyboards (PSD Files) for all page.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- The width of the pages is fluid. It will expand and contract based on the screen size and occupy full width. You need to support a width of 1366px and above.
- You are expected to follow best practices in Angular development
- Use texts wherever possible. Images are only for icons and logos.
- Provide documentation on how to deploy your submission in the server and heroku.
Screen Specifications
- Desktop is priority
- In another view (mobile, tablet), the layout still needs to look good. (Nice to have – Should not affect the scoring in review phase)
- Layout width should be fluid.
Specific HTML/CSS/JavaScript Requirements
HTML/HTML5
- Provide comments on the page elements 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 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 on 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 creating 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
- We recommend a combination of Angular 5 and Bootstrap for this challenge. Make sure to follow the best practices for the technology
- All JavaScript used must not have any copyrights to any 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.
- 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 (Latest versions of)
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
Documentation
Google Drive: https://drive.google.com/file/d/17zH_nQoas8q6eYVneMWD5xtO0gNqXFJu/view?usp=sharing
- Storyboards
- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial
- Source Code
- README File, contains how to deploy the submission and server environment
Final Submission
- For each member, the final submission should be uploaded to Online Review Tool
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
Crimson is a web application that allows customers to view, manipulate and download their inspection data and inspection reports. Customers can be set to be on Crimson from the individual systems, whereby a POT is created in Crimson for the users and their reports are migrated.
Customers benefit from Crimson as they get the interface free of cost. Also, the report is available on Crimson much quicker as compared to the time it takes to reach them in the conventional snail mail.
A customer gets benefit from Crimson by not having to file the reports and maintain them for future reference in case of paper reports, whereas if they were on Crimson, they just need to log on to the site and all the reports appear on the site and can be easily searched.
Crimson is accessed by Approximately 100 internal office based staff performing Underwriting/Sales roles across the Birmingham, Leeds, Croydon and Manchester Offices as well as home-based Inspection Engineers and there are Approximately 58,000 external customers who access this web application.
Crimson holds Statutory Inspection reports such as the inspection of lifts, machinery, pressure systems, power presses, electrical plant, wiring and LEV (local exhaust ventilation) reports.
Primary Goal
- Create a UI Prototype for our Crimson Portal based on provided Storyboard.
- Please match the storyboards as close as possible.
- Please comment your HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Target Devices
- Desktop: 1366px width with Height adjusted accordingly
Target Audience
- External customers (commercial users rather than a consumer. Users range from different disciplines; health & safety, compliance, insurance, maintenance, broker, administrator etc, but the intended audience are from the engineering discipline)
- Brokers
- Internal users
Competition Task Overview
The main task of this competition is to develop an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Notes:
- We will provide additional $100 as bonus for the 1st place at the end of this challenge
- We will use Angular 5 and Bootstrap as the main technology
- Do not hardcode the data inside your HTML files, for any Data content, please put them in JSON files.
- Replicate the design of the approved Storyboards (PSD Files) for all page.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- The width of the pages is fluid. It will expand and contract based on the screen size and occupy full width. You need to support a width of 1366px and above.
- You are expected to follow best practices in Angular development
- Use texts wherever possible. Images are only for icons and logos.
- Provide documentation on how to deploy your submission in the server and heroku.
Screen Requirements
General Requirements
- General, remove all dots (.) separator to hypen (-)
- 'All Site' & 'My Sites' toggle option should be available in all Maps (widget and pages) and simulated
- Use Google Maps for the map elements
- Use Google Maps for the map elements
- In Inspections/Sites/Schedule pages - filter - the Lapse checkbox field - text should be 'Show Lapsed' instead of 'Show Lapse'.
- The Map Location marker should be Black in color throughout the application
- Need a tooltip over any icons (bell and circle) - Stating Colour and Type
- Need to see several new icons in the calendar and maps:
-- Black Circle --> If Lapsed Sites (applicable for MySites & All sites), where ever lapsed Sites filter is there, There black circle should be displayed to indicate lapsed site.
-- Grey Square --> Sites for which user has no Access (applicable Only for ALL sites)
-- White Bell --> Sites with No Reminders (It should be applicable for both the toggles only for My sites)
-- Above functionalities will be implemented only in Map (In calendar also we will have reminders, but this won't be applicable)
-- Accordingly legends needs to be taken care.
- Make the following as Hyperlinks for navigation:
-- Reminder icon (not on schedules page) - Site Events
-- Reminder icon (on schedules page) - Item (No page yet)
-- Site Status icon - Inspections
-- Item No. - Item (No page yet)
-- Schedule No. – Schedules, correct tab
-- Site Name - Site Details
-- Chart Drill Down - to filtered item list (No page yet)
-- Report Status - Open report or item (no page yet)
-- Map pop up, link to site events tab from events total and site from site details
-- Calendar – Click Date on date in calendar to navigate to different dates or 'Today'
-- Sites - Page navigation for Sites grid
0) Navigation
Reference: 00_0-Navigation.png to 00_11-Navigation.png
- The left menu sidebar can expand/hide by clicking the blue background
- Hovering the left sidebar menu will open tooltip message that explain the menu purpose (00_1-Navigation.png)
- Clicking the profile menu will open drop down navigation, 'Preferences, Admin, Help, Sign Out' (00_2-Navigation.png), and when click on Admin menu, it should open sub navigation 'Users, Communities, Schedules, Zurich'.
- Clicking the (i) icon in each widget will show tooltip explain the widget functionality (00_3-Navigation.png), note the screenshot is on wrong icon, it should be on (i) icon.
- Clicking the table item status will show tooltip explaining the item status functionality (00_4-Navigation.png)
- Clicking on the calendar date will show the status of events (00_5-Navigation.png)
- Clicking on the icon on maps will open the location details (00_6-Navigation.png)
- Clicking on the gear icon in each widget will show the widget setting (00_7-Navigation.png, 00_8-Navigation.png), note the screenshot is on wrong icon, it should be on gear icon.
- The gear icon in each widget have different setting, depends on the widget type (00_9-Navigation.png, 00_10-Navigation.png)
- Clicking on the legend on a map widget will open tooltip showing all legend details (00_11-Navigation.png)
1) Onboarding Screen
Reference: _0-Onboarding.png to _6-Onboarding.png
- This set of screens will appear for first time user only
- If user click the checkbox "Don't show tour again", the next time user open the app, this screen no longer needs to be appear
- Clicking "Skip Tour" button will close the onboarding screens
- Clicking Next and Prev link will simulate all button, link, inspection result, filter, and action functionality
- in "_6-Onboarding.png", the dropdown menu 'Download Excel' and 'Download PDF' should be created as Sub menus, so it should be 'Download' -> 'Excel' then 'PDF'
2) Home Screen
Reference: 01_0-Home-Screen.png to 01_10-Home-Screen.png
- This screen will be available after the user successfully logins to the web application
- This screen should show a summary of selected item information within the platform. It contains a bank of widgets customized by the user. The user can customize this page and pick which widgets are useful for him.
- User will be able to manage the widget by clicking the "manage" button, for example, add/remove widget, repositioning widget, (01_4-Home-Screen.png, 01_6-Home-Screen.png, 01_7-Home-Screen.png, 01_8-Home-Screen.png, 01_9-Home-Screen.png)
- Check Navigation requirements above to see the widget interactions.
- Please include widget Calendar, Recent Site Activity, Not Examined, Sites, Item Status, and Inspection Due in the home screen by default
- Chart under Not Examined, Item Status, and Inspection Due does not need to be simulated (just put placeholder for now)
- Simulate the widget interactions for Calendar, Site, and Recent Site activity (resize, filter, etc)
- Hovering any chart will open tooltip explaining the data content in the chart
- Calendar widget - Click Date on date in calendar to navigate to different dates or 'Today'
- Recent Site Activity, change 'Date of Visit' column header to 'Date'
- Recent Site Activity, Item Status Grids - move 'BD' to be first amber color column (BD, OKobs, OKst, PD)
- Recent Site Activity, Item Status Grids - move 'OK' before 'DL' in green column
- Inspection Due widget, rename the title to 'Inspections Due'
- MAP widget - in Popup, Remove 'See Details; link and hyperlink the site names instead.
3) Data Screen
Reference: 02_0-Data-Screen.png to 02_5-Data-Screen.png
- Hovering any chart will open tooltip that show the same content like legend on the chart (02_2-Data-Screen.png)
- The "Manage" functionality is the same like in the home screen (02_1-Data-Screen.png)
- Need ability to see the data in chart and list view
- Ability to see the data in number or percentage
- The widget interaction in Data screen also needs to be simulated.
- User will be able to choose graph/chart type that they want to see in each widget
- Ability to resize the widget
- For now, all the chart does not need to be simulated, just provide mockup for the chart.
4) Inspection Screen
Reference: 03_0-Inspections-Screen.png to 03_4-Inspections-Screen.png
- This screen shows the inspection data associated with a site. Due dates are highlighted with the red, amber, green color code. Items column shows the number of items (Electrical systems (E1), Lifts (L1), etc.) that have to be inspected. Columns AE to PD stands for a status of these inspected items.
- Show list of Inspections data in this screen
- Ability to hide/expand the site (03_2-Inspections-Screen.png)
- This screen to give a summary of all the locations when the next inspection is due. It is accessible from the Inspection tab.
- Needs filter features
- Needs Sorting filter
5) Sites Screen
Reference: 04_0-Sites-Screen.png to 04_9-Sites-Screen.png
- This screen gives a view of the different sites.
- Ability to expand the map
- Ability to zoom in/out the map
- Filter ability (by tab, by filter form)
- Sorting feature
- Clicking on the dot in the map will open tool tip contain summary information about the site.
- Clicking the content list or the dot will bring user to site details screen.
- MAP - in Popup, Remove 'See Details; link and hyperlink the site names instead.
- Sites - needs to have Page navigation if number of the search have lot of site search result
- Sites - Postal Code filter - change the text to Post Code
6) Calendar Screen
Reference: 05_0-Calendar-Screen.png to 05_5-Calendar-Screen.png
- Show list of site schedules on this screen
- Any reminder, alerts, planned information should have their own label and it needs to stand out (giving the user quick notice)
- The calendar is Read-only
- Calendar - Click Date on date in calendar to navigate to different dates or 'Today'
- Clicking a particular calendar date will show the detailed data about event information on that date
- Provide a summary list of alerts
- Ability to filter the calendars
7) Site Details Screen
Reference: 06_0-Site-Details-Screen.png to 06_4-Site-Details-Screen.png
- This screen can be accessed through inspections, sites screen or other widgets.
- Provide detailed site information on this screen (Surveyor, Client Contact, Written Scheme, Schedules/Items, Events)
- In Surveyor tab, clicking the (i) icon will show the team leaders name and the mobile phone
- Clicking "see more" in Schedules/Items tab will bring user to schedules screen.
- Site Details – Schedules/Item Tab, Change 'Category’ column header to 'Schedules'
- Site Details - Schedules/Item Tab, Add Due Date column to right of Schedules
- Site Details – Surveyors – change 'Item' column header to 'Schedule'
- Site Details - Client Contacts - change 'Item' column header to 'Schedule'
- Site Details – Written Schemes – change 'Review Date' column header to 'Issued Date'
- Site Details – Fix address text
8) Schedules Screen
Reference: 07_0-Schedules-Screen.png to 07_2-Schedules-Screen.png
- This screen show all item schedules by their category for a particular site
- Show information about the item and their due date along with the detailed information
- 'E1' here means electrical inspections, 'L1' means lift inspections, etc.
- The dropdown menu 'Download Excel' and 'Download PDF' should be created as Sub menus, so it should be 'Download' -> 'Excel' then 'PDF'
- Schedule - Show total number of items like Sites and Inspections (Put it beside the magnifying glass icon)
- Reminder icon (on schedules page)- Item (No page yet)
9) Contact Us Screen
Reference: 08_0-Contact-Us.png
- Ordinary Information screen
- Contact form to reach customer service
- Placeholder for phones numbers, etc.
- Link to PDF Docs
- Provide error scenario when important (*) field not filled in (make the textfield border red)
- Provide simple popup with text "Your Message has been sent successfully!"
- Desktop is priority
- In another view (mobile, tablet), the layout still needs to look good. (Nice to have – Should not affect the scoring in review phase)
- Layout width should be fluid.
Specific HTML/CSS/JavaScript Requirements
HTML/HTML5
- Provide comments on the page elements 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 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 on 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 creating 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
- We recommend a combination of Angular 5 and Bootstrap for this challenge. Make sure to follow the best practices for the technology
- All JavaScript used must not have any copyrights to any 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.
- 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 (Latest versions of)
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
Documentation
Google Drive: https://drive.google.com/file/d/17zH_nQoas8q6eYVneMWD5xtO0gNqXFJu/view?usp=sharing
- Storyboards
Final Submission Guidelines
Submission Deliverables- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial
- Source Code
- README File, contains how to deploy the submission and server environment
Final Submission
- For each member, the final submission should be uploaded to Online Review Tool