Anemoi - Data Pipeline Design Challenge

Welcome to Anemoi - Data Pipeline Design Concepts Challenge!

This challenge is focused on creating visual designs and ideas for an application which manages Big Data analysis systems. It 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.

We are looking for an innovative, easy to understand, and intuitive user interface and user experience to visualize and interact with the data source processing pipeline. The UI should be easy to understand, clean, modern, and intuitive to user familiar with the process and data.

Previously we ran a wireframe challenge to build the screens needed for this tool, and you will be provided with the wireframes we built.

Note: Please do not submit a colored version of the wireframes as they are just meant to guide you, necessary outline screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your design style, ideas, and solutions to this design challenge. Use the wireframes as a base level for general layouts and functionality.

Round 1

Submit your design for a Checkpoint feedback:
1. Login.
2. My Pipelines.
3. Dashboard.
4. Creating New Pipeline.
5. Pipeline Detail.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Final design plus Checkpoint feedback:
1. Login.
2. My Pipelines.
3. Dashboard.
4. Creating New Pipeline.
5. Pipeline Detail.
6. Edit a Pipeline.
7. Audit Log.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

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.

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://drive.google.com/file/d/0B9lpcmurgZ35WlkyWUV2OW9IRjQ/view

Challenge Description:
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.

Make sure you look at the User Flow Diagram AND Pipeline Diagrams & Examples documents (InVision board) to get a better idea of how these flows and processes fit together and how pipelines can be structured. These will give you a good background into what went into creating the wireframes. Use these additional inputs along with the wireframes to build out your UI solutions.

Branding Guidelines:
We have created a Design Direction site that has downloadable wireframes, branding guidelines, additional information, and inspiration. Use this site as a one-stop-shop for all of your input into this challenge: https://projects.invisionapp.com/boards/KX14M76UTHWAG/

Design Considerations:

• The designs colors need to be easily updatable via css. For Example: All CTAs should have the same colors, etc. Think about easy updatability when designing.

• It will be best to keep a clean neutral color scheme to allow for future branding updates and changes.

• We need to make sure there is good contrast between font colors on their background. This is for accessibility reasons. A 20% difference in contrast is a good rule to follow.

Screen Size Requirements:
Desktop Responsive

• Small Desktop: 1280px wide (Height can expand. Keep important information above 766px if possible)

• Large Desktop: 2560px wide (Height can expand)

We are interested in seeing how the layout can adapt between these 2 sizes. What information, panels. etc. can be hidden on the 1280px screen? How does the layout change and respond to the much larger 2560px size? How can the larger size make creating a pipeline for the user easier? Or reveal additional useful information?

Pipeline Notes:

• There will be roughly 10-100 pipelines in the system at any one time. Make sure your UX and UI accounts for navigating and viewing that number of pipelines in an efficient way.

• Each pipeline would typically have fewer than 20 objects (Acquirer, Process, Stages, etc.)

• There will likely be 20 to 50 types of Acquirers that the user will be selecting from. Make sure you are accounting for this and allowing the user to select from that many items in an easy and effective way.

• 10 types of Data Stores to select from.

Screen Requirements:
Use the provided wireframes as your guide for specific functionality and features that must be included in your designs. Layouts can change if their is a better solution for organizing and presenting the content.

Screen 1 - Login

• Basic login information: username and password

Screen 2 - My Pipelines

• Search and Filtering capabilities

• Quick link to “Create New Pipeline”

• Multiple views/ tabs of pipelines; based on status or groupings

• High level stats, information, and action items for each pipeline

• Expandable view of a pipeline for view additional information: health, history/ activity, etc.

• Clicking on Pipeline Name takes the user to the Pipeline Detail Screen.

Screen 3 - Dashboard

• A top level screen for monitoring and viewing metrics, statistics and information across ALL of the pipelines the user has access to

• Use the wireframes as your guide for the types of visualization and data that we are looking to showcase.

• Show us some different graph and visualization options. The exact content is not necessary at this point. We just want some options to choose from

Screen 4 - Create New Pipeline

• Drag and drop functionality

• Icons/ graphics to represent each object in a pipeline

• Slide-out panels for configuration of each object and setting up the pipeline

• Artboard/ canvas controls: zoom, reposition, fullscreen, etc.

• Configuring each object as it’s placed on the artboard/ canvas

• Grouping and connecting objects together (reference the examples for ideas)

• Multi-step process for configuring a Data Store

• Validating, saving, and submitting a Pipeline

Screen 5 - Pipeline Detail

A robust and detailed view of a Pipeline and its corresponding information. Possible extension or additional ideas for this page could include user configurable modules or options to show/ hide different sections of content.

• Alerts/ notifications

• Health metrics and information

• History and Activity Log

• Visual representation of the Pipeline

• List of objects/ components of the pipeline and their individual statuses along with additional information for monitoring

• User access and permissions. Who is able to access this pipeline and what are their roles/ permissions. Ability to configure this or change/ update permissions directly.

• Statistics and metric visualizations and graphs. Include additional tooltips and hover states for view the content easier. the D3.js library has some great examples of how to handle these types of graphs and charts

Screen 6 - Edit a Pipeline

• Follows a similar layout and functionality as the Create New Pipeline

• The user is presented with a completed Pipeline that they can edit/ change via the same configuration slide-out panels

• Use the wireframes as your guide

Screen 7 - Audit Log

• A top level screen for seeing and monitoring all of the activity across ALL of the pipelines the user has access to

• Options to sort, and view pipelines by name, user, or date created

• Options to Share, Print, Email, and Export the data

Steps & Processes for Creating a Pipeline:
This information serves as good background information for understanding the process. The wireframes are already doing a good job of capturing these steps, processes and flow. Use this for additional context.

1 - Adding a New Acquirer

• A user selects the option to add a new acquirer and supplies a human-readable name for the source. The user will need to select an acquirer type to be set up. They may also need to specify configuration parameters (which will vary by acquirer).

2 - Adding a New Process

• A user selects the option to add a new process and supplies a human-readable name. The user will select the execution engine they wish the process to run on (from a dynamic list of those available on the system)

• Once the process has been added, the user can add one or more stages to the process. Note that the stage options available will depend on the execution engine selected above. Some execution engines will support multiple stages in a process and some will only allow a single stage

• Each stage will require configuration – this configuration will vary depending on the stage type.

3 - Adding a New Data Store

• A user selects the option to add a new data store and supplies a human-readable name

• The user will select a type of data store from the list of those available on the system.

4 – Submitting Changes to the Pipeline

• Once all changes have been made to the pipeline, the user selects an option to send that configuration to the system.

• After the user submits their selection they receive a confirmation that the pipeline has been created (note that there are two stages – the first that their request has been accepted and at some point later they will receive confirmation that the creation has succeeded).

• Ideally, the user will see each of the elements in the pipeline becoming available on the system and then receive further feedback that the whole pipeline is available. Note that the provisioning of a pipeline could take some minutes.

Additional Input and Resources:
We’ve compiled some additional inputs, resources, and examples into an InVision Board. Use this to view and download additional information and assets that will be useful for your wireframes.

• Wireframes: The main source of input for this challenge. Use this as your guide for functionality, features, UX, and flows that MUST be included in your designs.

• User Flow Diagram: This document outlines the user flow and steps for Creating a Pipeline and Editing an Existing Pipeline. This also visualizes the structure of the site how pages are linking together.

• Pipeline Diagrams & Examples: Outlines some common pipeline structures and layouts.

• Definitions: We’ve compiled some definitions that are used throughout the spec and wireframes to help you understand the terminology being used. Note, not all terms and definitions provided here are applicable, but will hopefully give you some additional background and understanding.

Important:

• Keep things consistent. This means all graphic styles should work together.

• All of the graphics should have a similar feel and general aesthetic appearance

• Keep your designs open, modern and clean

• Make sure you are colors and styles in a way that allows for each updates in the future via CSS styles. For example: all CTAs should use the same color.

• Use the wireframes as your base structure for features, functionality, UX and user flows.

• DO NOT show us a colored in version of wireframes. We want to see high-fidelity, thoughtful UI designs.

Target Audience:
Anemoi employees who are going to manage pipelines and are familiar with the data and information

Judging Criteria:

• Overall User Experience and UI design

• Completeness and accuracy of the designs as defined in the attached requirements.

• How well your designs provide a consistent user flow and style

• How well your designs captures all the requirements.

• Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)

• Wow factor! We want to be impressed with the overall design and execution.

• Innovative ideas and ways to interact and handle the content. This could be via functionality and/ or UI elements.

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 and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

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. See more information about Final Fixes