Challenge Summary
Welcome to Anemoi - Data Pipeline Wireframe Challenge!
This challenge is focused on creating wireframes 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 the 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.
----
IMPORTANT NOTE:
We found out that members from certain countries are restricted from working on this challenge, due to their own company policies. Member submissions cannot be accepted from members registered in a country with a score of 40 or less according to Transparency International's Corruption Perception Index 2014.
If your country is highlighted in yellow in the following sheet your submission will not be accepted, unfortunately:
https://drive.google.com/file/d/0B9lpcmurgZ35WlkyWUV2OW9IRjQ/view
Please read the forum post for updates and additional details. This has nothing to do with the quality of work and participation from these countries. It is purely based on this specific companies policies. Please ask questions in the forum.
Round 1
Submit your wireframe for a Checkpoint feedback:
1. Login.
2. Dashboard.
3. Creating a New Pipeline.
4. Edit an Existing Pipeline.
Notes.jpg: Any comments about your design for the Client.
Round 2
Final wireframe plus Checkpoint feedback:
1. Login.
2. Dashboard.
3. Creating a New Pipeline.
4. Edit an Existing Pipeline.
Notes.jpg: Any comments about your design for the Client.
Challenge Description:
The goal of this challenge is to wireframe a web front-end that manages a pipeline for processing data sources. The data source service is responsible for adding, removing and managing flows of data into the system. The application also allows the user to customize and 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.
The application will also need to accommodate future pages and sections that are not part of this initial challenge. The UX and structure should allow for these future additions. Examples of future pages/ sections could include; billing, account management, performance metrics, logging, and audit.
Make sure you look at the User Flow Diagram AND Pipeline Diagrams & Examples documents to get a better idea of how these flows and processes fit together and how pipelines can be structured.
Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in required sections below, if any requirement is missing in final submission the client will not look at it, so make a checklist for the required screens to make sure you designed all of them.
- Please show us your proposal as a movie or series of wireframes that communicate the user’s intended interaction with your proposed solution.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Screen Requirements:
Pipeline Notes:
-There will be roughly 10-100 pipelines in the system at any one time. Make sure you UX accounts for navigating that number.
- Each pipeline would typically have fewer than 20 objects (Acquirer, Process, Stages, etc.)
- There would likely be 20 to 50 types of Acquirer. Make sure you are accounting for this and allowing the user to select from that many items.
- 10 types of Data Store.
Screen 1 - Login:
- Basic login information; username and password.
Screen 2 - Dashboard
- See Overall Pipeline(s) status.
- From the dashboard the user should be able to (the user flow diagram will help):
-- Create a pipeline (Screen 3 - Creating a New Pipeline).
-- Search for a pipeline.
-- Editing an Existing Pipeline (Screen 4 - Edit an Existing Pipeline).
-- Delete a pipeline.
-- Start / stop a pipeline.
-- View pipeline history.
-- View pipeline metrics/ health:
---- Events per second.
---- Received bytes per second.
---- Processes: run times, events per second.
---- Batch: when last run, when next.
Screen 3 - Creating a New Pipeline
- The majority of this flow is what we are asking for ideas, concepts, and good user flows around. The steps of this flow is represented pretty well in the User Flow Diagram. The user should be able to quickly jump back and forth between sections as they are creating their pipeline.
Make sure you are referencing the Definitions document for any terms that are unclear. Basic steps include:
- Create new data store (e.g 3 below) or browse/select existing data store.
- Create Acquirer (see 1 - Add a New Acquirer below).
- Create Process (see 2 - Adding a New Process below):
-- Select Execution Engine.
-- Add/ Configure one or more Stages.
- Add one or more Data Accessors.
- Deploy (see 4 - Submitting Changes to the Pipeline below).
Screen 4 - Edit an Existing Pipeline:
- Make sure you are referencing the Definitions and User Flow Diagram documents. The basic steps include:
-- Search/ Select a Pipeline.
-- Identify the element to change (Data Store, Acquirer, and/or Processes/ Stages).
-- Update the structure of the Pipeline or the configuration of one of the Elements within it.
-- "Save" the updated configuration and “Deploy”.
Steps & Processes for Creating a Pipeline:
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 download additional information and assets that will be useful for your wireframes.
- 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 and pages and how they are linking together. Your wireframes should align with this.
- Pipeline Diagrams & Examples: Outlines some common pipeline structures and layouts. This is ultimately what the end user will be creating and your wireframes should allow the user to do so.
- Definitions: We’ve compiled some definitions that are used throughout the spec 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.
Learn Axure:
- New to Axure? Here are some quick tutorials to help you get started.
- http://www.axure.com/learn
Judging Criteria:
- Overall User Experience
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow.
- How well your wireframe captures all the requirements.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client).
Submissions:
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
All requested contest requirements as clickable HTML files generated by Axure. All the content must be listed and the pages are linked together to show page flow.
Source Files
- Wireframes should be built in Axure. The resulting source files used to generate the clickable HTML files.
- All the content must be listed and the pages are linked together to show page flow.
- All fully editable original source files of the submitted wireframe as required by the contest under "Source Files" in the sidebar should be included in your Source zip file.
Final Fixes:
As part of the final fixes phase you may be asked to modify content or user click paths.
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.