Challenge Summary

Welcome to HP Data Quality ETL Application Wireframe Challenge!

The HP Data Quality team is tasked with moving large amounts of data on a regular basis.  They would like to development an Extract Transform and Load tool that allows them to move file and relational data on a regular basis and create a monitoring service which can display the status of the currently scheduled and recently completed jobs.  Often they are moving data between regular and HDFS file systems.

Round 1

Round One (1)
01 Login
02 Create Project
03 Edit Project
05 Create Job
06 Edit Job
08 Job Workspace
09 Mapping Interface
Notes.jpg: Any comments about your design for the Client.

Round 2

Round Two (2)
01 Login
02 Create Project
03 Edit Project
04 Project Listing
05 Create Job
06 Edit Job
07 Job Listing
08 Job Workspace
09 Mapping Interface
10 Job Runner
11 Job Scheduler
12 Currently Scheduled Jobs
13 Recently Completed Jobs
Notes.jpg: Any comments about your design for the Client.
More Context:
The application will need to handle the following data source types:  
- Fixed Width Text Files.
- Delimited Text Files (such as csv files).
- JSON Files.
- XML Files.
- Excel Files.
- Relational Databases (Oracle, SQL Server, MySQL).
- Columnar Databases (Redshift and Vertica).
- NoSQL Databases (MongoDB).
- Hadoop Databases (Hive).

Challenge Description:
The goal of this challenge is to develop an Extract Transform and Load tool that allows them to move file and relational data on a regular basis and create a monitoring service which can display the status of the currently scheduled and recently completed jobs.  
We are looking for wireframe (Axure) solutions based on requirements below. We’re also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!
 
At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow.
 
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.

Notes:
- Your wireframe submissions need to be able to drill down for all page flow.
- Show your wireframe solution for:
-- Desktop view: Design for desktop display 1280px and height as required.
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.

Required Screens:
01 Login:
- This tool will have both ETL capabilities and job monitoring capabilities.  
- Users will log into the tool to see all the jobs that are currently scheduled as well as those in the future.
 
02 Create Project:
 - It’s logical to be able to group jobs in a certain way.  
- A project is a way of grouping a set of jobs together -- a folder structure.  
- For now, let’s just create projects and jobs -- the hierarchy will only be 1 level deep.  
- Additional folders can be a future enhancement.  
- For now let’s keep it simple in terms of data collected about Projects - Name, Description, Created Date, Last Modified Date, Created By User, Last Modified By User, Project Status.  
- Initially all users will be able to see all projects in the tool.
 
03 Edit Project:
- A screen (or popup) to allow users to modify the data element described above.
 
04 Project Listing:
- We should have view which displays all the projects available in the system.

05 Create Job:
- Jobs are really the heart of this system and represent the collection of components used to move data from one system to another.  
- Before we designate the components and the source and destination used for a particular job however users need to declare the name of the job.  
- Job’s will have the same data elements as the project:  Name, Description, Created Date, Last Modified Date, Created By User, Last Modified By User
 
06 Edit Job:
- A screen (or popup) to allow users to modify the job data element described above.
 
07 Job Listing:
- A view which displays all jobs for a particular project.
 
08 Job Workspace:
- Once the basic details of a job have been declared user should be able to enter a workspace where they can enter the details of their data migration job.  There should be several parts to the workspace screen:
-- Component List - The ETL tool will also need a list of components.  In the toolbox there should be input and output versions of each of the components listed above.  (e.g Input Delimited Text File, Output Delimited Text File, Input XML File, Output XML File, etc..).
-- Workspace - A job is created by dragging components into the workspace.  Each job will have two components - a source and a destination.
-- Once components have been placed on the Workspace users will need to provide some additional configuration:
---- Each component type will have certain features that are common and certain features that are unique to that component type.  The common features include a way to enter the schema of the data source.  
---- The schema entry screen should list the names of the input columns and the data types of each column in the source data.  It should also indicate whether the field is a key, if the field is nullable, the date pattern of the input, along with the length and precision of the input.  Here are the data types that our tool will support:
-------- Boolean
-------- Byte
-------- Byte[]
-------- Char
-------- Date
-------- Double
-------- Float
-------- Big Decimal
-------- Integer
-------- Long
-------- Short
-------- String
---- Each component will also have some configuration fields that are unique to them.  We don’t need to outline all the possibilities but here are couple of examples:
* Delimited File Input Component:
-------- Located on HDFS? (checkbox)
-------- Distribution (visible if Located on HDFS is chosen) (String dropdown)
-------- Hadoop Version (visible if Located on HDFS is chosen) (String dropdown)
-------- Path to Hadoop Jar (visible if Located on HDFS is chosen)  (String)
-------- Name Node URI  (visible if Located on HDFS is chosen)  (String)
-------- File Name:   (visible if Located on HDFS is chosen)  (String)
-------- File Path (String) (visible if Located on HDFS is NOT chosen)
-------- Encoding (ISO-8859-15, | UTF-8)
-------- Row Separator (LF(“\n”) | CR (“\r”) | CRLF (“\r\n”))
-------- Field Separator (String)
-------- Is CSV? (checkbox)
-------- Escape Character (visible if is CSV is chosen) (String)
-------- Text Enclosure (visible if is CSV is chosen) (String)
-------- Header (Integer)
-------- Footer (Integer)
-------- Trim Input? (checkbox)
* Vertica Output:
-------- Version: (Vertica 7.0.X)
-------- Path to Vertica Jar (String)
-------- Host:  (String)
-------- Port:  (String)
-------- Database:  (String)
-------- Schema: (String)
-------- Username: (String)
-------- Password: (Masked String)
-------- Table: (String)
-------- Action on Table:  (Create Table if does not exist | Create Table | Drop and Create Table | Drop Table if exists and Create Table | Clear Table
-------- Action on Data: Insert | Update | Insert or Update | Update or Insert | Delete
 
09 Mapping Interface:
- One of the most important elements of the job is the mapping interface where source and destination fields are mapped to each other.
-- When an input and output component both have a schema definition, users should be able to bring up a mapping screen which will allow users to map input fields to output fields and do some basic transformations.  It would be great if this mapping could done visually.  There should be a line in the User Interface connecting an input field to an output field.
-- On the mapping interface we’ll also support some basic transformations.  This will allow users to modify data as it changes between input and output.  Here are the functions that will be supported initially:
---- Trim() - removes all whitespace
---- Right(integer numOfChars) - removes a certain number of characters from the right side of the input string
---- Left(integer numOfChars) - removes a certain number of characters from the left side of the input string
---- FindAndReplace(String stringToFind, String stringToReplace) - replaces characters in the source data with the replacement string.
---- DateToString(String dateFormat)
---- NumberToString (String numberFormat)
CurrencyToString (String currencyFormat)
---- Index(String stringToFind) - returns an integer index value of the designated string or -1 if the value isn’t found.
-- These functions will available at the field level for the relevant input source data type.  For example, Trim(), Right(), Left() are only really relevant to Strings.  They wouldn’t apply to numeric input.  DateToString would only apply to fields of type Date, etc.
 
10 Job Runner:
- As jobs are created it will be important to actually execute a job in real time to verify results.  
- The app should provide some progress indications as a data is read from the source and written to the destination.


11 Job Scheduler:
- We need to provide users with the ability to schedule jobs to operate on a recurring basis.   
- This screen should include fields to allow users to pick a start date, and end date, days of the week and time of day.
 
12 Currently Scheduled Jobs:
- This listing should display the next time a currently scheduled job will execute along with the job name, source and destination locations.

13 Recently Completed Jobs:
- This listing should show recently executed jobs - their names, source and destination folders, the number of records read, the number of records written, and the execution status of the job.

Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
 
Target audience:
- HP employees.

Judging Criteria:
- User Experience of application.
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.

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
Generated HTML files with all the requested contest requirements stated above.

Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.

Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2017 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • HTML
  • RP file created with Axure

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30055286