Challenge Summary
Welcome to "EW - Sheet Scraping Platform Design Concepts Challenge". in this challenge, we want to create an automatic website scraping to collect public information periodically. 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!
03) Sheet Information Screen (Important Screen)
01) Login Screen
02) Dashboard 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) Login Screen
02) Dashboard Screen
03) Sheet Information Screen (Important Screen)
04) Analytics Screen
05) Setting 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
We want to updates the way we collect information from a website periodically. The current experience requires a person to update the information manually from the RRC (railroad commission) and IHS website, and ingests data through excel spreadsheets, and has no means for data visualization or analytics.
Basically, what is going on here is that there is an administrator for the spreadsheet at our client that manually updates this spreadsheet based on information that is publicly available. The data in the sheet will be all public.
We're going to build a process that scrapes a website to populate the majority of the information. But the admin will still need to go in a verify that information is being updated correctly and fill in missing values from some handwritten documents.
Some area/city/states still allow the submission of handwritten Well Permits and other documents. So automated extraction will be difficult for some elements.
Challenge Goal
Create the look and feel for automatic scraping platform that allows users to go in and review data and make updates in an easy and simple way.
Design Consideration
- How quickly could you find all features and necessary information on this platform?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Easy to understand flow from page to page.
- Each page is not overcrowded with information
Branding Guidelines
- Modern, Professional, Crisp and Clean look and feel
- Font, Colors and Design Style are Open to designers
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=622425
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) Login Screen
- User will need to login first before able to use platform
- Provide ordinary login form (Username/Password/Forgot Password)
- Provide some basic information about the platform in the login page
- Needs to accommodate error scenario
02) Dashboard Screen
- Show log history of user activity
- Show list of scraping schedule and the status (success/failed)
- Metrics of Scraping performance (complete/partially)
- List of log history of exported data to excel or database
- Notification area to show any updates on the platform
03) Sheet Information Screen (Important Screen)
- The screen layout should reflect an online spreadsheet, grid view.
- The xls template layout is similar to what we need for this screen.
- Your design needs to incorporate all the column names from the xls template.
- Needs search and filter ability to find important information.
- The user should be able to manually create a new record if that record was not automatically available (along with update).
- This data will eventually be written in a database, so please create some type of submit button to add to the database.
- We'll need the capability to export the data on the sheet to Excel.
- Ability to check data from the previous scrapping. Needs to identify records that are new since the last time a user check it. The app should be able to mark new records that are brought with the web scraping so that it can be approved and edited as needed. Or are able to distinguish from older records
- Once the data is reviewed or manually updated, we will need the capability of submitting which will go write it to a database.
- Ability to check previous data that is submitted to the database.
04) Analytics Screen
- User needs to be able monitoring the app activity from this screen
- For ex, User login, time log in and log out, table searching log, user traffic, etc.
- Ability to see Mapping grid that tells you which column was picked from which source and what time.
- Metrics for each source and what information was scraped, etc
05) Setting screen
- Tabs information to manage the application settings, such as:
-- Set scraping time schedule
-- Set data source that needs to be scrapped (website link, which id/class needs to be scraped, did user needs to click button before able to scrapped the data?), See “Web Scraping _workflow_mapping v2.docx” to get information about what kind of data will be scrapped and how to get the data.
-- User profile management
-- Set Email notification
Important:
- Keep things consistent. This means allgraphic 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
- Energy Well Info Database.xlsx, contains all data for this app. This is the template that the admin currently updates manually. All these data scrapped from multiple sources and each colour defines a mapping/workflow to a particular web query. If you find some empty data in the row, that is because of the data not available on the web. Basically, we collect the well and complete data for Salt Water injection - disposal. This data is collected from the public sites.
- Web Scraping _workflow_mapping.docx, contain Web Scraping workflow for automation. This is the mapping of the admin's task. This mapping should help to understand what the automated script should be.
- High-level-Concept-SWD.png, contains diagram illustration of the app flow.
Target Devices
- We are targeting for Desktop App
- Minimum 1366px width with height adjusted accordingly
Target Audience
- Internal Employees
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 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 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 Feedback03) Sheet Information Screen (Important Screen)
01) Login Screen
02) Dashboard 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) Login Screen
02) Dashboard Screen
03) Sheet Information Screen (Important Screen)
04) Analytics Screen
05) Setting 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
We want to updates the way we collect information from a website periodically. The current experience requires a person to update the information manually from the RRC (railroad commission) and IHS website, and ingests data through excel spreadsheets, and has no means for data visualization or analytics.
Basically, what is going on here is that there is an administrator for the spreadsheet at our client that manually updates this spreadsheet based on information that is publicly available. The data in the sheet will be all public.
We're going to build a process that scrapes a website to populate the majority of the information. But the admin will still need to go in a verify that information is being updated correctly and fill in missing values from some handwritten documents.
Some area/city/states still allow the submission of handwritten Well Permits and other documents. So automated extraction will be difficult for some elements.
Challenge Goal
Create the look and feel for automatic scraping platform that allows users to go in and review data and make updates in an easy and simple way.
Design Consideration
- How quickly could you find all features and necessary information on this platform?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Easy to understand flow from page to page.
- Each page is not overcrowded with information
Branding Guidelines
- Modern, Professional, Crisp and Clean look and feel
- Font, Colors and Design Style are Open to designers
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=622425
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) Login Screen
- User will need to login first before able to use platform
- Provide ordinary login form (Username/Password/Forgot Password)
- Provide some basic information about the platform in the login page
- Needs to accommodate error scenario
02) Dashboard Screen
- Show log history of user activity
- Show list of scraping schedule and the status (success/failed)
- Metrics of Scraping performance (complete/partially)
- List of log history of exported data to excel or database
- Notification area to show any updates on the platform
03) Sheet Information Screen (Important Screen)
- The screen layout should reflect an online spreadsheet, grid view.
- The xls template layout is similar to what we need for this screen.
- Your design needs to incorporate all the column names from the xls template.
- Needs search and filter ability to find important information.
- The user should be able to manually create a new record if that record was not automatically available (along with update).
- This data will eventually be written in a database, so please create some type of submit button to add to the database.
- We'll need the capability to export the data on the sheet to Excel.
- Ability to check data from the previous scrapping. Needs to identify records that are new since the last time a user check it. The app should be able to mark new records that are brought with the web scraping so that it can be approved and edited as needed. Or are able to distinguish from older records
- Once the data is reviewed or manually updated, we will need the capability of submitting which will go write it to a database.
- Ability to check previous data that is submitted to the database.
04) Analytics Screen
- User needs to be able monitoring the app activity from this screen
- For ex, User login, time log in and log out, table searching log, user traffic, etc.
- Ability to see Mapping grid that tells you which column was picked from which source and what time.
- Metrics for each source and what information was scraped, etc
05) Setting screen
- Tabs information to manage the application settings, such as:
-- Set scraping time schedule
-- Set data source that needs to be scrapped (website link, which id/class needs to be scraped, did user needs to click button before able to scrapped the data?), See “Web Scraping _workflow_mapping v2.docx” to get information about what kind of data will be scrapped and how to get the data.
-- User profile management
-- Set Email notification
Important:
- Keep things consistent. This means allgraphic 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
- Energy Well Info Database.xlsx, contains all data for this app. This is the template that the admin currently updates manually. All these data scrapped from multiple sources and each colour defines a mapping/workflow to a particular web query. If you find some empty data in the row, that is because of the data not available on the web. Basically, we collect the well and complete data for Salt Water injection - disposal. This data is collected from the public sites.
- Web Scraping _workflow_mapping.docx, contain Web Scraping workflow for automation. This is the mapping of the admin's task. This mapping should help to understand what the automated script should be.
- High-level-Concept-SWD.png, contains diagram illustration of the app flow.
Target Devices
- We are targeting for Desktop App
- Minimum 1366px width with height adjusted accordingly
Target Audience
- Internal Employees
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 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 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.