Challenge Summary
Welcome to sparck - Rapid Classification Concept Design Challenge.
We need your help to come up with UX concepts for a web application that will help users to classify a data intensive set of documents according to certain criterias alongside with the help of an artificial intelligence environment.
We provide the existing application screenshots, task flow and design brief to follow. Jump in now!
Best of luck.
2. Dashboard
3. Review File > Overview
4. Review File > Page Navigation (4.1, 4.2 and 4.5)
5. Review File > Classification (5.1, 5.3 and 5.4)
6. Review Document > Data Point Management
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Login
2. Dashboard
3. Review File > Overview
4. Review File > Page Navigation
5. Review File > Classification
6. Review Document > Data Point Management
7. Review Document > Find Classification
8. Review Document > Page Navigation
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a web application from scratch. At this phase it’s going to be used in desktop browsers, however, next step is to have it available in tablet devices (iPad, Surface). It’s important to use mobile-first principles while designing your solution to smooth out the tablet version.
Supporting Documents
Link: https://drive.google.com/open?id=1SPV140n6tysUb7B4dNeQ-wT5inSkyLsM
- Screenshots: existing application shots.
- Task flow: current flow of the user tasks in the existing application.
- Branding: client logo.
- Sample File: document with several pages as real example of what a document can look like in the system.
Design Considerations
Operators have the difficult task of manually classifying hundreds of mortgage-related documents. sparck introduces AIVA (Artificially Intelligent Virtual Assistant) to help, an artificial intelligence agent who operates through the web application to provide assistance to this classification process, saving a considerable amount of time to operators.
However, there are still gaps that needs to be filled by the operators to make sure the system is suggesting appropriate classifications, correct any inconsistencies or to reinforce it by performing manual classification.
Among the most critical aspects to consider we have:
- Manual classification of documents should be self-evident, easy to use.
- The classification process should be wired up to be completed very fast. An operator performs 100 files reviews all day, everyday. Speed is a major concern.
- Success is a user being able to select multiple pages (almost always in a row) and being able to select a classification right away.
- Provide some playful features during review completion to make it fun to use; some visual indicator that documents have been classified (tagged or moved to different view). We are open in general to see where you could possibly integrate gamification features to engage the user to keep using the application.
Application Flow & Features
See screenshots and task flow for guidance. The following content will explain how the existing application works.
The main user of this application is the Operator. His goal is to select a subset of pages of a File and classify them as a certain Document Type so that he can meet his 2 hour deadline to classify customer documents.
- A File is a container of several documents (think of it as a folder).
- A Document is a unit of written content (page (s) of a PDF, MS Word doc, etc ).
Queues
There are two observable counters for users to know the progress. Amount of files left to classify. Amount of documents left to process. When a file is submitted/classified, all of its documents are moved to the document queue (increment), and it’s subtracted from the files queue (-1 decrement).
Review File
The application process files one by one. Meaning that the operator opens the review file page (see screenshot 00-00) and immediately should have one file available to classify, one at a time.
The user can see the content of a file, meaning several documents. At the same time, there is a mechanism to navigate these documents by pages and to see individual document pages, up to 1100 pages per file.
The user can classify the documents by selecting them(see screenshot 00-03, 00-05 and 00-06), a subset (or all if needed). The classification is driven by document type. The user assign document types (e.g. insurance, bank statement, etc) to a set of documents contained within the file in progress.
Once the user finishes the assignments, he can submit the document (queues are updated accordingly - screenshot 00-09). The application state returns to the dashboard for the user to either select another file to classify or to review documents.
Review Document
The purpose of reviewing document is managing data points of the classified document.
- A Data Point is a segment extracted from the document content that represents a value. The data point extraction is an automated task from AIVA, she analyzes the content and detect possible data points. It can be done manually, in case AIVA doesn’t detect them properly.
- Classified document: document automatically classified by AIVA or the user (from the review file operation). The document contains several pages and has a document type assigned already (e.g. bank statement).
User should be able to navigate the pages of the document (screenshot 01-06), select which one to manage data points from and perform the manual editing, see screenshots 01-00 to 01-04. User can filter the subsets of the document, see screenshot 01-05.
The desired action ends with the user submitting the document.
UI Definitions
Review File: see http://take.ms/PfmsB
#1: Submit.
#2: Cancel.
#3: Escalate (screenshot 00-01).
#4: Ignore, removed from the app.
#5: Edit document classification type (screenshot 00-03 & 00-05).
#6: Add pages to selected classifier (screenshot 00-06, 00-07, 00-08).
#7: Review file process (screenshot 00-00).
#8: Review document process (screenshot 01-00).
Review Document: see http://take.ms/eHnpB
#1: Find Classification (screenshot 01-05).
#2: Submit.
#3: Escalate.
#4: Cancel.
#5: Data Point Management (Default View - screenshot 01-00).
#6: Page Navigation (screenshot 01-06)
Screens Requirements
Overall
- See the provided task flow and screenshots for reference of how the existing application works. However, please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals. For instance, requirements 3, 4, 8 could probably be grouped/reused, just an example. We’d like to see your proposals about flow and organization.
- Design a global header. This Classification app is part of a set of tasks that the agent has available. We’d like to see the following:
--sparck logo
-- Search
-- User info (photo, name, etc)
-- Logout
-- A mechanism to navigate to other tasks (12 total) available from AIVA: Rapid Classification (this app), Review Summary, Track P&C Insurance, Order Tax Transcripts, and others.
1. Login
User should be able to login using email and password. There should be a forgot password link. Do not include social login options.
2. Dashboard
User should be able to see an overall status of the current queues, files and documents respectively. It’s important to keep a constant status of the queues along the process.
User should be able to start the review file or review document actions from here.
3. Review File > Overview
See screenshot 00-00.
Actions
- Submit: It sends the file to the document queue. It might be useful to display some sort of notification/feedback of the submitted action. A good opportunity to integrate gamification, maybe a micro-interaction that moves the document from file queue to document queue. Design a screen to visualize this update or micro-interaction.
- Cancel: It removes the file. No design needed for this.
- Escale: See screenshot 00-01. The file is escalated to a another reviewer. User should be able to enter a reason with confirm/cancel buttons. Design this confirmation.
4. Review File > Page Navigation
See screenshots 00-00, 00-02.
Features
- High volumes of pages are typically classified by looking at a sizable thumbnail (and scrolling through), but in some cases you need to zoom in and out for a more readable view.
- User should scroll rapidly through pages (sizable thumbnail) and zoom in and out for more readable view.
- A file has 60-80 pages average. However, the limit is up to 1100 pages. Design considering these constraints.
- There should be two ways to navigate, 1) through pages in the file and 2) the pages you've already gone through and indexed.
- Partial zooming on documents should be possible so operators can expand important features.
- Pagination of documents will be preserved (i.e. if a Bank Statement is 4 pages, you will see Page 1, 2, 3, 4, in order).
- There should be three different scrolling functionalities.
-- 1; scroll through all pages (standard scrolling).
-- 2; jump to the next or previous page that's been indexed;
-- 3. jump to the next or previous page that's unclassified. and then for the queue, there should be some kind of filter that shows only the documents that haven't been classified (so it disappears from view when classified) and a filter that shows all pages (with tagging on the ones that have been classified).
We expect to see designs for:
4.1. Thumbnails/list/grid view (similar to 00-00, up to you).
4.2. Individual page view (similar to 00-02)
4.3. Zooming in.
4.4. Zooming out.
4.5. Scrollability solution.
4.6. Pagination solution.
5. Review File > Classification
See screenshots from 00-03 to 00-08.
Features
- There are 566 possible Document Types. You must think of a solution that can hold certain amount of items. Typically, 60 doc types are the most popular, but the others must be considered too.
- Some Document Types have Hierarchies, for example, Insurance has 16 sub-types, Assets has 5 sub-types, etc. Design considering this hierarchy.
- User should be able to select pages belonging to a certain document type and designate a classification. Selecting document type for classification should be easy and quick. Operators don't want to have to scroll through 500+ different document types.
- A document can receive only one type of classification, it can not have several; several documents (subset) can receive a type of classification.
- Document classification has a color code to follow. In the future, the system will automatically attempt to classify types, assigning different colors depending on the confidence level. By now, use green as default (manual assignment), just keep in mind there will be three possible colors (same as data points).
- User can see or access those classifications for each document (either pages get visibly tagged or are submitted into “done” and packaged according to doc type).
- Provide an option to view a sample version of a specific document type and compare side-by-side with the document the operator wants to classify but is unclear about.
- AIVA is able to identify duplicate documents, and so when they come in, there should be some kind of way to indicate that she's identified duplicates and group these together so operators can review further.
We expect to see designs for:
5.1. Document Type Selection (00-03 & 00-05).
5.2. Document Type Selection > Individual Page View (00-04).
5.3. Document Type Added Pages (00-06, 00-07, 00-08).
5.4. Duplicate documents case.
5.5. Sample Version of Document Type View.
6. Review Document > Data Point Management
See screenshots from 01-00 to 01-04.
Feature
- A selected document contains information from which values are extracted and marked as data point by the AI agent. User can also add those manually or remove.
- User can trigger a manual option (right now through the target icon). Content would highlight the possible values that can be extracted out of the document (01-01). User would select in the document which value he wants to associate to the data point (date for example, 01-02. Or name as seen in 01-03).
- A data point also allows inline edit (01-04) or removal.
- FYI: Color codes of the data points from the artificial intelligence agent. Confidence levels are marked by the color Green, Yellow and Red. Green is high confidence, Yellow means take another look and Red- there's something wrong, blurry, anomaly.
We expect to see designs for:
6.1. Data points side document view.
6.2. Data point target value.
6.3. Data point inline edit.
7. Review Document > Find Classification
See screenshot 01-05.
User can change the classification of the document. Once save is clicked user can see the data points.
8. Review Document > Page Navigation
See screenshot 01-06.
You can probably reuse the design of page navigation for File Review #4 with the same features.
Branding Guidelines
- Fonts and colors should be inline with the provided branding.
- The design style we’re looking for leans towards dashboard-like design.
- Follow Google Material Design Guidelines. Make sure to pay attention to layout, navigation, typography and color guidelines above all.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px width. Height as much as needed.
- Apply mobile-first design principles to smooth out the transition to the future tablet version.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30071778
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
- Male and female operators located abroad. Mortgage-related professionals with experience (from beginner to expert) classifying large volumes of documents.
Judging Criteria
- The rationale for why your design enables rapid classification.
- How well you plan the user experience and capture your ideas visually.
- Are mobile-first principles properly applied to your solution (iPad)?
- How well you implement the challenge requirements.
- 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, Adobe XD or Sketch. Layers should be named and well organized.
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.
We need your help to come up with UX concepts for a web application that will help users to classify a data intensive set of documents according to certain criterias alongside with the help of an artificial intelligence environment.
We provide the existing application screenshots, task flow and design brief to follow. Jump in now!
Best of luck.
Round 1
Submit your design for a checkpoint feedback.2. Dashboard
3. Review File > Overview
4. Review File > Page Navigation (4.1, 4.2 and 4.5)
5. Review File > Classification (5.1, 5.3 and 5.4)
6. Review Document > Data Point Management
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design (ALL SCREENS) plus checkpoint feedback.1. Login
2. Dashboard
3. Review File > Overview
4. Review File > Page Navigation
5. Review File > Classification
6. Review Document > Data Point Management
7. Review Document > Find Classification
8. Review Document > Page Navigation
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a web application from scratch. At this phase it’s going to be used in desktop browsers, however, next step is to have it available in tablet devices (iPad, Surface). It’s important to use mobile-first principles while designing your solution to smooth out the tablet version.
Supporting Documents
Link: https://drive.google.com/open?id=1SPV140n6tysUb7B4dNeQ-wT5inSkyLsM
- Screenshots: existing application shots.
- Task flow: current flow of the user tasks in the existing application.
- Branding: client logo.
- Sample File: document with several pages as real example of what a document can look like in the system.
Design Considerations
Operators have the difficult task of manually classifying hundreds of mortgage-related documents. sparck introduces AIVA (Artificially Intelligent Virtual Assistant) to help, an artificial intelligence agent who operates through the web application to provide assistance to this classification process, saving a considerable amount of time to operators.
However, there are still gaps that needs to be filled by the operators to make sure the system is suggesting appropriate classifications, correct any inconsistencies or to reinforce it by performing manual classification.
Among the most critical aspects to consider we have:
- Manual classification of documents should be self-evident, easy to use.
- The classification process should be wired up to be completed very fast. An operator performs 100 files reviews all day, everyday. Speed is a major concern.
- Success is a user being able to select multiple pages (almost always in a row) and being able to select a classification right away.
- Provide some playful features during review completion to make it fun to use; some visual indicator that documents have been classified (tagged or moved to different view). We are open in general to see where you could possibly integrate gamification features to engage the user to keep using the application.
Application Flow & Features
See screenshots and task flow for guidance. The following content will explain how the existing application works.
The main user of this application is the Operator. His goal is to select a subset of pages of a File and classify them as a certain Document Type so that he can meet his 2 hour deadline to classify customer documents.
- A File is a container of several documents (think of it as a folder).
- A Document is a unit of written content (page (s) of a PDF, MS Word doc, etc ).
Queues
There are two observable counters for users to know the progress. Amount of files left to classify. Amount of documents left to process. When a file is submitted/classified, all of its documents are moved to the document queue (increment), and it’s subtracted from the files queue (-1 decrement).
Review File
The application process files one by one. Meaning that the operator opens the review file page (see screenshot 00-00) and immediately should have one file available to classify, one at a time.
The user can see the content of a file, meaning several documents. At the same time, there is a mechanism to navigate these documents by pages and to see individual document pages, up to 1100 pages per file.
The user can classify the documents by selecting them(see screenshot 00-03, 00-05 and 00-06), a subset (or all if needed). The classification is driven by document type. The user assign document types (e.g. insurance, bank statement, etc) to a set of documents contained within the file in progress.
Once the user finishes the assignments, he can submit the document (queues are updated accordingly - screenshot 00-09). The application state returns to the dashboard for the user to either select another file to classify or to review documents.
Review Document
The purpose of reviewing document is managing data points of the classified document.
- A Data Point is a segment extracted from the document content that represents a value. The data point extraction is an automated task from AIVA, she analyzes the content and detect possible data points. It can be done manually, in case AIVA doesn’t detect them properly.
- Classified document: document automatically classified by AIVA or the user (from the review file operation). The document contains several pages and has a document type assigned already (e.g. bank statement).
User should be able to navigate the pages of the document (screenshot 01-06), select which one to manage data points from and perform the manual editing, see screenshots 01-00 to 01-04. User can filter the subsets of the document, see screenshot 01-05.
The desired action ends with the user submitting the document.
UI Definitions
Review File: see http://take.ms/PfmsB
#1: Submit.
#2: Cancel.
#3: Escalate (screenshot 00-01).
#4: Ignore, removed from the app.
#5: Edit document classification type (screenshot 00-03 & 00-05).
#6: Add pages to selected classifier (screenshot 00-06, 00-07, 00-08).
#7: Review file process (screenshot 00-00).
#8: Review document process (screenshot 01-00).
Review Document: see http://take.ms/eHnpB
#1: Find Classification (screenshot 01-05).
#2: Submit.
#3: Escalate.
#4: Cancel.
#5: Data Point Management (Default View - screenshot 01-00).
#6: Page Navigation (screenshot 01-06)
Screens Requirements
Overall
- See the provided task flow and screenshots for reference of how the existing application works. However, please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals. For instance, requirements 3, 4, 8 could probably be grouped/reused, just an example. We’d like to see your proposals about flow and organization.
- Design a global header. This Classification app is part of a set of tasks that the agent has available. We’d like to see the following:
--sparck logo
-- Search
-- User info (photo, name, etc)
-- Logout
-- A mechanism to navigate to other tasks (12 total) available from AIVA: Rapid Classification (this app), Review Summary, Track P&C Insurance, Order Tax Transcripts, and others.
1. Login
User should be able to login using email and password. There should be a forgot password link. Do not include social login options.
2. Dashboard
User should be able to see an overall status of the current queues, files and documents respectively. It’s important to keep a constant status of the queues along the process.
User should be able to start the review file or review document actions from here.
3. Review File > Overview
See screenshot 00-00.
Actions
- Submit: It sends the file to the document queue. It might be useful to display some sort of notification/feedback of the submitted action. A good opportunity to integrate gamification, maybe a micro-interaction that moves the document from file queue to document queue. Design a screen to visualize this update or micro-interaction.
- Cancel: It removes the file. No design needed for this.
- Escale: See screenshot 00-01. The file is escalated to a another reviewer. User should be able to enter a reason with confirm/cancel buttons. Design this confirmation.
4. Review File > Page Navigation
See screenshots 00-00, 00-02.
Features
- High volumes of pages are typically classified by looking at a sizable thumbnail (and scrolling through), but in some cases you need to zoom in and out for a more readable view.
- User should scroll rapidly through pages (sizable thumbnail) and zoom in and out for more readable view.
- A file has 60-80 pages average. However, the limit is up to 1100 pages. Design considering these constraints.
- There should be two ways to navigate, 1) through pages in the file and 2) the pages you've already gone through and indexed.
- Partial zooming on documents should be possible so operators can expand important features.
- Pagination of documents will be preserved (i.e. if a Bank Statement is 4 pages, you will see Page 1, 2, 3, 4, in order).
- There should be three different scrolling functionalities.
-- 1; scroll through all pages (standard scrolling).
-- 2; jump to the next or previous page that's been indexed;
-- 3. jump to the next or previous page that's unclassified. and then for the queue, there should be some kind of filter that shows only the documents that haven't been classified (so it disappears from view when classified) and a filter that shows all pages (with tagging on the ones that have been classified).
We expect to see designs for:
4.1. Thumbnails/list/grid view (similar to 00-00, up to you).
4.2. Individual page view (similar to 00-02)
4.3. Zooming in.
4.4. Zooming out.
4.5. Scrollability solution.
4.6. Pagination solution.
5. Review File > Classification
See screenshots from 00-03 to 00-08.
Features
- There are 566 possible Document Types. You must think of a solution that can hold certain amount of items. Typically, 60 doc types are the most popular, but the others must be considered too.
- Some Document Types have Hierarchies, for example, Insurance has 16 sub-types, Assets has 5 sub-types, etc. Design considering this hierarchy.
- User should be able to select pages belonging to a certain document type and designate a classification. Selecting document type for classification should be easy and quick. Operators don't want to have to scroll through 500+ different document types.
- A document can receive only one type of classification, it can not have several; several documents (subset) can receive a type of classification.
- Document classification has a color code to follow. In the future, the system will automatically attempt to classify types, assigning different colors depending on the confidence level. By now, use green as default (manual assignment), just keep in mind there will be three possible colors (same as data points).
- User can see or access those classifications for each document (either pages get visibly tagged or are submitted into “done” and packaged according to doc type).
- Provide an option to view a sample version of a specific document type and compare side-by-side with the document the operator wants to classify but is unclear about.
- AIVA is able to identify duplicate documents, and so when they come in, there should be some kind of way to indicate that she's identified duplicates and group these together so operators can review further.
We expect to see designs for:
5.1. Document Type Selection (00-03 & 00-05).
5.2. Document Type Selection > Individual Page View (00-04).
5.3. Document Type Added Pages (00-06, 00-07, 00-08).
5.4. Duplicate documents case.
5.5. Sample Version of Document Type View.
6. Review Document > Data Point Management
See screenshots from 01-00 to 01-04.
Feature
- A selected document contains information from which values are extracted and marked as data point by the AI agent. User can also add those manually or remove.
- User can trigger a manual option (right now through the target icon). Content would highlight the possible values that can be extracted out of the document (01-01). User would select in the document which value he wants to associate to the data point (date for example, 01-02. Or name as seen in 01-03).
- A data point also allows inline edit (01-04) or removal.
- FYI: Color codes of the data points from the artificial intelligence agent. Confidence levels are marked by the color Green, Yellow and Red. Green is high confidence, Yellow means take another look and Red- there's something wrong, blurry, anomaly.
We expect to see designs for:
6.1. Data points side document view.
6.2. Data point target value.
6.3. Data point inline edit.
7. Review Document > Find Classification
See screenshot 01-05.
User can change the classification of the document. Once save is clicked user can see the data points.
8. Review Document > Page Navigation
See screenshot 01-06.
You can probably reuse the design of page navigation for File Review #4 with the same features.
Branding Guidelines
- Fonts and colors should be inline with the provided branding.
- The design style we’re looking for leans towards dashboard-like design.
- Follow Google Material Design Guidelines. Make sure to pay attention to layout, navigation, typography and color guidelines above all.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px width. Height as much as needed.
- Apply mobile-first design principles to smooth out the transition to the future tablet version.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30071778
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
- Male and female operators located abroad. Mortgage-related professionals with experience (from beginner to expert) classifying large volumes of documents.
Judging Criteria
- The rationale for why your design enables rapid classification.
- How well you plan the user experience and capture your ideas visually.
- Are mobile-first principles properly applied to your solution (iPad)?
- How well you implement the challenge requirements.
- 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, Adobe XD or Sketch. Layers should be named and well organized.
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.