Challenge Summary
We need your help to design a simple web tool which will use edge features such as image recognition and artificial intelligence to examine pictures of thin sections (rocks slices), collect data while displaying some statistics; it’s that simple!
Best of luck.
Round 1
Submit your design for a checkpoint feedback.1. Thin Section Analysis (all features)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback.1. Thin Section Analysis (all features)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a browser web application for the oil and gas industry. This application will help users automatically processing data of thin sections and displaying statistics. We have the core workflow and references to share with you so you have a solid start towards the goal.
Design Problem in a Nutshell
Background
Rocks are made up of different combinations of grains/minerals that can be defined by their different geometric and optical properties. In order to understand the makeup of these rocks thin sections are extremely important. A thin section is a small semi-transparent sample of rock that can be viewed under a microscope (a slice of rock). These are made by attaching a ground-to-flat section of rock to a glass slide and then grinding the remainder down to a certain minimum thickness (more info about thin sections).
Thin sections provide grain information and rock properties that could benefit with reserve calculations and helpful insight on drilling.
Problems at Quartz Wells
- Thin sections are underutilized.
- Manually creating most thin section description is very tedious, costly, and time-consuming.
- Manual interpretation of thin section is done at a dramatic cost.
- Difficult to integrate and upscale into larger analysis.
Solution
A lightweight tool that helps to describe and collating thin section data using the images. User would process specific thin sections pictures, interact with the view and see results. This will allow saving time for a petrophysicist during his/her daily operations as well as improving the efficiency with reserve calculation and drilling insights.
Big Picture
The following information is just for context. The ultimate goal is to develop an application which uses supervised learning algorithms that can perform the necessary calculations and identify the various minerals present in the images automatically. The app itself will provide updated training data for the supervised learning routines. However, we are focusing on a first phase which is to manually upload the pictures, process them and displaying statistics.
Concept Design Goals
We are looking forward to seeing a lightweight tool, simplistic. It needs to solve the problem in a simple way considering the data insights that can be delivered to the user, what interests to the user the most.
Among the most sensitive considerations:
- The design must be apt to allow the user interacting with the main image, as well with the relationship between the statistics and the main image/results.
- The design must be serious and professional looking.
- The design MUST NOT be cluttered either hard to read/follow.
- The design solution must be simple enough to let the user load the pictures, process them, manipulate the visual cues and seeing accurate statistics.
Workflow
The workflow is quite straightforward, one single user role with specific actions to perform:
- User uploads one or several images.
- User selects which pictures he/she wants to process.
- Once the analysis is triggered, a process phase takes place in the background, unsupervised learning of the system: image recognition, boundary assignment, classification of different regions.
- User can then manually interact with the image, refining the unsupervised processing with user experience (manual boundary assignment, manual region labeling, etc).
- User can see the statistics/results, choose annotation types and/or export data.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to seeing your unique proposals. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Thin Section Analysis
Follow the provided mockup as a visual reference. We are open to suggestions about how to organize the elements in the UI. The tool should feature the following sections.
Load Images
User should be able to upload one or N amount of images, set into a processing queue after uploading.
Well Information
There should be an editable section with information about the well. User can enter and see the following info to relate it to the uploaded photos:
- Well Name.
- Well ID.
- Well Depth.
Pictures List/Queue
- User is able to see a set of photos (thin slices thumbnails) plus file name.
- User can select which photo to preview and process.
Color Range
This zone displays the RGB color codes and names of the colors contained in the photo.
Process Image
Call to action to trigger the image processing. There should exist a mechanism to navigate the user through the processed photos (maybe next/prev?).
Image View
- It will display the picture of the thin section. It should be immensely large, it’s the most prominent feature of this tool.
- It should allow zoom in/out, panning.
- It should allow seeing the results of the processing for each pixel of the image by moving the mouse around the image. It should display if the pixel is A) Grain; B) Clay or C) Porosity; then the respective value (e.g. grain number, grain size, grain area, sphericity, angularity, and mineral type).
- User should be able to see the groups of regions that are similar (belong to the same grain group, pore space, etc).
- User should be able to change annotation types: None (original image), grain identification, mineralogy type. They allow changing the way the image is displayed depending on the selected annotation.
Statistics
User needs to see the gathered statistics for each image:
- Individual grain area per grain.
- Skewness.
- Kurtosis.
- Number of separate mineral types on the image.
- Number of individuated grains.
- Mineralogy, number of distinct grain types on the image.
- Grain size distribution for the whole image and for each mineral type.
- Porosity types (primary, secondary) and values for the image.
- Grain shape/sphericity for the whole image and for each mineral type:
-- Sorting for the whole image and for each mineral type
-- Grain contacts for the whole image and for each mineral type on average
- Note: there should be interactivity features among statistics and the visual somehow. For instance, if the user highlights/hovers/select the porosity in the stats view, then the porosity regions get highlighted in the visual.
Export Data
The tool allows saving a csv or excel file with all the statistics. Create this mechanism (link/button).
Expected Deliverables
We expect to receive at least the following screens in order to perform a proper review of the solution:
1. Showcase how the user would upload screen (s) and how it affects the Image List, Statistics, and other panels.
2. Showcase how the user would enter or edit the Well Information.
3. Showcase how to navigate the processing queue once “process image” gets activated.
4. Showcase all the Image View features: zooming, panning, pixel hover statistics, regions display, annotation types change.
Branding Guidelines
- Use a logo placeholder.
- Primary color #015C8C, secondary #2CC4EC, tertiary #001630 alongside with light grays and whites. Overall, open to suggestions but keep blue as primary brand.
- Fonts open to suggestion.
- Keep things consistent. This means all graphics styles should work together.
Screen Specifications
- Desktop: 1280px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission 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 User
- Geophysicists from Oil and Gas industry. Tech-savvy users.
Judging Criteria
- Is the image process flow easy to capture and follow?
- Easy interactivity with the image, interactivity between the statistics view and the image, user interactivity with the image itself.
- Interpretation of the user experience.
- Is the application visually appealing?
- Cleanliness of your graphics and design.
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.