API Integration - Structured Data Processing App Design Concepts Challenge









    The challenge is finished.
    Show Deadlinesicon-arrow-up

    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!  

    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.

    Challenge Format

    This competition will be run as a two-round challenge.

    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.)

    Regarding the Rounds:

    • To be eligible for Round 1 prizes and design feedback, you must submit before the Checkpoint deadline.
    • A day or two after the Checkpoint deadline, the challenge holder will announce Round 1 winners and provide design feedback to those winners in the “Checkpoints” tab above.
    • You must submit to Round 1 to be eligible to compete in Round 2. If your submission fails screening for a small mistake in Round 1, you may still be eligible to submit to Round 2.
    • Every competitor with a passing Round 1 submission can submit to Round 2, even if they didn't win a Checkpoint prize.
    • Learn more here.

    Full Description & Project Guide

    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:

    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!

    - Keep things consistent. This means all graphic styles should work together.
    - All of the graphics should have a similar feel and general aesthetic appearance

    - 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.

    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.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2018 Topcoder(R) Open


    Screening Scorecard


    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 here.


    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 here.

    Questions? ‌Ask in the Challenge Discussion Forums.


    • Layered PSD files created in Adobe Photoshop or similar
    • AI files created in Adobe Illustrator or similar
    • Sketch

    You must include all source files with your submission.