Challenge Summary
Welcome to "HERCULES - P2 Responsive Website Design Challenge". For this challenge, we need your help to create a simple, two-page responsive website that will be used by internal users to get information from our "P2" program. 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!
1) Homepage
2) Training page
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1) Homepage
2) Training page
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
"P2" is an enterprise-wide integrated workflow orchestration tool that tracks the progress of all construction job types – providing visibility into the status of milestones, accurate cost of each project, the data to build forecasts, and the ability to roll up those metrics to a national view.
For this challenge, we are building a simple, two-page responsive website that will be used by internal users to get information on the P2 program.
Branding Guidelines and Consideration
- There is no strict style guidelines - i.e. X1 or otherwise.
- The overall goal is for this to have a very clean and easy to navigate interface, focusing on the information and training content.
- There are no color or font schemes we should be using or leaning towards. Feel free to create your own style for this website!
- The P2 site itself is built in Salesforce, so if this site is somewhat Salesforce-influenced in its layout or schemes, that may look good. But not critical.
- Please use P2 logo as part of your design.
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=617525
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.
1) Homepage
- Will contain information about the P2 program and an intro video.
- Needs to include "Sizzle Reel", a marketing video that describes the product: https://comcast.box.com/s/whnw3anwb7t0jkegmrb4sgm0v1svk72r, we want to show a 40min video on the homepage.
- Logo for the site has been shared (check challenge attachment)
- Needs to provide section and layout area to show P2 Overview and Features:
-- End-to-end workflow management, with SLAs and escalations, for a construction job
-- All residential and business services construction job types (e.g. FTTP, Fiber Deep & BAU)
-- Pre-populated required tasks, based on specific job types, but with flexibility to add incremental tasks as desired (e.g. FTTP/EPON)
-- Task level assignments to individual users and/or user groups (e.g. business partners)
-- Configurable user and/or user group notifications
--Approval workflows as defined
-- Standardized payback model (retail & bulk) and ability to perform blended ROI (resi & commercial) analysis
-- Central repository of costed BOM, labor activity and permits for all construction jobs
-- Visibility into un-invoiced labor commitments at lowest level (e.g. job, node)
-- Enterprise-wide reporting
-- Supports meeting forecasting commitment to business partners
-- Support standardized labor codes, with regionally managed rate structure
-- Support a user community (internal and external) including, but not limited to Construction Coordinators, Design contractors, construction contractors, permitting contractors, and Division management
-- Integrations with Don River, CIFA/Oracle, Orion, SMB Salesforce, Watchtower etc.
-- Management of User Roles & Permissions
- P2 Launch Roadmap, it's a broad idea for markets implementing Fiber Deep, and then to the rest of the construction efforts that the company has.
2) Training page
- This page will present all of the training materials that are available.
- For this page, you need to think of it as the Codeacademy, Udemy, Udacity for Construction Training.
- Materials can either be a Word, PDF, Powerpoint or a video.
- Need to support most of videos format. We are also looking into using Adobe Captivate to create interactive training modules that allow users to practice within the browser itself, so any concept for this would be great.
- Videos should not be able to be downloaded (needs some interaction for this)
- The training documents can be segmented and able to be grouped, by categories or others, for example:
-- Overall training
-- Construction Coordinator
-- Design/Permit
-- Finance
-- Reporting
- Content needs to be searchable, it can be via content title or the full text of the content or Both? Advance search?
- Users needs to be able search or filter the content by document type.
- Feel free to split into sub-screens if necessary (maybe list of all training page, training details intro/dashboard page, training video and comments, etc)
- Comments? Rating? Feedback? Training Progress? How many people join or already watch the training? Etc? Any features that can enhance User Experience, more interactions to the training materials?
Important:
- Keep things consistent. This means all graphic 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 marvelapp request to fajar.mln@gmail.com
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive Web Design:
- Desktop: 1280px min width with height adjusted accordingly
- Tablet: 1536px x 2048px
- Mobile: 750px x 1334px
Target Audience
- Internal employees or outside business partners with client approval
-- There will be employees ranging from field techs to employees that are essentially program managers for construction jobs.
-- Age range: most likely from late teens (folks who graduated high school) all the way up to retirement age.
-- Gender: all genders
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
- 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 JPEG/PNG image files based on Challenge submission requirements stated above.
- Marvel App 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 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.
Round 1
Submit your initial design for a Checkpoint Feedback (Desktop, Mobile)1) Homepage
2) Training page
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App 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 Updates (Desktop, Tablet, Mobile)1) Homepage
2) Training page
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
"P2" is an enterprise-wide integrated workflow orchestration tool that tracks the progress of all construction job types – providing visibility into the status of milestones, accurate cost of each project, the data to build forecasts, and the ability to roll up those metrics to a national view.
For this challenge, we are building a simple, two-page responsive website that will be used by internal users to get information on the P2 program.
Branding Guidelines and Consideration
- There is no strict style guidelines - i.e. X1 or otherwise.
- The overall goal is for this to have a very clean and easy to navigate interface, focusing on the information and training content.
- There are no color or font schemes we should be using or leaning towards. Feel free to create your own style for this website!
- The P2 site itself is built in Salesforce, so if this site is somewhat Salesforce-influenced in its layout or schemes, that may look good. But not critical.
- Please use P2 logo as part of your design.
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=617525
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.
1) Homepage
- Will contain information about the P2 program and an intro video.
- Needs to include "Sizzle Reel", a marketing video that describes the product: https://comcast.box.com/s/whnw3anwb7t0jkegmrb4sgm0v1svk72r, we want to show a 40min video on the homepage.
- Logo for the site has been shared (check challenge attachment)
- Needs to provide section and layout area to show P2 Overview and Features:
-- End-to-end workflow management, with SLAs and escalations, for a construction job
-- All residential and business services construction job types (e.g. FTTP, Fiber Deep & BAU)
-- Pre-populated required tasks, based on specific job types, but with flexibility to add incremental tasks as desired (e.g. FTTP/EPON)
-- Task level assignments to individual users and/or user groups (e.g. business partners)
-- Configurable user and/or user group notifications
--Approval workflows as defined
-- Standardized payback model (retail & bulk) and ability to perform blended ROI (resi & commercial) analysis
-- Central repository of costed BOM, labor activity and permits for all construction jobs
-- Visibility into un-invoiced labor commitments at lowest level (e.g. job, node)
-- Enterprise-wide reporting
-- Supports meeting forecasting commitment to business partners
-- Support standardized labor codes, with regionally managed rate structure
-- Support a user community (internal and external) including, but not limited to Construction Coordinators, Design contractors, construction contractors, permitting contractors, and Division management
-- Integrations with Don River, CIFA/Oracle, Orion, SMB Salesforce, Watchtower etc.
-- Management of User Roles & Permissions
- P2 Launch Roadmap, it's a broad idea for markets implementing Fiber Deep, and then to the rest of the construction efforts that the company has.
2) Training page
- This page will present all of the training materials that are available.
- For this page, you need to think of it as the Codeacademy, Udemy, Udacity for Construction Training.
- Materials can either be a Word, PDF, Powerpoint or a video.
- Need to support most of videos format. We are also looking into using Adobe Captivate to create interactive training modules that allow users to practice within the browser itself, so any concept for this would be great.
- Videos should not be able to be downloaded (needs some interaction for this)
- The training documents can be segmented and able to be grouped, by categories or others, for example:
-- Overall training
-- Construction Coordinator
-- Design/Permit
-- Finance
-- Reporting
- Content needs to be searchable, it can be via content title or the full text of the content or Both? Advance search?
- Users needs to be able search or filter the content by document type.
- Feel free to split into sub-screens if necessary (maybe list of all training page, training details intro/dashboard page, training video and comments, etc)
- Comments? Rating? Feedback? Training Progress? How many people join or already watch the training? Etc? Any features that can enhance User Experience, more interactions to the training materials?
Important:
- Keep things consistent. This means all graphic 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 marvelapp request to fajar.mln@gmail.com
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive Web Design:
- Desktop: 1280px min width with height adjusted accordingly
- Tablet: 1536px x 2048px
- Mobile: 750px x 1334px
Target Audience
- Internal employees or outside business partners with client approval
-- There will be employees ranging from field techs to employees that are essentially program managers for construction jobs.
-- Age range: most likely from late teens (folks who graduated high school) all the way up to retirement age.
-- Gender: all genders
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
- 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 JPEG/PNG image files based on Challenge submission requirements stated above.
- Marvel App 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 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.