Challenge Overview
Challenge Overview:
Welcome to the Agon - Analytics Tool UI Prototype POC Challenge! The client for this project has a proprietary analytics tool. They are currently building out a web-based version of this tool. The tool generates a series of visualizations and maps that are dynamic depending on what is being filtered. Besides these visualizations an important part of the analytic tool is a control which filters the data (used to navigate through the data). To filter data, we use structured natural language queries. By stacking multiple of these queries, users can filter the data, on which visualizations are created. We have already created screen designs for this new app in a previous challenge, and now the client would like to take these natural language queries further and build a visual programming editor that allows users to visually define/configure sentences that specify refinements and metrics.
In this challenge, we are looking for you to build a basic prototype of a visual programming editor (examples of existing editors are listed below). The prototype should be created using HTML5. We are just looking for basic code to prove out this concepts, and you are allowed to leverage existing open-source libraries. The goal is to prove out the concept and have something the client can actually get their hands on to experiment with.
We look forward to seeing your UI prototypes!
Project Background:
Agon have an analytics tool that provides a filter focused UI and visualizations that map funding processes. The solution is a Windows desktop application that is being converted to become more web-based in a separate stream of work.
We are currently building a web front-end for our analytics tool. In the final version it should have dashboard-like behavior, as it should be able to place multiple visualizations of the same dataset on a single screen. Besides these visualizations an important part of our analytic tool is the 'tv remote' to navigate through the data. To filter data we use structured natural language queries. By stacking multiple of these queries, users can filter the data, on which visualizations are created. The client is also looking to include a visual programming editor that allows users to visually define/configure sentences that specify refinements and metrics.
Challenge Primary Goals:
For this challenge, we are asking you to put together a clickable prototype for a visual sentence editor that allows the user to visually define/configure sentences that specify refinements and metrics. Validation for this initial prototype can be minimal, but we would ask you to please pick a solution that can be expanded in future challenges to include more verification / validation when visually combining parts of sentences. The UI can be basic for this initial prototype, and you may leverage existing open-source libraries (examples listed below).
Examples of visual editors that could potentially be leveraged for this challenge:
1) Blockly - https://developers.google.com/blockly/ (might be a little too complicated for what we need)
2) Scratch, especially the junior version, because of its simplicity: http://www.scratchjr.org/index.html
3) PocketCode: https://share.catrob.at/pocketcode/stepByStep/7
4) HopScotch: https://www.gethopscotch.com/
Please do NOT just create a clone of one of these examples, we want you to use these as a starting point to think about the best way to meet our specific needs. We want you to also think about other 'tools' to build sentences. For example:
- The game "Build a Sentence" (shown in the attached example picture). However this game only allows for very simple sentences (always 5 cards).
- Intellisense as seen in the example picture of Visual Studio and Small Basic. Allows for even further complexity then Blockly, but could be an inspiration.
IMPORTANT: The client is looking something "which, in terms of complexity, fits between Blockly and the ‘Build a Sentence’ game".
General Requirements:
The following are general guidelines you must follow in building the prototype:
- Produce a UI Prototype that can be used to demonstrate a visual sentence editor that can be used to build all the example sentences in “Examples.txt”.
- The UI prototype should meet all the requirements explained in the attached PPT file (Agon - Analytics Tool - Visual Editor Requirements.pptx).
- The new application will be a responsive HTML5 application. You may focus on 1024px, but the prototype should be fluid and work on other screen sizes.
- The application will be built using HTML5.
- Implement hover state for all buttons and links.
- All elements (such as the select boxes, radio buttons and checkboxes) will be HTML5 based. If any screen design elements look different in the storyboard (like the style in Safari / Mac OSX) and cannot be styled exactly the same way for a HTML5 based UI prototype, it is okay for the UI prototype to use the closest HTML5 look and style match (please confirm on forums if it is a big difference).
The following are specific requirements for HTML, CSS and Javascript files:- Please provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use HTML5 code.
- Please use clean indentation for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Validate your code, reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- The UI prototype should look the same on all platforms (browser requirements listed below).
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent".)
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You are allowed to use the JQuery JavaScript library for this contest.
- Pagination is required to be included where necessary.
Prototype Requirements:
The requirements for this prototype are explained in the attached PPT file (Agon - Analytics Tool - Visual Editor Requirements.pptx). The file “Examples.txt” gives some sentence examples the prototype should be able to visually build.
Please keep in mind, the prototype for a visual sentence editor you are building for this challenge will eventually be integrated into the Agon Analytics Tool. You can view the design concept screens from the previous challenge to get an idea of what this new application will look like (screenshots from the existing application are also provided as a reference).
As a quick overview, the client is looking for this UI prototype to include an interactive UI to visually build natural language sentences and demonstrate how to:
1) Combine parts into sentences
2) Combine parts into step selections
3) Configure parts:
a: Select entity type (i.e. trace, event, user)
b: Handpick entities (i.e. US, UK, Marc, John)
c: Select aggregation (i.e. any, all, total, average)
d: Select compare function (i.e. greater then, before, less then or equal)
e: Input text, number, date/time and timespans (i.e. 31/12/2015, 3 days, 10 seconds, 123.45, "complete"
NOTE: See the attached PPT file (Agon - Analytics Tool - Visual Editor Requirements.pptx) for additional detail.
Deliverables:
A clickable, HTML5 prototype for a visual sentence editor that allows the user to visually define/configure sentences that specify refinements and metrics. Validation for this initial prototype can be minimal, but we would ask you to please pick a solution that can be expanded in future challenges to include more verification / validation when visually combining parts of sentences. The UI can be basic for this initial prototype, and you may leverage existing open-source libraries examples listed above).
Screen Requirements:
Desktop Resolution:
1280 x 800px at 72dpi (length can extend to fit your designs)
Supporting Documents:
"Agon - Analytics Tool - Visual Editor Requirements.pptx" - Requirements for this prototype. Please read this file carefully.
"Examples.txt" gives some sentence examples the prototype should be able to visually build.
Design Concepts Screens (new app)
example images.zip - Contains some examplem images to help explain the requirements we decribed above.
Browsers and Standards:
Your submission must work on the browsers listed below:
- IE10+
- Safari latest version on Mac & Windows
- Firefox latest version on Mac & Windows
- Chrome latest version on Mac & Windows
Final Submission Guidelines
Please submit a zip file that contains all the HTML5/CSS/JS/images and other required files into Online Review.