Challenge Summary
Challenge Objectives
- User interface design
- Web based application for Desktop only. Should support Chrome, Firefox, Safari, Microsoft Edge.
1). Map Flow
2). Job Details Flow
Note: Feel free to submit more screens for early feedback
1). Map Flow
2). Job Details Flow
3). Job Edit Flow
4). Report Flow
Project Background
After a storm, technicians are assigned to an area within the client’s network to assess the damages. This web app provides a way to access all the submitted incident reports and change its status or assign to partner contractor. The purpose of this challenge is to redesign a desktop application that will be used by Beacon Administrators to reviewing, managing, editing the disasters reports
Users/Roles
- Beacon Web Administrator Role
- Beacon User roles
Screens/Features
Existing Application Screenshots: https://drive.google.com/open?id=10ia2yfGzryO4wltcC1cjoPFG2nD-RX2C
Current HOT DAM App Storyboard design:
https://drive.google.com/open?id=1IEgA_17NuN7jPYu3gnlDFSUpI7uKFSsx
General Requirements
- Display app logo on your design
- We need pull in design from the HOT DAM feature onto web portal. See downloadable files above
- Update Job Details and Job Details data entry
- Update the left hand menu options
- Create space on left hand menu for new features:
-- Redlines
-- OTDR Trace
-- Node Trace
-- Hazard reporting
- Create some way to access “Legend”, “Layers”, “Filters”. “Reports” and “Accounts”
- Map view will be default view for everyone
- We need ability to create a new or edit disaster is only for Admin. Fields that need displayed are:
-- Disaster Name (required)
-- Start Date (required)
-- End Date (optional)
-- Impacted Region (required)
- Note we will use the same map library.
- Markers on map will be updated based on customized Filters
- There will Report screen after user Generate the Report based on customized Report options
1). Map Flow
Screenshot: 01-a-Map-legend.png
- This is when legend expanded
- Legend text will remain like existing
- Feel free to improve the marker design for New, P2, Work in Progress and Complete status
Screenshot: 01-b-Map-legend-zoom-1.png
Screenshot: 01-b-Map-legend-zoom-2.png
Screenshot: 01-b-Map-legend-zoom-3.png
- This is example when on legend when zoom in the map
- Legends displayed will be different on zoom out/in. Make sure your design support the vary legends content
Screenshot: 01-c-Map-layer-1.png
- This is for Layers section
- Need able to expand/collapse the row
- Create active/inactive state
Screenshot: 01-c-Map-layer-2.png
- This is after user collapse the value
Screenshot: 01-d-Map-filter-1.png
- This is initial Filter look
- Disaster dropdown placed on top
- Date range placed below
Screenshot: 01-d-Map-filter-2.png
- User can drag the date range slider
Screenshot: 01-d-Map-filter-3.png
- Sample content for Disasters dropdown
Screenshot: 01-e-Map-Reports-1.png
- This is Report section
- Disaster dropdown placed on top
- Date range placed below
Screenshot: 01-e-Map-Reports-2.png
- Sample content for Disasters dropdown
Screenshot: 01-f-Account.png
- This will be section for User Account
- Need add Logout link
Screenshot: 01-g-Map-input-1.png
- On map we need add text input to search anything related to the disaster reports
Screenshot: 01-g-Map-input-2.png
- Map displayed custom marker for the search result.
2). Job Details Flow
Screenshot: 02-Job-Details-1.png
- Each marker on map are clickable
- Click the map need displayed the details screen
- Match the content from screenshots
- There are some actions buttons for Zoom, Edit, CSV download and Radius button
- User will see some thumbnails on details screen
Screenshot: 02-Job-Details-2.png
Screenshot: 02-Job-Details-3.png
- These are another sample for job details
Screenshot: 02-Job-FullSize-Image-1.png
- Click slideshow thumbnail need load the full size image
- Need able to download the image
Screenshot: 02-Job-FullSize-Image-2.png
- This is another sample for image full size
Screenshot: 02-Job-FullSize-video.png
- Other than image, we need support video
Screenshot: 02-Job-Radius.png
- This is when user click the Radius button around the job details area
3). Job Edit Flow
Screenshot: 03-a-Edit-Job-Priority-Level.png
- User see this screen after click the Edit button
- Not all fields are editable, refer to screenshot
Screenshot: 03-b-Edit-Job-Natural-Disasters.png
- Dropdown options look
Screenshot: 03-c-Edit-Job-Add-Items.png
- This show up after user click Cart button to Add/Edit item(s)
Screenshot: 03-d-Edit-Job-Save.png
- Create sample screen how the error message look
- You also need create screen for success message
4). Report Flow
Screenshot: 04-a-Report-Generated.png
- Reports can only be viewed by Comcast users with NTIDs, it will be hidden to people with BPIDs.
- User see the Report screen after select the Disaster report
- Create a preloader when user load data on Generate Report
- Make sure the preloader can be used on another page when load some data
- Dashboard displayed number of all report status
- Create table list below
- There are some action buttons need in table
- How pagination should look?
- User will see summary of jobs in different status as well as a bar chart of status over time.
Screenshot: 04-b-Report-Generated-alert.png
Screenshot: 04-c-Report-Generated-alert.png
- This is error message before user select the checkbox on table
Form Factors
Please make sure your design supports these form factors:
Desktop Screen size (1366px x Height up to your design)
Branding Guidelines
Your submission design need follow Tablet/Mobile (Beacon app) look and feel
Design Assets
Beacon Tablet/Mobile Storyboard Design: https://drive.google.com/open?id=1IEgA_17NuN7jPYu3gnlDFSUpI7uKFSsx
Note: This storyboard created on Sketch
Existing Application Screenshots: https://drive.google.com/open?id=10ia2yfGzryO4wltcC1cjoPFG2nD-RX2C
Final Deliverables
All original source files.
Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file or Sketch
Marvel Prototype
We need you to upload your screens to Marvel App.
Please send your marvel app request to lunarkid@copilots.topcoder.com
You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
- User interface design
- Web based application for Desktop only. Should support Chrome, Firefox, Safari, Microsoft Edge.
Round 1
Updated Beacon Admin Web App for these following features1). Map Flow
2). Job Details Flow
Note: Feel free to submit more screens for early feedback
Round 2
Final Beacon Admin Web App for these following features with Checkpoint Feedback1). Map Flow
2). Job Details Flow
3). Job Edit Flow
4). Report Flow
Project Background
After a storm, technicians are assigned to an area within the client’s network to assess the damages. This web app provides a way to access all the submitted incident reports and change its status or assign to partner contractor. The purpose of this challenge is to redesign a desktop application that will be used by Beacon Administrators to reviewing, managing, editing the disasters reports
Users/Roles
- Beacon Web Administrator Role
- Beacon User roles
Screens/Features
Existing Application Screenshots: https://drive.google.com/open?id=10ia2yfGzryO4wltcC1cjoPFG2nD-RX2C
Current HOT DAM App Storyboard design:
https://drive.google.com/open?id=1IEgA_17NuN7jPYu3gnlDFSUpI7uKFSsx
General Requirements
- Display app logo on your design
- We need pull in design from the HOT DAM feature onto web portal. See downloadable files above
- Update Job Details and Job Details data entry
- Update the left hand menu options
- Create space on left hand menu for new features:
-- Redlines
-- OTDR Trace
-- Node Trace
-- Hazard reporting
- Create some way to access “Legend”, “Layers”, “Filters”. “Reports” and “Accounts”
- Map view will be default view for everyone
- We need ability to create a new or edit disaster is only for Admin. Fields that need displayed are:
-- Disaster Name (required)
-- Start Date (required)
-- End Date (optional)
-- Impacted Region (required)
- Note we will use the same map library.
- Markers on map will be updated based on customized Filters
- There will Report screen after user Generate the Report based on customized Report options
1). Map Flow
Screenshot: 01-a-Map-legend.png
- This is when legend expanded
- Legend text will remain like existing
- Feel free to improve the marker design for New, P2, Work in Progress and Complete status
Screenshot: 01-b-Map-legend-zoom-1.png
Screenshot: 01-b-Map-legend-zoom-2.png
Screenshot: 01-b-Map-legend-zoom-3.png
- This is example when on legend when zoom in the map
- Legends displayed will be different on zoom out/in. Make sure your design support the vary legends content
Screenshot: 01-c-Map-layer-1.png
- This is for Layers section
- Need able to expand/collapse the row
- Create active/inactive state
Screenshot: 01-c-Map-layer-2.png
- This is after user collapse the value
Screenshot: 01-d-Map-filter-1.png
- This is initial Filter look
- Disaster dropdown placed on top
- Date range placed below
Screenshot: 01-d-Map-filter-2.png
- User can drag the date range slider
Screenshot: 01-d-Map-filter-3.png
- Sample content for Disasters dropdown
Screenshot: 01-e-Map-Reports-1.png
- This is Report section
- Disaster dropdown placed on top
- Date range placed below
Screenshot: 01-e-Map-Reports-2.png
- Sample content for Disasters dropdown
Screenshot: 01-f-Account.png
- This will be section for User Account
- Need add Logout link
Screenshot: 01-g-Map-input-1.png
- On map we need add text input to search anything related to the disaster reports
Screenshot: 01-g-Map-input-2.png
- Map displayed custom marker for the search result.
2). Job Details Flow
Screenshot: 02-Job-Details-1.png
- Each marker on map are clickable
- Click the map need displayed the details screen
- Match the content from screenshots
- There are some actions buttons for Zoom, Edit, CSV download and Radius button
- User will see some thumbnails on details screen
Screenshot: 02-Job-Details-2.png
Screenshot: 02-Job-Details-3.png
- These are another sample for job details
Screenshot: 02-Job-FullSize-Image-1.png
- Click slideshow thumbnail need load the full size image
- Need able to download the image
Screenshot: 02-Job-FullSize-Image-2.png
- This is another sample for image full size
Screenshot: 02-Job-FullSize-video.png
- Other than image, we need support video
Screenshot: 02-Job-Radius.png
- This is when user click the Radius button around the job details area
3). Job Edit Flow
Screenshot: 03-a-Edit-Job-Priority-Level.png
- User see this screen after click the Edit button
- Not all fields are editable, refer to screenshot
Screenshot: 03-b-Edit-Job-Natural-Disasters.png
- Dropdown options look
Screenshot: 03-c-Edit-Job-Add-Items.png
- This show up after user click Cart button to Add/Edit item(s)
Screenshot: 03-d-Edit-Job-Save.png
- Create sample screen how the error message look
- You also need create screen for success message
4). Report Flow
Screenshot: 04-a-Report-Generated.png
- Reports can only be viewed by Comcast users with NTIDs, it will be hidden to people with BPIDs.
- User see the Report screen after select the Disaster report
- Create a preloader when user load data on Generate Report
- Make sure the preloader can be used on another page when load some data
- Dashboard displayed number of all report status
- Create table list below
- There are some action buttons need in table
- How pagination should look?
- User will see summary of jobs in different status as well as a bar chart of status over time.
Screenshot: 04-b-Report-Generated-alert.png
Screenshot: 04-c-Report-Generated-alert.png
- This is error message before user select the checkbox on table
Form Factors
Please make sure your design supports these form factors:
Desktop Screen size (1366px x Height up to your design)
Branding Guidelines
Your submission design need follow Tablet/Mobile (Beacon app) look and feel
Design Assets
Beacon Tablet/Mobile Storyboard Design: https://drive.google.com/open?id=1IEgA_17NuN7jPYu3gnlDFSUpI7uKFSsx
Note: This storyboard created on Sketch
Existing Application Screenshots: https://drive.google.com/open?id=10ia2yfGzryO4wltcC1cjoPFG2nD-RX2C
Final Deliverables
All original source files.
Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file or Sketch
Marvel Prototype
We need you to upload your screens to Marvel App.
Please send your marvel app request to lunarkid@copilots.topcoder.com
You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
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.