Challenge Summary
Welcome to Quartz DKS Web Application Design Challenge.
We need your wise help to come up with original concepts around a desktop web application that will predict problems and serve as tool for allowing users to score these issues through a very easy-to-use platform.
It’s a simple, straight forward project, we are open to suggestions about finding creative ways to display the problems and scores. Jump in now!
Best of luck!
1. Forecast
2. Items of Interest
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Forecast
2. Items of Interest
- 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 challenge is to come up with original ideas around a quick problem solver solution, it’s a problem prediction engine. We’ll need a desktop web application that helps our users interact with this information.
You are provided with stories and requirements to come up with the solution. Creative approaches are welcomed.
Workflow
- Any user from the company can access the application.
- Login/registration is not required, direct access.
- In the first page, user gets to select any facility available from around the world.
- Next, user sees a set of problem predictions for the selected facility.
- User is able to interact with the predictions, by viewing more details or by assigning importance values to the items.
- User is able to save records as “interesting/favorites” (see below for details).
Concept Goals
The engine uses the facility and the “24 hour forecast” (not a prediction forecast, this is merely what the user intends to do over the next day) entered by the user to predict operational issues/problems that may arise, based on past experience. These issues/problems are displayed to end users in a list. The end user clicks on relevant issues and can see additional details on an adjacent frame. The user needs to be able to score entries based on relevance. This helps train the models.
All this workflow must be achieved through a very intuitive user interface. Something to consider is the relevance factor, many predictions/results won’t be relevant to the user, we need you to think how to mitigate the visual impact of relevant vs not that relevant results, in order to allow users picking out quickly what needs more attention.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Forecast
First page of the process. First, it allows the user to select a facility. The amount of facilities could be large, e.g. Green Farm, Red Farm,Connecticut Farm, etc. Use dummy data.
Automatically after selecting the facility (e.g. USA) have an area to display the following a message (forecast plan for the next 24 hours), use this one as sample:
“Pump out of the hole to 25,140’. Circulate B/U. Pump slug and POOH from 25,140’ to surface. R/U CC23 to log as per CC80 program”.
Prediction List
Once the facility is selected, besides the 24h plan message, the results of the prediction engine are displayed right here on this same page also. There could be 2 dozen or more results listed. The user should be able to scan them very quickly to look for relevant “hits”.
Below/aside the message (up to you), display a list of “problems” with the following structure:
- Error Code & Subcode (eg: A -- Weeds/Dandelions, A -- Weeds/grass, B -- Bugs/Beetles, B -- Bugs/Aphids, C-- etc,
- Water Depth (10”, 10”, 15”, etc).
- Short description/title; in the description, some keywords should be highlighted.
- Type (Depth Match, Time Match, Keyword Match, Prediction).
Set Relevance
Each prediction result can be expanded to see more details, same page or popup might work. Details would include:
- Longer description.
- Date / Time.
- Farmer.
- Lesson Learned (2~3 paragraphs text).
User can set an relevance value to the selected result, with the goal of providing appreciation to the predictions and let the system learn from it. Relevance can be set either in the list or the details expanded page/section.
Relevance values could be any of the following but we are open to suggestions:
- Simple yes/no.
- Low, medium, high.
Add Items of Interest
Users should be able to add/mark results as “interesting”. Our approach is to create an area where the user can drag one or more results from the above, and drop them in order to "collect" them as items of interest.
When a user does this, the user must enter notes or a brief story to explain why they think these results are relevant. User can keep adding notes. This forms a collection.
User can enter his or her name in a separate field in order to keep track of their collection..
A user can start new collections too.
User should be prompted with a “Name” input text field. This way the system will be able to relate him/her to the added items of interest. This could be requested at the beginning or the end of the page, open to suggestions.
2. Items of Interest
These collections of results will be displayed a separate page. Anyone can enter and see everyone’s else collections in a single page. Notice this is not a “My collections” page, it contains the collections of all the users.
Display a list of the collections. Recap: each collection has the following information:
- Author (captured name from above).
- Amount of results of the collection.
- List of results (clicking an entry brings up the “Add/Edit” item/result view, probably replicating the results view from above to show results expanded details).
Allow filtering through the following parameters:
- User (name).
- Facility.
- Error code.
Branding Guidelines
- We don’t have logo. Don’t use any in the design.
- We are open to color suggestions and typography. Keep it simple and elegant, no more than two/three colors, blue shades could be a good start but we are open to suggestions.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min 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) and/or Adroc (adroc@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
User who manages a large team that works with heavy equipments in agriculture industry.
Judging Criteria
- How interesting and engaging is your workflow?
- The app may produce a LOT of results (dozens) - are they easy to view and manage?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- 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 Sketch, Adobe Photoshop or Illustrator. 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.
We need your wise help to come up with original concepts around a desktop web application that will predict problems and serve as tool for allowing users to score these issues through a very easy-to-use platform.
It’s a simple, straight forward project, we are open to suggestions about finding creative ways to display the problems and scores. Jump in now!
Best of luck!
Round 1
Submit all your design screens for a checkpoint feedback.1. Forecast
2. Items of Interest
- 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 (ALL VIEWS).1. Forecast
2. Items of Interest
- 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 challenge is to come up with original ideas around a quick problem solver solution, it’s a problem prediction engine. We’ll need a desktop web application that helps our users interact with this information.
You are provided with stories and requirements to come up with the solution. Creative approaches are welcomed.
Workflow
- Any user from the company can access the application.
- Login/registration is not required, direct access.
- In the first page, user gets to select any facility available from around the world.
- Next, user sees a set of problem predictions for the selected facility.
- User is able to interact with the predictions, by viewing more details or by assigning importance values to the items.
- User is able to save records as “interesting/favorites” (see below for details).
Concept Goals
The engine uses the facility and the “24 hour forecast” (not a prediction forecast, this is merely what the user intends to do over the next day) entered by the user to predict operational issues/problems that may arise, based on past experience. These issues/problems are displayed to end users in a list. The end user clicks on relevant issues and can see additional details on an adjacent frame. The user needs to be able to score entries based on relevance. This helps train the models.
All this workflow must be achieved through a very intuitive user interface. Something to consider is the relevance factor, many predictions/results won’t be relevant to the user, we need you to think how to mitigate the visual impact of relevant vs not that relevant results, in order to allow users picking out quickly what needs more attention.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Forecast
First page of the process. First, it allows the user to select a facility. The amount of facilities could be large, e.g. Green Farm, Red Farm,Connecticut Farm, etc. Use dummy data.
Automatically after selecting the facility (e.g. USA) have an area to display the following a message (forecast plan for the next 24 hours), use this one as sample:
“Pump out of the hole to 25,140’. Circulate B/U. Pump slug and POOH from 25,140’ to surface. R/U CC23 to log as per CC80 program”.
Prediction List
Once the facility is selected, besides the 24h plan message, the results of the prediction engine are displayed right here on this same page also. There could be 2 dozen or more results listed. The user should be able to scan them very quickly to look for relevant “hits”.
Below/aside the message (up to you), display a list of “problems” with the following structure:
- Error Code & Subcode (eg: A -- Weeds/Dandelions, A -- Weeds/grass, B -- Bugs/Beetles, B -- Bugs/Aphids, C-- etc,
- Water Depth (10”, 10”, 15”, etc).
- Short description/title; in the description, some keywords should be highlighted.
- Type (Depth Match, Time Match, Keyword Match, Prediction).
Set Relevance
Each prediction result can be expanded to see more details, same page or popup might work. Details would include:
- Longer description.
- Date / Time.
- Farmer.
- Lesson Learned (2~3 paragraphs text).
User can set an relevance value to the selected result, with the goal of providing appreciation to the predictions and let the system learn from it. Relevance can be set either in the list or the details expanded page/section.
Relevance values could be any of the following but we are open to suggestions:
- Simple yes/no.
- Low, medium, high.
Add Items of Interest
Users should be able to add/mark results as “interesting”. Our approach is to create an area where the user can drag one or more results from the above, and drop them in order to "collect" them as items of interest.
When a user does this, the user must enter notes or a brief story to explain why they think these results are relevant. User can keep adding notes. This forms a collection.
User can enter his or her name in a separate field in order to keep track of their collection..
A user can start new collections too.
User should be prompted with a “Name” input text field. This way the system will be able to relate him/her to the added items of interest. This could be requested at the beginning or the end of the page, open to suggestions.
2. Items of Interest
These collections of results will be displayed a separate page. Anyone can enter and see everyone’s else collections in a single page. Notice this is not a “My collections” page, it contains the collections of all the users.
Display a list of the collections. Recap: each collection has the following information:
- Author (captured name from above).
- Amount of results of the collection.
- List of results (clicking an entry brings up the “Add/Edit” item/result view, probably replicating the results view from above to show results expanded details).
Allow filtering through the following parameters:
- User (name).
- Facility.
- Error code.
Branding Guidelines
- We don’t have logo. Don’t use any in the design.
- We are open to color suggestions and typography. Keep it simple and elegant, no more than two/three colors, blue shades could be a good start but we are open to suggestions.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min 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) and/or Adroc (adroc@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
User who manages a large team that works with heavy equipments in agriculture industry.
Judging Criteria
- How interesting and engaging is your workflow?
- The app may produce a LOT of results (dozens) - are they easy to view and manage?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- 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 Sketch, Adobe Photoshop or Illustrator. 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.