Challenge Summary
Welcome to HP Data Quality Landing Zone Project Design Challenge
This is a follow-up challenge to the recently completed HP Data Quality Landing Zone Project Wireframe Challenge and this time we need you to design how HP Data Quality Landing Zone application look and feel by following provided wireframe layout and specification below.
You need focus on delivering top notch features, ease to use application also present the best practice for responsive web application.
1). Login
2). Dashboard
3). Job Details
4). Create New Job
1). Login (Desktop & Mobile Screen Sizes)
2). Dashboard (Desktop & Mobile Screen Sizes)
3). Job Details (Desktop & Mobile Screen Sizes)
4). Job Details Error
5). Create New Job (Desktop & Mobile Screen Sizes)
6). Edit Job
7). Edit Tags
8). Edit Schedule
9). Edit Monitoring
10). Edit Notification
Design Problem
The HP Data Quality team receives large amounts of data on a regular basis from various sources - manufacturing processes, customer surveys, internal customer service statistics, etc. They would like to develop a file transfer and monitoring tool that alerts internal resources when files arrive and then transfers those files to alternative locations within their infrastructure. The Landing Zone app will designate a folder for incoming data for each data source or data type and then a destination where it will be transferred. Often HP Data Quality personnel are moving files between regular and HDFS file systems.
Invision Link
- You must provide an Invision Link of your design for this challenge
- If you need an Invision Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- You must create and send 2 Invision link for Desktop and Mobile.
Downloadable Files
https://drive.google.com/drive/folders/0B31nrwic_6z0dlkwejRjN2E0SXc?usp=sharing
- Wireframe.zip - HP Data Quality Landing Zone Wireframe
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Wireframe is just initial layout, for this storyboard challenge, please suggest any best practice design features
- When you create icon/graphic, make sure they use vector shape format.
- Styleguide: Get some inspiration from HP website and HP mobile application
- Color Theme: Open to any designer suggestion
- Fonts: Open to any designer suggestion
- Required Screen Size:
-- Desktop Standard Screen Sizes (1280px x 720px)
-- Mobile Retina Screen Sizes (750px x 13340px)
Submission Requirements
For this challenge you need build HP Data Quality Landing Zone Project Design storyboard screens for these following features and roles based on our completed wireframe solution (Check provided Wireframe.zip).
1). Login
- Users need to login with basic authentication.
- Create how login validation works.
- There are 2 flow for this application for “Admin” & for “Normal User”
- For this challenge, you just need focus on “Admin” flow.
2). Dashboard
- User see this dashboard after logged in as Admin
- Design how header bar should look and feel
- Display Total Summary statistics about currently running file transfer jobs
- Display Files Transferred Today statistics about recently completed file transfer jobs
- Display Scheduled Today statistics about today scheduled file transfer
- Think and suggest about the best way to display these statistics, are they should use donut chart, pie-chart or line chart, anything else that look great in this web application?
- Below the top statistics need display tab menu for these tabs
- You also need display Grid and List View option for each tabs
- Grid View will displayed by default
- Filter button need load the filter options
- New Job button will take user to Create New Job page
Currently Running tab
Grid View
- This tab contain all Currently Running Jobs
- Display tooltip button on the header, also ability to Edit the Job
- Click Job name will take user to detail page
- When user hover on the “Lorem_DNS” link there’s a tooltips show up for Server information
- Data statistic displayed as chart format
- Put clear way to show up all dates
- There’s Clock icon that will take user to Edit Schedule
- Tag button placed on the bottom of boxes
List View
- For the list view, user need able to sort the column
- We need displayed consistent content when transform from Grid to List View
Currently Completed tab
- This is tab for all Completed Jobs
- How you make differences to jobs that already completed
- Notice, there’s a failed information on the right side of job title
- No Edit Job and Edit Schedule button for this tab}
- No Completed Delivery & Next Scheduled Pickup for this tab
- Create Grid and List View for this tab
Failed Deliveries/Transfers tab
- This is tab for all Failed Deliveries/Transfer tab
- We need easy way to let user read the Failed reasons
- Match data like provided wireframe
- Create Grid and List View for this tab
3). Job Details
- Breadcrumb placed on top of screen
- Display Job Details information
- Edit button placed on the right side
- Source, Landing Zone and Destination need created as interesting graphic.
- This area need clearly explains to user the Job flow
- User need able to expand/collapse all the Job section
- There are different edit links that will take user to separated edit page
- Match content for all boxes
4). Job Details Error
- Basically this page using same layout like Job Details page
- But, you need show up clear way to indicated that the Job contain Error on the process
5). Create New Job
- Create New Job need display step wizard to guide user for each step.
- Next and Step Button placed on the bottom of screen
Step 1: Job Name
- This step contain Job Name text input
Step 2: Landing Zone
- This step contains available Landing Zone
- Page consists of Tree View layout and table layout on the right side
- User can search the folder or create new one
- User can search the tag or create new one
- When click create new folder, you need display the modal window
- Then user need able to set the tags
- User need able to select the available Landing zone before
- For your submission, suggest proper way for this Landing Zone User Experience when selecting folders and tags. Think about what is the easy way to user to use this Step
Step 3: Destination
- On this step user need filled IP Address or DNS
- After click Find there will be search result on table format
- User need able to select at the available option before can move to the next step
Step 4: Job Setting
- For this step there are 3 main section for:
Scheduling
- User need able to select Start Date & End Date
- Need show up the datepicker when click the dates
- User need able to select Days of the Week
- After select the day, there’s option to select Hour and Minutes
Monitoring
- User need able to select Monitoring time based on the available options
Notification
- Notification toggle options placed on the left side
- The notified users displayed as table format
- Click the Add User need show up the modal window
- on Modal Window, user can filter the table based on search on top
- Need able to select more than one user
- Edit User Notification will bring up another modal window for Edit User Notification
- There only Email address and SMS option when Edit the User Notification
- When user click Delete button need show up the confirmation modal window
- Finish button take user back to Dashboard
6). Edit Job
- Basically this Edit job will re-use same layout like when user Create New Job with some difference explained below
Step 1: Job Name
- This step contain Job Name text input
Step 2: Landing Zone
- Selected folder and tags need displayed by default for Edit Job
- User need able to remove folder and Add tag
- Think about the proper way for this step user interaction
Step 3: Destination
- Selected Destination displayed by default for this Edit Job
- There’s another box for Parameters information
- User need able to select the checkbox to enable the “Is HDFS Destination” as option
- Then, fill another data based on available dropdown, input and checkboxes
Step 4: Job Setting
- Show up some selected values when user navigated to this Job Settting page
7). Edit Tags
- This will be the individual screen to edit Tags.
- User can add another tags
- Think about to display this screen as separated page or modal window format?
8). Edit Schedule
- Show up some selected values for the available schedule
- Think about to display this screen as separated page or modal window format?
9). Edit Monitoring
- Show up some selected values for the monitoring options
- Think about to display this screen as separated page or modal window format?
10). Edit Notification
- Show up some selected values for the Notification and Notified users
- Think about to display this screen as separated page or modal window format?
Target User
- HP Internal Employee
Judging Criteria
- How well you create design for HP Data Quality Landing Zone Project Application
- Follow best practice of Responsive Design Patterns.
- Cleanliness of your graphics and design.
- User Experience
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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
This is a follow-up challenge to the recently completed HP Data Quality Landing Zone Project Wireframe Challenge and this time we need you to design how HP Data Quality Landing Zone application look and feel by following provided wireframe layout and specification below.
You need focus on delivering top notch features, ease to use application also present the best practice for responsive web application.
Round 1
Initial HP Data Quality Landing Zone Project for these following screens on Desktop Screen Size1). Login
2). Dashboard
3). Job Details
4). Create New Job
Round 2
Final HP Data Quality Landing Zone Project combined with Checkpoint Feedback for these following screens:1). Login (Desktop & Mobile Screen Sizes)
2). Dashboard (Desktop & Mobile Screen Sizes)
3). Job Details (Desktop & Mobile Screen Sizes)
4). Job Details Error
5). Create New Job (Desktop & Mobile Screen Sizes)
6). Edit Job
7). Edit Tags
8). Edit Schedule
9). Edit Monitoring
10). Edit Notification
Design Problem
The HP Data Quality team receives large amounts of data on a regular basis from various sources - manufacturing processes, customer surveys, internal customer service statistics, etc. They would like to develop a file transfer and monitoring tool that alerts internal resources when files arrive and then transfers those files to alternative locations within their infrastructure. The Landing Zone app will designate a folder for incoming data for each data source or data type and then a destination where it will be transferred. Often HP Data Quality personnel are moving files between regular and HDFS file systems.
Invision Link
- You must provide an Invision Link of your design for this challenge
- If you need an Invision Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- You must create and send 2 Invision link for Desktop and Mobile.
Downloadable Files
https://drive.google.com/drive/folders/0B31nrwic_6z0dlkwejRjN2E0SXc?usp=sharing
- Wireframe.zip - HP Data Quality Landing Zone Wireframe
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Wireframe is just initial layout, for this storyboard challenge, please suggest any best practice design features
- When you create icon/graphic, make sure they use vector shape format.
- Styleguide: Get some inspiration from HP website and HP mobile application
- Color Theme: Open to any designer suggestion
- Fonts: Open to any designer suggestion
- Required Screen Size:
-- Desktop Standard Screen Sizes (1280px x 720px)
-- Mobile Retina Screen Sizes (750px x 13340px)
Submission Requirements
For this challenge you need build HP Data Quality Landing Zone Project Design storyboard screens for these following features and roles based on our completed wireframe solution (Check provided Wireframe.zip).
1). Login
- Users need to login with basic authentication.
- Create how login validation works.
- There are 2 flow for this application for “Admin” & for “Normal User”
- For this challenge, you just need focus on “Admin” flow.
2). Dashboard
- User see this dashboard after logged in as Admin
- Design how header bar should look and feel
- Display Total Summary statistics about currently running file transfer jobs
- Display Files Transferred Today statistics about recently completed file transfer jobs
- Display Scheduled Today statistics about today scheduled file transfer
- Think and suggest about the best way to display these statistics, are they should use donut chart, pie-chart or line chart, anything else that look great in this web application?
- Below the top statistics need display tab menu for these tabs
- You also need display Grid and List View option for each tabs
- Grid View will displayed by default
- Filter button need load the filter options
- New Job button will take user to Create New Job page
Currently Running tab
Grid View
- This tab contain all Currently Running Jobs
- Display tooltip button on the header, also ability to Edit the Job
- Click Job name will take user to detail page
- When user hover on the “Lorem_DNS” link there’s a tooltips show up for Server information
- Data statistic displayed as chart format
- Put clear way to show up all dates
- There’s Clock icon that will take user to Edit Schedule
- Tag button placed on the bottom of boxes
List View
- For the list view, user need able to sort the column
- We need displayed consistent content when transform from Grid to List View
Currently Completed tab
- This is tab for all Completed Jobs
- How you make differences to jobs that already completed
- Notice, there’s a failed information on the right side of job title
- No Edit Job and Edit Schedule button for this tab}
- No Completed Delivery & Next Scheduled Pickup for this tab
- Create Grid and List View for this tab
Failed Deliveries/Transfers tab
- This is tab for all Failed Deliveries/Transfer tab
- We need easy way to let user read the Failed reasons
- Match data like provided wireframe
- Create Grid and List View for this tab
3). Job Details
- Breadcrumb placed on top of screen
- Display Job Details information
- Edit button placed on the right side
- Source, Landing Zone and Destination need created as interesting graphic.
- This area need clearly explains to user the Job flow
- User need able to expand/collapse all the Job section
- There are different edit links that will take user to separated edit page
- Match content for all boxes
4). Job Details Error
- Basically this page using same layout like Job Details page
- But, you need show up clear way to indicated that the Job contain Error on the process
5). Create New Job
- Create New Job need display step wizard to guide user for each step.
- Next and Step Button placed on the bottom of screen
Step 1: Job Name
- This step contain Job Name text input
Step 2: Landing Zone
- This step contains available Landing Zone
- Page consists of Tree View layout and table layout on the right side
- User can search the folder or create new one
- User can search the tag or create new one
- When click create new folder, you need display the modal window
- Then user need able to set the tags
- User need able to select the available Landing zone before
- For your submission, suggest proper way for this Landing Zone User Experience when selecting folders and tags. Think about what is the easy way to user to use this Step
Step 3: Destination
- On this step user need filled IP Address or DNS
- After click Find there will be search result on table format
- User need able to select at the available option before can move to the next step
Step 4: Job Setting
- For this step there are 3 main section for:
Scheduling
- User need able to select Start Date & End Date
- Need show up the datepicker when click the dates
- User need able to select Days of the Week
- After select the day, there’s option to select Hour and Minutes
Monitoring
- User need able to select Monitoring time based on the available options
Notification
- Notification toggle options placed on the left side
- The notified users displayed as table format
- Click the Add User need show up the modal window
- on Modal Window, user can filter the table based on search on top
- Need able to select more than one user
- Edit User Notification will bring up another modal window for Edit User Notification
- There only Email address and SMS option when Edit the User Notification
- When user click Delete button need show up the confirmation modal window
- Finish button take user back to Dashboard
6). Edit Job
- Basically this Edit job will re-use same layout like when user Create New Job with some difference explained below
Step 1: Job Name
- This step contain Job Name text input
Step 2: Landing Zone
- Selected folder and tags need displayed by default for Edit Job
- User need able to remove folder and Add tag
- Think about the proper way for this step user interaction
Step 3: Destination
- Selected Destination displayed by default for this Edit Job
- There’s another box for Parameters information
- User need able to select the checkbox to enable the “Is HDFS Destination” as option
- Then, fill another data based on available dropdown, input and checkboxes
Step 4: Job Setting
- Show up some selected values when user navigated to this Job Settting page
7). Edit Tags
- This will be the individual screen to edit Tags.
- User can add another tags
- Think about to display this screen as separated page or modal window format?
8). Edit Schedule
- Show up some selected values for the available schedule
- Think about to display this screen as separated page or modal window format?
9). Edit Monitoring
- Show up some selected values for the monitoring options
- Think about to display this screen as separated page or modal window format?
10). Edit Notification
- Show up some selected values for the Notification and Notified users
- Think about to display this screen as separated page or modal window format?
Target User
- HP Internal Employee
Judging Criteria
- How well you create design for HP Data Quality Landing Zone Project Application
- Follow best practice of Responsive Design Patterns.
- Cleanliness of your graphics and design.
- User Experience
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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.