Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to Anemoi Data Pipeline UI Prototype Contest - Part 2 contest. This is the second in a series of UI Prototype contests where we would like you to build a user interface for our clients Data Pipeline Project.

 

IMPORTANT!

Members from certain countries are restricted from working on this challenge, due to the client’s company policy. Challenge submissions cannot be accepted from members registered in a country with a score of 37 or less according to Transparency International's Corruption Perception Index 2015. This includes reviewers too.

Unfortunately if your country is highlighted in red in the following sheet your submission WILL NOT be accepted. This is NOT a new Topcoder policy or something that will become a normal part of future challenges. This is an isolated policy and requirement for this specific client and their challenges. Thank you for your understanding.

https://docs.google.com/spreadsheets/d/1MFZCGwIqgllzWBJuh2adC_BRCCG4kZwN1m8j4ZgbuLc/edit?usp=sharing

 

Set up

  • The base HTML, CSS and Javascript can be found in the Git repository here. Fork this repository and work of this branch. Note that the branch has been automatically selected for you - the feature/30053247_UI_Prototype_2 branch.

  • The additional assets (PSD files) you will need to complete this project can be found in this Git repository here

  • Please contact the co-pilot to gain access to the repositories

 

Project Overview

The goal of this challenge is to design a web front-end that manages a set of pipelines for processing data. The application is responsible for acquiring data into the system and then coordinating the storage and analysis of that data. The application allows the user to configure a pipeline, as well as manage previously built pipelines. It additionally provides standard patterns for data logging and metric collection. The structure and high-level workflow is similar to Apache nifi and AWS CloudFormation Designer.

 

Contest Overview

We ran a Design contest previously where we created multiple screens for the Data Pipeline project. Following that Design contest we launched the first of the UI prototypes contests, the output of which you will used as a basis for building out the remainder of the web application.

 

As part of this contest, we would like you to take the HTML / CSS from the previous UI prototype and the output of the Design contest to build the screens that were created as part of the design contest and create the remainder of the HTML / CSS Prototype for our client. We expect your work to be significantly reduced since you can reuse the existing elements to build the additional screens in scope for this contest. However, in the process, kindly ensure that the existing prototype continues to function as it does currently and that your changes do not introduce any side effects to it.

 

The designs are quite straightforward and simple. Only the following screens are in scope for this contest:

  1. My Pipelines - Pipeline Detail

    1. Overview

    2. Metrics

    3. History

    4. User Access

  2. Dashboard

  3. Audit Log

 

UI Prototype Page Requirements

Below are the required pages for this prototype to be integrated with the screens that have been created from the first UI prototype contest.

  1. My Pipelines tab, Pipeline Detail View - 1280 width. Clicking “My Pipelines” returns the user to 02_1_pipeline_list_view.png

    1. “Overview” left-hand nav. 07_1_pipeline_detail_1280.png - this is the view the user lands on when clicking the arrow icon in 02_2_Pipeline_list_view_1280.png

      1. Graphs are static images

      2. Click the Edit button in either “Overview”, “Metrics”, “History” or “User Access” navs will return the user to the Pipeline Editor.

    2. “Metrics” left-hand nav

      1. Refer to 07_2_pipeline_detail_1280.png

      2. See 07_3_pipeline_detail_1280.png for status check pop-up. On click of the "i", show the popup

      3. Default sort order on page load should be alphabetical on “Name”

      4. Scrolls bars can be used when the number of items exceeds the size of the screen

    3. “History” left-hand nav

      1. Refer to 07_4_pipeline_detail_1280.png

      2. “Audit History” - Clicking on username e.g. “John Snow” should take no action

      3. “Activity Log” - note the different icon and icon colour for Informational notification versus error notification

    4. “User Access” left-hand nav

      1. Refer to 07_5_pipeline_detail_1280.png

      2. “Audit History” - Clicking on username e.g. “John Snow” should take no action

      3. See 07_6_pipeline_detail_1280.png for action of “Trash can” icon in this context

  2. “My Pipelines” tab - 2560 width

    1. Refer to 08_pipeline_detail_2560.png

    2. Note points in 1.1 to 1.5 - the ones regarding Overview, Metrics, History and User Access.

  3. “Dashboard” tab - 1280 width

    1. Refer to 09_1_dashboard.png

    2. Graphs are static images provided in the design repo .psd files.

    3. You DO NOT need to provide the hover state / tooltips shown in 09_2_dashboard_1280.png

  4. “Dashboard” tab - 2560 width

    1. Refer to 10_dashboard_2560.png

    2. Note points above in sections 3.1 and 3.2

    3. Real-Time Monitoring graphs are static images found in the design repo .psd files.

  5. “Audit Log” tab - 1280 width

    1. Refer to 11_1_audit_log_1280.png

    2. Default sort order by “Date” descending

    3. Clicking on username e.g. “John Snow” should take no action

    4. Search dialog has no action.

    5. “Export” icon should display four options with no action.

    6. “Email” and “Print’ icons have no action

  6. “Audit Log” - 2560 width

    1. Refer to 12_audit_log_2560.png

    2. Note points in 5.2 to 5.6

 

In addition to the above points, kindly note the following:

  1. This a non-functional prototype.

  2. The Logo should be “Anemoi” and not “Anomoi”. Please use the correct spelling in your prototype in all pages.

  3. Use texts wherever possible. Images are only for icons and logos. ANEMOI itself will be a text.

  4. Use Arial font for the screens everywhere.

  5. In the “UI Prototype Page Requirements” section above where the screen resolution requirement is “1280 width” i.e. 1280x1024, the screen layout should be identical for all resolutions. Some screens are explicitly designed for “2560 width” i.e. 2560x1440, please ensure your prototype uses the specified layout at this resolution and above.

 

Client Priorities (The items that are considered highest prototype priorities)

  • Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.

  • All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.

  • Matching the storyboards (as close as possible) across the required browsers.

 

CODE REQUIREMENTS

HTML5

  • 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 clean INDENTATION for all HTML code so future developers can follow the code.

  • All HTML code naming should not have any conflicts or errors.

  • 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)

  • Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

  • No inline CSS styles- all styles must be placed in an external stylesheet.

  • 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.

 

CSS3

  • Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.

  • Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

  • Please use clean INDENTATION for all CSS so developers can follow the code.

  • All CSS naming should not have any conflicts.

  • As possible use CSS3 style when create all styling.

  • You MUST use SASS to make the CSS code clean, provide source files on your submission.

  • 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 tables of data/information and not for page layout.

 

Javascript

  • Keep Javascript use to a minimum. Use CSS wherever possible to achieve dynamic behaviour. Where dynamic behaviour cannot be achieved using CSS, you have permission to Javascript libraries (e.g. jQuery).

  • Please DO NOT use Javascript frameworks (e.g. AngularJS).

  • 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.

  • Use bower for any third party libraries. Your submission should not ship with these files. Only provide a bower.json file (and an optional .bowerrc file) mentioning the dependencies.

 

Desktop Browsers Requirements

Windows & Mac OS

  • IE11+

  • Chrome (latest version)

 

Tablet/Mobile

Not required

 


Final Submission Guidelines

Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.

  1. Upload your code as a .zip file to the Submit and Review tool for this contest.

  2. Update documentation (if necessary) for how to run your submission

  3. Winner will be required to submit a pull request against the branch specified

  4. We will require the winner’s assistance when we merge code from the other UI contest running in parallel to this contest

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30053247