Challenge Summary
Welcome to eCheck- Admin Web UI Design Challenge. In this challenge, we are looking for your help to design the backend admin application screens that will help manage the existing eCheck-equipment verification mobile android application.
Important: We are providing detailed wireframes to help you get started. This challenge is focused on the "Admin" experience so it just needs to be simple, clean and easy-to-use.
Really excited to see your submissions for this challenge!
01 eCheck Configuration
02 Process
03 Product SKU List
04 Product SKU Details
05 Add Product SKU
06 Equipment Type
07 Equipments
08 eCheck Inspection
09 eCheck Inspection Details
IMPORTANT
- You MUST upload your submission to InvisionApp so we can provide direct feedback on your designs.
- If you already have access to Topcoder's InvisionApp account, then please feel free to create prototypes as required, If not please request an invite to the Topcoder InvisionApp account from the Copilot through challenge forums!
- You can reuse the Invision prototype that you shared for the checkpoint
Please feel free to provide any additional screens necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Challenge Details
The eCheck-Equipment Verification Solution is an Android mobile application with a backend admin portal (you are designing this backend admin portal in this challenge) which resides in a client’s hosted data center.
The solution involves:
- An error proofing solution to eliminate the potential of utilizing the wrong equipment.
- Greatly reduces the risk of cross-contamination in processes that rely on dedicated equipment and operator experience.
- Fast and effective at determining if the correct equipment is being utilized.
- Being Developed as first for one plant will be expanded as platform for other plants/regions
Design Considerations:
- For this challenge we are focusing on the Desktop experience: 1366 x 768px
- Follow the provided branding guidelines (header style, font, colors are suggested for table headers, etc.)
- We are providing wireframes to help you understand the Admin interface and user interface details.
- In this challenge, we need you to think about a simple and clean Admin interface. Do not just color the wireframes (if you do all your designs will look the same) - please make sure to follow the contents from the provided wireframes and look to improve the overall User experience.
- We would like you to keep the design as simple as possible, it should allow us to implement/develop the features easily (Simple! Do not make this complex... do not overthink it).
Required Screens:
We are looking for these screens to be designed. Note we are looking to quickly turn this around as we are looking to build this interface in future code challenges.
01 eCheck Configuration:
Reference: Page 1 to 3
- This shows the list of configurations
- This allows the user to search through the list of configurations
02 Process:
Reference: Page 4 to 9
- This shows the list of all process.
- We need to show the process name, description
- Allow the user to edit or delete a process
- They should be able to create a new process
- Provide a way for the user to search through the list of process.
03 Product SKU List:
Reference: Page 10
- This shows the list of Product SKU’s
- Allow the user to edit or delete a product SKU
- They should be able to create a new product SKU
- Provide a way for the user to search through the list of product SKU
- NOTE: Minitran and Estradiol are Product SKU descriptions and NOT Process Descriptions. Please correct them for accuracy.
04 Product SKU Details:
Reference: Page 11
- User will be able to view the product SKU details
- Should be able to add equipment under the product SKU
- Provide ability to edit and delete an equipment from the product SKU
- Provide a way for the user to search through the list of product sku’s.
05 Add Product SKU
Reference: Page 11 to 16
Please create separate screens for
1) Add SKU flow and then
2) Edit SKU flow.
Please do not add everything on one screen.
Add Product SKU Flow (Please have one screenshot for every point below)
- Initially, a form should display (inside a card layout) with three form fields and save and cancel buttons
- Once the user saves the product SKU all editable fields are converted to read-only (do not disable the form) and the cancel and save buttons become invisible. Edit and delete icon displays on the upper right hand corner of the card layout.
- Another card layout containing just Add Equipment Type button now appears below the product sku card layout.
- When the user selects the Add Equipment Button the card layout displays "Equipment Type label and a drop down with all available equipment types along with "Save" and "Cancel" button.
- Once the user saves Equipment type, the card layout displays Equipment Type label and selected value in read only mode (do not disable form values). Save and Cancel button are no more visible and the edit and delete icon display on the upper right corner of the card layout. Another card layout containing just Add Equipment Type button now appears below the Equipment Type card layout that was just added.
Edit Flow (Please have one screen for every point below)
- User selects the "Modify" button/icon on the list page. Product SKU details page displays with a read only card layout for SKU details followed by read only card layouts for each equipment type that was added. Each card layout has an edit and delete icon on the upper right corner.
- User selects the edit or the delete icon on the card layout of the applicable section that needs to be edited or deleted. Once the edit icon is pressed the read only card layout converts to editable form with save and cancel buttons.The remaining other card layouts still remain in read only mode.
06 Equipment Type:
Reference: Page 17
- This page shows list of equipments types.
- Should be able to add equipment type
- Provide ability to edit and delete an equipment type
- Provide a way for the user to search through the list of equipment types.
07 Equipments:
Reference: Page 17
- This page shows list of equipments
- Should be able to add equipment
- Provide ability to edit and delete an equipment
- Provide a way for the user to search through the list of equipments
- For Add Equipment, we can see the reference in page 20, user enter the products SKU, equipment type and then enter bar code!
08 eCheck Inspection:
Reference: Page 21
- This shows the list of inspection that were done, this page acts a log.
- We need to show the date when the inspection was done and by whom
- Provide a way to search and filter through the records.
09 eCheck Inspection Details:
Reference: Page 22
- This shows the equipment details log, on when they were scanned along with the detailed information about the list of equipment types.
- Equipment type details include the details about the equipment, barcodes, when it was scanned and by whom!
Important:
- Keep things consistent and simple! This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience:
- Administrators of the eCheck Solution
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI
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.
Submit/Share an Invision link as part of your submission.
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.
Important: We are providing detailed wireframes to help you get started. This challenge is focused on the "Admin" experience so it just needs to be simple, clean and easy-to-use.
Really excited to see your submissions for this challenge!
Round 1
Submit your initial designs for Checkpoint Feedback.
01 eCheck Configuration
02 Process
03 Product SKU List
04 Product SKU Details
05 Add Product SKU
06 Equipment Type
IMPORTANT
- You MUST upload your submission to InvisionApp so we can provide direct feedback on your designs.
- If you already have access to Topcoder's InvisionApp account, then please feel free to create prototypes as required, If not please request an invite to the Topcoder InvisionApp account from the Copilot through challenge forums!
But please feel free to provide any additional screens necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Round 2
Your Final designs for all required use cases, with all Checkpoint Feedback, applied.01 eCheck Configuration
02 Process
03 Product SKU List
04 Product SKU Details
05 Add Product SKU
06 Equipment Type
07 Equipments
08 eCheck Inspection
09 eCheck Inspection Details
IMPORTANT
- You MUST upload your submission to InvisionApp so we can provide direct feedback on your designs.
- If you already have access to Topcoder's InvisionApp account, then please feel free to create prototypes as required, If not please request an invite to the Topcoder InvisionApp account from the Copilot through challenge forums!
- You can reuse the Invision prototype that you shared for the checkpoint
Please feel free to provide any additional screens necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Challenge Details
The eCheck-Equipment Verification Solution is an Android mobile application with a backend admin portal (you are designing this backend admin portal in this challenge) which resides in a client’s hosted data center.
The solution involves:
- An error proofing solution to eliminate the potential of utilizing the wrong equipment.
- Greatly reduces the risk of cross-contamination in processes that rely on dedicated equipment and operator experience.
- Fast and effective at determining if the correct equipment is being utilized.
- Being Developed as first for one plant will be expanded as platform for other plants/regions
Design Considerations:
- For this challenge we are focusing on the Desktop experience: 1366 x 768px
- Follow the provided branding guidelines (header style, font, colors are suggested for table headers, etc.)
- We are providing wireframes to help you understand the Admin interface and user interface details.
- In this challenge, we need you to think about a simple and clean Admin interface. Do not just color the wireframes (if you do all your designs will look the same) - please make sure to follow the contents from the provided wireframes and look to improve the overall User experience.
- We would like you to keep the design as simple as possible, it should allow us to implement/develop the features easily (Simple! Do not make this complex... do not overthink it).
Required Screens:
We are looking for these screens to be designed. Note we are looking to quickly turn this around as we are looking to build this interface in future code challenges.
01 eCheck Configuration:
Reference: Page 1 to 3
- This shows the list of configurations
- This allows the user to search through the list of configurations
02 Process:
Reference: Page 4 to 9
- This shows the list of all process.
- We need to show the process name, description
- Allow the user to edit or delete a process
- They should be able to create a new process
- Provide a way for the user to search through the list of process.
03 Product SKU List:
Reference: Page 10
- This shows the list of Product SKU’s
- Allow the user to edit or delete a product SKU
- They should be able to create a new product SKU
- Provide a way for the user to search through the list of product SKU
- NOTE: Minitran and Estradiol are Product SKU descriptions and NOT Process Descriptions. Please correct them for accuracy.
04 Product SKU Details:
Reference: Page 11
- User will be able to view the product SKU details
- Should be able to add equipment under the product SKU
- Provide ability to edit and delete an equipment from the product SKU
- Provide a way for the user to search through the list of product sku’s.
05 Add Product SKU
Reference: Page 11 to 16
Please create separate screens for
1) Add SKU flow and then
2) Edit SKU flow.
Please do not add everything on one screen.
Add Product SKU Flow (Please have one screenshot for every point below)
- Initially, a form should display (inside a card layout) with three form fields and save and cancel buttons
- Once the user saves the product SKU all editable fields are converted to read-only (do not disable the form) and the cancel and save buttons become invisible. Edit and delete icon displays on the upper right hand corner of the card layout.
- Another card layout containing just Add Equipment Type button now appears below the product sku card layout.
- When the user selects the Add Equipment Button the card layout displays "Equipment Type label and a drop down with all available equipment types along with "Save" and "Cancel" button.
- Once the user saves Equipment type, the card layout displays Equipment Type label and selected value in read only mode (do not disable form values). Save and Cancel button are no more visible and the edit and delete icon display on the upper right corner of the card layout. Another card layout containing just Add Equipment Type button now appears below the Equipment Type card layout that was just added.
Edit Flow (Please have one screen for every point below)
- User selects the "Modify" button/icon on the list page. Product SKU details page displays with a read only card layout for SKU details followed by read only card layouts for each equipment type that was added. Each card layout has an edit and delete icon on the upper right corner.
- User selects the edit or the delete icon on the card layout of the applicable section that needs to be edited or deleted. Once the edit icon is pressed the read only card layout converts to editable form with save and cancel buttons.The remaining other card layouts still remain in read only mode.
06 Equipment Type:
Reference: Page 17
- This page shows list of equipments types.
- Should be able to add equipment type
- Provide ability to edit and delete an equipment type
- Provide a way for the user to search through the list of equipment types.
07 Equipments:
Reference: Page 17
- This page shows list of equipments
- Should be able to add equipment
- Provide ability to edit and delete an equipment
- Provide a way for the user to search through the list of equipments
- For Add Equipment, we can see the reference in page 20, user enter the products SKU, equipment type and then enter bar code!
08 eCheck Inspection:
Reference: Page 21
- This shows the list of inspection that were done, this page acts a log.
- We need to show the date when the inspection was done and by whom
- Provide a way to search and filter through the records.
09 eCheck Inspection Details:
Reference: Page 22
- This shows the equipment details log, on when they were scanned along with the detailed information about the list of equipment types.
- Equipment type details include the details about the equipment, barcodes, when it was scanned and by whom!
Important:
- Keep things consistent and simple! This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience:
- Administrators of the eCheck Solution
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI
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.
Submit/Share an Invision link as part of your submission.
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.
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.