Challenge Summary
Welcome to "Quartz - Log Digitization App Wireframe Challenge". In this challenge, we are looking for your creative skills to build a wireframe for our new Log Digitization application that will be used to process scanned documents in an efficient and effective way, by breaking them into separate sections, build a template to read and process similar log files. The app will also provide functionality (on the Content Audit page) so that users will be able to validate that the currently developed templates can be applied to a set of log files. Users will also need to designate information in the templates that the app should attempt to process.
We are looking for your ideas and the best user experience. Ask any questions in the forum, and have fun!
1. Log File List page
2. Upload Log File
3. Template Creator
4. Template Content Editor
5. Content Audit
6. Settings Feature
Note: Submit as much application features as you can for early review.
1. Log File List page
2. Upload Log File
3. Template Creator
4. Template Content Editor
5. Content Audit
6. Settings Feature
Note: please address Checkpoint Feedback for your Final Round Submission
The long-term goal is to digitize as much of the contained data as possible. Manually re-entering all data by hand is cost and time prohibitive (to say nothing of error-prone, or other issues). However, the mixed-format data does not necessarily lend itself well to fully unassisted automated approaches either (data is quite mixed, has complex representation, and in cases is not very high fidelity.)
The client's expectation is that part of the processing will involve human-assisted work (think Mechanical Turk), while some of the more mundane and straightforward things like OCR will be almost entirely automated.
We are looking for your ideas and the best user experience. Ask any questions in the forum, and have fun!
Round 1
Initial Wireframe for these following features:1. Log File List page
2. Upload Log File
3. Template Creator
4. Template Content Editor
5. Content Audit
6. Settings Feature
Note: Submit as much application features as you can for early review.
Round 2
Final Wireframe for these following features:1. Log File List page
2. Upload Log File
3. Template Creator
4. Template Content Editor
5. Content Audit
6. Settings Feature
Note: please address Checkpoint Feedback for your Final Round Submission
Background Overview
Converting paper records into digital format can be challenging, particularly when the records have various types of data, each with their own important meaning. The client has several paper logs, utilizing various types of graphed data, as well as textual annotations, and in some cases other markings.
The long-term goal is to digitize as much of the contained data as possible. Manually re-entering all data by hand is cost and time prohibitive (to say nothing of error-prone, or other issues). However, the mixed-format data does not necessarily lend itself well to fully unassisted automated approaches either (data is quite mixed, has complex representation, and in cases is not very high fidelity.)
The client's expectation is that part of the processing will involve human-assisted work (think Mechanical Turk), while some of the more mundane and straightforward things like OCR will be almost entirely automated.
In this project, we are looking to create a new "Log Digitization" application that will be able to:
1. Classify a log file (Large image format - TIFF) into a group with similar log files (These log files are scanned of the mud log files).
2. Break the log file into pieces by cropping the image into sections
3. Have users enter some metadata about the various sections.
4. Develop an algorithm/process that will capture data from the log files and store it in a structured format. We're hoping to maximize the use of OCR and an automated mechanism to retrieve info but given state of the art, it might be necessary to use Mechanical Turk or other human intervention to retrieve data from some of the files or some specific sections of the files.
5. Allow users to pull reports about the information retrieved.
For our initial Wireframe, we're going to focus on the "Template Creator" application. This application is focused on steps 2 and 3 in the Log Digitization process that mentioned above.
User Flow
- The user will be able to upload new log file or find the log file that already being uploaded and then review the log image, break the log file image into several parts/pieces for further processing. The pieces here means the image will be cropped into several sections of an image: Header, Depth Section, Gas Cutting Section, Mud Sampling Description Section, Drilling Speed. There might be a few others.
- User Iterate through other images and see how the template boundaries work.
- After the images collected and break into several same parts (templating), the user then will mark/mapping/put some details into the cropped image about the type of info that needs to be retrieve for example: Text Fields, Orientation of Text, Boundaries of Text Field Areas, Text Value Metadata (i.e, 4 digit numbers), Background Metadata - (Grids to remove?), Areas of Header for Graph scaling, Graphing Data to Extract.
- The user needs to be pretty specific when retrieving the info. The more detail that users provide about the sections of the document the more likely that the application will be able to identify and retrieve correct info.
- When uploading a new log file, the user will need to locate and create folder/directories in the server/cloud for the raw log images (that not yet being processed). We should have a directory for each category of log (there can be a variety of log image).
- After the log files being processed and break into parts/pieces, the user should designate output directories for the section of log files process by the Template algorithm.
Challenge Goal
- Create a wireframe that engaging and well thought out experience for the Log Digitization application that allows people to structured, organized, and categorizes all log file documents according to the method of data extraction (i.e. fully manual, fully automated, and in between) such categorization could itself be automated based on document templates.
- Breaking the expected data to be extracted and the format in which it will be extracted (i.e. text data, any image data, graph data) into specific approaches such as OCR text extraction, image extraction through OpenCV, or pattern recognition for graph data sets
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
Flow and UX Consideration
- Focus on general navigation between all required screens and functionalities
- Easy and intuitive use for tech and non-tech users.
- The target device for this application is Web.
- We are looking for your ideas here!
Wireframe Expectations
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- The application must be very easy to use and intuitive. Keep that in mind when creating your solution for the layout and flow information
Screen/Features Required for the App
Below are some of the screens that we suggest based on the above concept, feel free to expand on your concepts:
1. Log File List page
- Ability to see all complete list of Log file here
- User can filter to see the Log file progress (uploaded, on process, completed, etc)
- Clicking the content list will show the Log file details
2. Upload Log File
- User will be able to upload new log file from this screen
- There should be several process available in this screen, which are:
-- Upload new log file
-- Preview the uploaded log file
-- Break the log file image into several parts/pieces for further processing,The pieces here means the image will be cropped into several sections of an image: Header, Depth Section, Gas Cutting Section, Mud Sampling Description Section, Drilling Speed. There might be a few others.
- When uploading a new log file, the user will need to be locate and create folder/directories in the server/cloud for the raw log images (that not yet being processeed). We should have directory for each each category of log (there can be variety of log image).
3. Template Creator
- User will iterate through other images and will notice/see how the template boundaries work.
- After the images collected and break into several same parts (templating), the user then will mark/mapping/put some details into the cropped image about the type of info that needs to be retrieve for example: Text Fields, Orientation of Text, Boundaries of Text Field Areas, Text Value Metadata (i.e, 4 digit numbers), Background Metadata - (Grids to remove?), Areas of Header for Graph scaling, Graphing Data to Extract.
- A template creator will allow us to create a template absed on Log file similarity.
- Each template will be a representation of the divisions or sections of a set of Mug Log files (or other scanned image documents).
- Each section will need to be processed differently.
- The idea is that there will be a group of documents that have a similar layout and will each have sections that can be processed in a similar way.
- After the log files being processed and break into parts/pieces, the user should designate output directories for the section of log files process by the Template algorithm.
4. Template Content Editor
- After the Log files break into parts, the next process is to marking the scanned log file (image type format) with some field form mapping for every log file sections
- The user needs to be pretty specific when retrieve the info.
- The more detail that users provide about the sections of the document the more likely that the application will be able to identify and retrieve correct info.
- Here are some field mapping that can be added by the content editor to the Log files:
-- Ordinary form fields - for ex, textbox, checkbox, radio button, textarea, etc
-- Orientation of Text - Horizontal vs Vertical orientation
-- Boundaries of Text Field area - If user going to perform OCR on a given area...the smaller the area around the text you hope to collect the less likely you will include words which aren't relevant.
-- Text Value Metadata - kind of unique 4 digit number? We're thinking about format masks for dates and numbers.
-- Background Metadata - see the gridded areas backing the graphs in the attach mud log files
-- Areas of Header for Graph scaling - The depth is the vertical scale of these documents. But in order to interpret the graphs, we need to understand the horizontal scales as well above the individual graphing components like Drilling Rate, Penetration Rate, Gas from Cuttings, etc
-- Graphing Data to Extract - Interpreting the lines from the graphs in an automated way
-- What else we can put in here?
- we'll need to be able to name templates and see some details about them. For example, in Salesforce.com there is view functionality and edit functionality. We'll need to be able to do both in the app along with the ability see a list of templates.
5. Content Audit
- User will be able to review the content and generate specific report from this screen
- See report based on timeline? Metadata? Etc?
- Needs input form where user added their report boundaries
- Needs to see the preview of the report
- Ability to export the report as PDF, XLS, or other 3rd party docs
6. Settings Feature
- Ability to set Inputs and Outputs folder, the actual image files (the original scanned images, input) and the breakdown image files (output) will be added to a folder in the server.
- Ability to set database functionality to store all the data collected about the field and sections types and boundaries from the various templates.
Documentation
- Sample Log Image files
- Log Digitization Ideation 1.0.doc (Specification Document)
New to Axure RP, get started right away!!
- Here are some quick tutorials to help you get started http://www.axure.com/support
Screen Size
- Desktop: 1366px(w) & height up to your design
Target Audience
- Geologist and IT staff at an Oil and Gas Exploration company.
Judging Criteria
- User experience and information architecture
- Expanding upon and creating unique features for the provided concepts
- Visual-driven, clear, concise, and meaningful data display
- Capture all the required fields on every page
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent 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
- Wireframes should be clickable and can be opened in all major browser without issue (HTML/CSS/JS).
- IMPORTANT! Make sure all the content is listed and the pages are linked together to show page flow.
- Keep your source files out from this submission folder.
Source Files
- All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file
- You can built the wireframes using Plain HTML/CSS/JS or you can generate from Axure application. Other option is using Sketch with Black/White theme (needs to be clickable).
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.