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.
Create the best possible UI/UX for the app to help user processing their documents into a structured output.
- 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
- Desktop: 1280px Width with height adjusted accordingly
- Mobile: 750px x 1334px (@2x)
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
- Follow "Logo-Files.zip" as branding guidelines
- Style: Clean, Modern, Informal
- Icon Style: Thin Line
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
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
- Capture Processing Design Slides.pptx
- This is B2B application, so mostly companies uploading input documents
- 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
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.
Submit JPG/PNG for your submission 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.
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.