Challenge Summary
Welcome to "API Integration - Structured Data Processing App Design Concepts Challenge". For this challenge, we want to create a new look and feel our Structured Data Processing application. This application will create a structured output from various inputs utilizing API/SDKs. We are open to your creative and innovative ideas!
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
02) Dashboard Screen
03) Upload Document Screen
04) Identification & Sorting Screen
05) Document Validation Screen
06) Output Result Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Login Screen
02) Dashboard Screen
03) Upload Document Screen
04) Identification & Sorting Screen
05) Document Validation Screen
06) Output Result Screen
07) Setting Screens
08) Other Features
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
In this challenge, we want to create responsive web Application to capture documents, forms, invoices, emails for processing. The goal is to process those input into a structured outputs using our API/SDKs.
Challenge Goal
Create the best possible UI/UX for the app to help user processing their documents into a structured output.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for API Integration / Document Processing App!
- How quickly could you find information?
- The interface needs to be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Target Devices
- Desktop: 1280px Width with height adjusted accordingly
- Mobile: 750px x 1334px (@2x)
Marvel App
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Follow "Logo-Files.zip" as branding guidelines
- Style: Clean, Modern, Informal
- Icon Style: Thin Line
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=614573
Required Pages/Features
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Login Screen
- User needs to login to be able to use this application (Email, Password)
- Provide error scenario if user enter wrong credential information
- Provide register link for any new potential user.
- Needs to have Forgot password link.
02) Dashboard Screen
- Once the user successfully logs into the application, they will first see this dashboard screen.
- Show important information that needs user attention (error processing conversion, API status, user activity history, input and output library list, etc)
- Provide main navigation so the user can access other features in the app easily.
- Would like to offer a “try me option” which will allow potential clients to upload a sample document. A capture of email address, contact details should be a pre-cursor to this.
03) Upload Document Screen
- The user will be able to upload their input documents via this screen.
- User can upload various of documents including Word docs, PDF, TIFF, JPG, PNG, Forms, emails and others type of documents
- If the input documents not yet recognized by the app, it will show some error notification
- If the layout of the documents not define yet, provide a section/feature where user can define document Layout, highlight and name desired fields for capture. A one-time setup process that is fully automated going forward. This process also can be done via setting screens.
- User should be easily to do single or multiple upload documents from this screen
- Show percentage of upload process in the screen
- Needs to have error notification if the document fail to uploads
04) Identification & Sorting Screen
- Once the upload process is done, the application will needs to identify and sorting the document content.
- Documents will be automatically identified and sorted for action to be taken against them.
- Once classified then the different document types will be passed for processing by the APIs.
- For ex, Invoices document will call API x while Forms/Handwritten document will call API y.
05) Document Validation Screen
- After the content being sorted and identified, the app will need to validated the content.
- When doing the validations, the app will read a small random piece of the document and then give option to the user to validate it. For example, the 1st validator will only see first names and nothing else while the 2nd validator will only see surname and so on.
- The validation processed will be passed to Crowdsource platform such as Amazon Turk or others API.
- Results will be confirmed from API calls with some fields requiring external validation. This will be based on scoring/results from the API.
- Data will be distributed for validation on a field basis so for example a validator will never be passed First Name & Surname to review from the same document.
06) Output Result Screen
- Once the documents being validated and processing finished, user will be redirected to this screen.
- User will be able to preview the result on the screen
- If user found some incomplete result, they will be able to redo the processing and validation phase
- Once all fields have been validated and returned then an output will be created based upon client requests.
- If user found the result is complete, user will be able to export the output result into txt, xml, exl, csv, xls or others file format.
07) Setting Screen
- An area where user can setting all integrations between all API in the application.
- User can edit his user account here.
- User can manage and check all API integration and testing it.
- User can also manage and define document Layout from here.
08) Other Features
- What else that you think is needed for this platform?
- Show us your ideas and creativity!
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
Documentation
- Logo-Files.zip
- Capture Processing Design Slides.pptx
Target Audience
- This is B2B application, so mostly companies uploading input documents
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 a layered PSD file, or Adobe Illustrator as a layered AI file or as Sketch Files.
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.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a checkpoint feedback (Desktop and Mobile version)02) Dashboard Screen
03) Upload Document Screen
04) Identification & Sorting Screen
05) Document Validation Screen
06) Output Result Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final design plus checkpoint feedback (Desktop and Mobile version)01) Login Screen
02) Dashboard Screen
03) Upload Document Screen
04) Identification & Sorting Screen
05) Document Validation Screen
06) Output Result Screen
07) Setting Screens
08) Other Features
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
In this challenge, we want to create responsive web Application to capture documents, forms, invoices, emails for processing. The goal is to process those input into a structured outputs using our API/SDKs.
Challenge Goal
Create the best possible UI/UX for the app to help user processing their documents into a structured output.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for API Integration / Document Processing App!
- How quickly could you find information?
- The interface needs to be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Target Devices
- Desktop: 1280px Width with height adjusted accordingly
- Mobile: 750px x 1334px (@2x)
Marvel App
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Follow "Logo-Files.zip" as branding guidelines
- Style: Clean, Modern, Informal
- Icon Style: Thin Line
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=614573
Required Pages/Features
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Login Screen
- User needs to login to be able to use this application (Email, Password)
- Provide error scenario if user enter wrong credential information
- Provide register link for any new potential user.
- Needs to have Forgot password link.
02) Dashboard Screen
- Once the user successfully logs into the application, they will first see this dashboard screen.
- Show important information that needs user attention (error processing conversion, API status, user activity history, input and output library list, etc)
- Provide main navigation so the user can access other features in the app easily.
- Would like to offer a “try me option” which will allow potential clients to upload a sample document. A capture of email address, contact details should be a pre-cursor to this.
03) Upload Document Screen
- The user will be able to upload their input documents via this screen.
- User can upload various of documents including Word docs, PDF, TIFF, JPG, PNG, Forms, emails and others type of documents
- If the input documents not yet recognized by the app, it will show some error notification
- If the layout of the documents not define yet, provide a section/feature where user can define document Layout, highlight and name desired fields for capture. A one-time setup process that is fully automated going forward. This process also can be done via setting screens.
- User should be easily to do single or multiple upload documents from this screen
- Show percentage of upload process in the screen
- Needs to have error notification if the document fail to uploads
04) Identification & Sorting Screen
- Once the upload process is done, the application will needs to identify and sorting the document content.
- Documents will be automatically identified and sorted for action to be taken against them.
- Once classified then the different document types will be passed for processing by the APIs.
- For ex, Invoices document will call API x while Forms/Handwritten document will call API y.
05) Document Validation Screen
- After the content being sorted and identified, the app will need to validated the content.
- When doing the validations, the app will read a small random piece of the document and then give option to the user to validate it. For example, the 1st validator will only see first names and nothing else while the 2nd validator will only see surname and so on.
- The validation processed will be passed to Crowdsource platform such as Amazon Turk or others API.
- Results will be confirmed from API calls with some fields requiring external validation. This will be based on scoring/results from the API.
- Data will be distributed for validation on a field basis so for example a validator will never be passed First Name & Surname to review from the same document.
06) Output Result Screen
- Once the documents being validated and processing finished, user will be redirected to this screen.
- User will be able to preview the result on the screen
- If user found some incomplete result, they will be able to redo the processing and validation phase
- Once all fields have been validated and returned then an output will be created based upon client requests.
- If user found the result is complete, user will be able to export the output result into txt, xml, exl, csv, xls or others file format.
07) Setting Screen
- An area where user can setting all integrations between all API in the application.
- User can edit his user account here.
- User can manage and check all API integration and testing it.
- User can also manage and define document Layout from here.
08) Other Features
- What else that you think is needed for this platform?
- Show us your ideas and creativity!
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
Documentation
- Logo-Files.zip
- Capture Processing Design Slides.pptx
Target Audience
- This is B2B application, so mostly companies uploading input documents
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 a layered PSD file, or Adobe Illustrator as a layered AI file or as Sketch Files.
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.