Challenge Summary
Welcome to "GUARD - Crimson Platform Design Concepts challenge". In this challenge, we need your help to improve and create a new look and feel for our Crimson website. The new Crimson look and feel should be able to give our user more easy experience to view, manipulate and download their inspection data and inspection reports.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Home Screen
02) Data Screen
03) Inspections Screen
04) Sites Screen
05) Calendar Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Home Screen
02) Data Screen
03) Inspections Screen
04) Sites Screen
05) Calendar Screen
06) Site Details Screen
07) Schedules Screen
08) Information Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
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. However, they will be charged separately for any paper reports they require. 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 51,000 external customers who access this web application.
Crimson holds the data resulting from fee-based inspections, rather than generating policy premiums, amounting to approx £70 million.
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.
Challenge Goals
Create the UI/UX for a website that allows users (ranging from different disciplines; health & safety, compliance, insurance, maintenance, broker, administrator, etc.) to view, manipulate and download their inspection data and inspection reports. The design should be innovative, intuitive, and user-friendly.
User Flow
1) Access
- User enter landing page with login functionality
- After login, they will be taken to their home page
- Users: Normal, admin, security (not to be considered at this point)
2) Navigation
- User clicks on the relevant tab (Data/Sites/Reports/Calendar/Information) or widget on the Home/Data screens to view the relevant information.
- Also, there is a User Menu at the top right corner with the following options:
-- Preferences
-- Admin
--- Users
--- Schedules
--- Community
--- GUARD Only
-- Help
--- Link to GUARD website
--- Site help
Design Compatibility
- Responsive website
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Design Usability
- Simple; not too many steps involved in any part
- Easy; to understand the navigation from section to section
- Fast; and efficient experience
Branding Guidelines
Ask in Forum for Access to Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our Branding Guidelines Document for design style, font, and colors.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=624791
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Home Screen
Reference Wireframes.pdf page 1
- 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.
- The ideas are to create these items information using card layout/widget so the user can easily identify the information, any other layouts are welcome.
- Show the following widget/content item information:
-- Calendar (Based on today's date, red stands for overdue, amber stands for due in a couple of weeks and green for a due date after a couple of week's time)
-- Last Site Visited ("Lite site visited" means the last site inspected. During inspections, the inspector/emp writes a report, the statuses on the report may be one of the following: ok, ae, an, bd, etc)
-- Sites (UK map should be shown. Also, the map should adjust itself - if all the site locations are based out of the London, the map should be zoomed into London Area, rather than show all of UK)
-- Item Status
-- Inspection Due
-- Not Examined
- Ability to re-arrange the cards item/widget (drag n drop)
- Ability to add/remove the cards item/widget
- on sign 7, improve pagination control
- on sign 14, Remove "Site" from each line of the last site visited widget and label as a site column
- on sign 3, add "Ok with obs"
- Needs to provide a better design for main navigation and other nav (Preferences, Admin, Help, Logout)
- Search item needs to be stand out and easy to use
02) Data Screen
Reference Wireframes.pdf page 2
- This screen almost similar with the dashboard, the differences are, the user will be able to see all cards item information while in the dashboard, the item cards that can be shown is limited and as per user's selection.
- This screen contains all the widgets, including all data-driven widgets. The user typically chooses widgets from this bank to be displayed on his home screen
- Each cards section is related to data collected during inspections of electrical, lifting, etc.
- The user will be able to filter the item card information (global and each card widget)
- Provide pagination or infinite scroll so the user can check other item cards information
- Ability to download report based on filtered item data
- Needs variation of chart.
- Ability to change chart under each card
- on sign 3, add "Ok with obs"
- on sign 1, Remove "Downloads" and add to the 2nd level on breadcrumbs under the 1st level "Data" breadcrumb
- Provide the following item cards information:
-- Item Status
-- Not Examined
-- Inspection Due
-- Item Status by Discipline
-- Reminders
-- Inspection Completed
03) Inspections Screen
Reference Wireframes.pdf page 3
- 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
- This screen to give a summary of all the locations when the next inspection is due. It is accessible from the Inspection tab.
- The user should be able to arrange how they want to see the information on this screens by two criteria: via Site location or Schedule for the inspections
- on sign 8, Rename "Site" to "Site Name"
- on sign 9, Show filters e.g. by location etc
- on sign 2, Add post code column
- on sign 7, Improve pagination control
- on sign 3, add "Ok with obs"
- on sign 4, This row should be highlighted in a different color to show it has been 'archived'
- Ability to download a report
04) Sites Screen
Reference Wireframes.pdf page 4
- This screen gives a view of the different sites.
- Tick in table represents if a schedule of that type (LC = Lifting, PS = Pressure System, EL = Electrical Plant, EW = Electrical Wiring, PP = Power Press, and LV = Local Exhaust Ventilation) exists at that site. Additionally, the site is marked on the map as well.
- The user will be able to see Site information details in this screen
- The Site name (first column) should be marked in the maps (currently, it is not doing so in the attached wireframes).
- The site name should be identifiable via hovering the mouse or displaying the Site name/number (best design practice to be applied here).
- Also, the map should adjust itself - if all of the site locations are based out of the London, the map should be zoomed into London Area, rather than show all of UK
- on sign 9, Show filters e.g. by location, etc.
- on sign 10, Add address and postcode columns
- on sign 11, Replace LC = Lifting, PS = Pressure System, EL = Electrical Plant, EW = Electrical Wiring, PP = Power Press, and LV = Local Exhaust Ventilation
- Ignore mark-up 12
05) Calendar Screen
Reference Wireframes.pdf page 5
- 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
- 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
- Currently, the calendar view only shows the highest priority event on a particular day. Kindly add the number of events in the lower corner of the day box.
06) Site Details Screen
Reference Wireframes.pdf page 6
- This screen can be accessed through inspections or other widgets.
- Provide detailed site information on this screen
- Show us the best layout arrangement for this screen
- Maybe add the site location (maps or photo)
- Provide download features here
07) Schedules Screen
Reference Wireframes.pdf page 7
- 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 means electrical inspections, L1 means lift inspections, etc. There are six such categories which have been listed on the last page of the attached wireframes.
- on sign 9, Show filters e.g. by location etc
- on sign 6, Add client No Column
- on sign 7, Improve pagination control
- on sign 5, Add client report status column with read (red piece of paper), unread (closed envelope), needs action (spanner), completed (green tick) in the cells below
- on sign 13, Replace the Due Date with "Prior to further service" where status = NV or NL
08) Information Screen
Reference Wireframes.pdf page 8
- Ordinary Information screen
- Contact form to reach customer service
- Placeholder for phones numbers, etc.
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Documentation (Ask for access in challenge forum)
- Branding Digital Guidelines.pdf
- Wireframes.pdf
Target Devices
- This application will be created as a Responsive web app
- For this challenge, focus on Desktop device
- 1366px minimum width with height adjusting accordingly
Target Audience
- External customers (commercial users rather than consumer. Users range from different disciplines; health & safety, compliance, insurance, maintenance, broker, administrator etc.)
- Brokers
- Internal users
- Also, since most of the intended audience are from the engineering discipline, if you want to use images in the app, it should be relatable to engineering inspections, etc.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The simplicity of the design, creativity and the innovation brought to this challenge
- The overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback01) Home Screen
02) Data Screen
03) Inspections Screen
04) Sites Screen
05) Calendar Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates01) Home Screen
02) Data Screen
03) Inspections Screen
04) Sites Screen
05) Calendar Screen
06) Site Details Screen
07) Schedules Screen
08) Information Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
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. However, they will be charged separately for any paper reports they require. 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 51,000 external customers who access this web application.
Crimson holds the data resulting from fee-based inspections, rather than generating policy premiums, amounting to approx £70 million.
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.
Challenge Goals
Create the UI/UX for a website that allows users (ranging from different disciplines; health & safety, compliance, insurance, maintenance, broker, administrator, etc.) to view, manipulate and download their inspection data and inspection reports. The design should be innovative, intuitive, and user-friendly.
User Flow
1) Access
- User enter landing page with login functionality
- After login, they will be taken to their home page
- Users: Normal, admin, security (not to be considered at this point)
2) Navigation
- User clicks on the relevant tab (Data/Sites/Reports/Calendar/Information) or widget on the Home/Data screens to view the relevant information.
- Also, there is a User Menu at the top right corner with the following options:
-- Preferences
-- Admin
--- Users
--- Schedules
--- Community
--- GUARD Only
-- Help
--- Link to GUARD website
--- Site help
Design Compatibility
- Responsive website
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Design Usability
- Simple; not too many steps involved in any part
- Easy; to understand the navigation from section to section
- Fast; and efficient experience
Branding Guidelines
Ask in Forum for Access to Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our Branding Guidelines Document for design style, font, and colors.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=624791
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Home Screen
Reference Wireframes.pdf page 1
- 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.
- The ideas are to create these items information using card layout/widget so the user can easily identify the information, any other layouts are welcome.
- Show the following widget/content item information:
-- Calendar (Based on today's date, red stands for overdue, amber stands for due in a couple of weeks and green for a due date after a couple of week's time)
-- Last Site Visited ("Lite site visited" means the last site inspected. During inspections, the inspector/emp writes a report, the statuses on the report may be one of the following: ok, ae, an, bd, etc)
-- Sites (UK map should be shown. Also, the map should adjust itself - if all the site locations are based out of the London, the map should be zoomed into London Area, rather than show all of UK)
-- Item Status
-- Inspection Due
-- Not Examined
- Ability to re-arrange the cards item/widget (drag n drop)
- Ability to add/remove the cards item/widget
- on sign 7, improve pagination control
- on sign 14, Remove "Site" from each line of the last site visited widget and label as a site column
- on sign 3, add "Ok with obs"
- Needs to provide a better design for main navigation and other nav (Preferences, Admin, Help, Logout)
- Search item needs to be stand out and easy to use
02) Data Screen
Reference Wireframes.pdf page 2
- This screen almost similar with the dashboard, the differences are, the user will be able to see all cards item information while in the dashboard, the item cards that can be shown is limited and as per user's selection.
- This screen contains all the widgets, including all data-driven widgets. The user typically chooses widgets from this bank to be displayed on his home screen
- Each cards section is related to data collected during inspections of electrical, lifting, etc.
- The user will be able to filter the item card information (global and each card widget)
- Provide pagination or infinite scroll so the user can check other item cards information
- Ability to download report based on filtered item data
- Needs variation of chart.
- Ability to change chart under each card
- on sign 3, add "Ok with obs"
- on sign 1, Remove "Downloads" and add to the 2nd level on breadcrumbs under the 1st level "Data" breadcrumb
- Provide the following item cards information:
-- Item Status
-- Not Examined
-- Inspection Due
-- Item Status by Discipline
-- Reminders
-- Inspection Completed
03) Inspections Screen
Reference Wireframes.pdf page 3
- 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
- This screen to give a summary of all the locations when the next inspection is due. It is accessible from the Inspection tab.
- The user should be able to arrange how they want to see the information on this screens by two criteria: via Site location or Schedule for the inspections
- on sign 8, Rename "Site" to "Site Name"
- on sign 9, Show filters e.g. by location etc
- on sign 2, Add post code column
- on sign 7, Improve pagination control
- on sign 3, add "Ok with obs"
- on sign 4, This row should be highlighted in a different color to show it has been 'archived'
- Ability to download a report
04) Sites Screen
Reference Wireframes.pdf page 4
- This screen gives a view of the different sites.
- Tick in table represents if a schedule of that type (LC = Lifting, PS = Pressure System, EL = Electrical Plant, EW = Electrical Wiring, PP = Power Press, and LV = Local Exhaust Ventilation) exists at that site. Additionally, the site is marked on the map as well.
- The user will be able to see Site information details in this screen
- The Site name (first column) should be marked in the maps (currently, it is not doing so in the attached wireframes).
- The site name should be identifiable via hovering the mouse or displaying the Site name/number (best design practice to be applied here).
- Also, the map should adjust itself - if all of the site locations are based out of the London, the map should be zoomed into London Area, rather than show all of UK
- on sign 9, Show filters e.g. by location, etc.
- on sign 10, Add address and postcode columns
- on sign 11, Replace LC = Lifting, PS = Pressure System, EL = Electrical Plant, EW = Electrical Wiring, PP = Power Press, and LV = Local Exhaust Ventilation
- Ignore mark-up 12
05) Calendar Screen
Reference Wireframes.pdf page 5
- 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
- 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
- Currently, the calendar view only shows the highest priority event on a particular day. Kindly add the number of events in the lower corner of the day box.
06) Site Details Screen
Reference Wireframes.pdf page 6
- This screen can be accessed through inspections or other widgets.
- Provide detailed site information on this screen
- Show us the best layout arrangement for this screen
- Maybe add the site location (maps or photo)
- Provide download features here
07) Schedules Screen
Reference Wireframes.pdf page 7
- 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 means electrical inspections, L1 means lift inspections, etc. There are six such categories which have been listed on the last page of the attached wireframes.
- on sign 9, Show filters e.g. by location etc
- on sign 6, Add client No Column
- on sign 7, Improve pagination control
- on sign 5, Add client report status column with read (red piece of paper), unread (closed envelope), needs action (spanner), completed (green tick) in the cells below
- on sign 13, Replace the Due Date with "Prior to further service" where status = NV or NL
08) Information Screen
Reference Wireframes.pdf page 8
- Ordinary Information screen
- Contact form to reach customer service
- Placeholder for phones numbers, etc.
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Documentation (Ask for access in challenge forum)
- Branding Digital Guidelines.pdf
- Wireframes.pdf
Target Devices
- This application will be created as a Responsive web app
- For this challenge, focus on Desktop device
- 1366px minimum width with height adjusting accordingly
Target Audience
- External customers (commercial users rather than consumer. Users range from different disciplines; health & safety, compliance, insurance, maintenance, broker, administrator etc.)
- Brokers
- Internal users
- Also, since most of the intended audience are from the engineering discipline, if you want to use images in the app, it should be relatable to engineering inspections, etc.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The simplicity of the design, creativity and the innovation brought to this challenge
- The overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.