Anemoi Data Pipeline UI Prototype Contest - Part 1

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

Important Note

We found out that members from certain countries are restricted from working on this challenge, due to the client’s company policies. 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.

If your country is highlighted in red in the following sheet your submission WILL NOT be accepted, unfortunately. 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

Project Overview
Our client is focused on creating visual designs and ideas for an application which manages Big Data analysis systems. The application is responsible for acquiring data into the system and then coordinating the storage and analysis of that data. It additionally provides standard patterns for data logging and metric collection.

The goal of this challenge is to design a web front-end that manages a set of pipelines for processing data. The service is responsible for adding, removing, and managing flows of data into the system. The application allows the user to configure a pipeline, as well as manage previously built pipelines. The structure and high-level workflow is similar to Apache nifi and AWS CloudFormation Designer.

Contest Overview
We ran a Design contest earlier where we created multiple screens for the Data Pipeline project.

As part of this contest, we would like you to take the screen that were created as part of the design contest and create a HTML / CSS Prototype for our client.

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

1. 01_1_login.png

2. 01_2_login.png

3. 01_3_login.png

4. 02_1_Pipeline_list_view_1280.png

5. 02_2_Pipeline_list_view_1280.png

6. 02_3_Pipeline_list_view_1280.png

7. 02_4_Pipeline_list_view_filter_1280.png

8. 03_1_Pipeline_grid_view_1280.png

9. 03_2_Pipeline_grid_view_1280.png

10. 03_3_Pipeline_grid_view_notification_1280.png

11. 04_Pipeline_list_view_2560.png

 

Some points regarding the designs that you need to note:

1. This a non-functional prototype.

2. Login page - The Login button is disabled (see design) until both username and password fields are entered. The username and password fields can be reset by clicking the (x) icon next to the input fields. This is NOT meant to be a browser specific feature (think IE) but functions similar to it and is available for all browsers.

3. Login page - you need to demonstrate failed login too.

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

5. After logging in, show hover states for the “My Pipelines”, “Dashboard” and “Audit Log” links at the top. Show the orange underline indicator.

6. Also show hover states for the sidebar links where the background color changes to the one currently shown for the “All” link.

7. In 04_Pipeline_list_view_2560.png the charts are images.

 

In addition to the above points, kindly note the following before you start creating the UI prototype:

1. You have to use SASS for your stylesheets. Follow best practices here and take advantage of it.

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

3. You only need to use HTML5 and CSS3 for your prototype. Only Javascript libraries are allowed. No Javascript framework to be used. For example, please do not use AngularJS. You can use jQuery though for any dynamic behaviour that cannot be achieved using CSS. You need not even map any data to JSON files. You can directly use them in the HTML files without any mapping. Kindly make sure that your Javascript use is MINIMAL.

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

5. Use Arial font for the screens everywhere.

6. You need to target Google Chrome and IE 11+ only. The resolution you need to support are 1280x1024 and 2560x1440. Some screens have different layout for 2560x1440 resolution but for this contest, all screens have the same layout for both the resolutions. 04_Pipeline_list_view_2560.png explicitly is designed for 2560x1440 resolution which you need to follow.

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.

Also, ensure that your Javascript use is minimal. If the same behaviour can be achieved using CSS, go for it.

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