Challenge Summary

Welcome to "Process Confirmation Tool Web Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX design for our Confirmation Process Application so it can be more efficient and user intuitive. We are also looking for your help to create the best look-and-feel. This desktop app will help multiple different users (Reviewer, Target Entity, and Confirming Entity) to perform tasks related to a financial review. The user is able to do this through key workflows and through a series of processes and required functionality. We want you to focus on the UI/UX interactions and bring a clean, simple and modern (creative) design to this application. What should the user see and experience when using the application?

Round 1

Initial submissions for client review
01. Dashboard Screen
02. Project screen for reviewer showing the tab "Upload Confirmation data"
04. Project screen for Target Entity showing Tab "Send system registration request letter"
07. Project screen(s) for Confirming entity tasks

Round 2

All requirements as stated in challenge details with client feedback applied
00. GUI KIT Screen
01. Dashboard Screen
02. Project screen for reviewer showing the tab "Upload Confirmation data"
03. Project screen for reviewer showing tab "Select the Confirming Entities"
04. Project screen for Target Entity showing Tab "Send system registration request letter"
05. Project screen for Target Entity showing Tab "Request balance confirmation"
06. Project screen for Target Entity showing tab "Reconciliation of confirmation balance"
07. Project screen(s) for Confirming entity tasks
Background Overview
We have developed a prototype app which contains workflows to manage a set of confirmation processes by task basis. There are 3 key user types involved in the confirmation process; A reviewer, A Target Entity, and a Confirming Entity. The purpose of the application is not only to improve the efficiency and quality of the process but to transform and digitalize the review confirmation process that is currently paper-based. We hope we can use your design expertise to bring the visual experience of this app to the next level!

The balance confirmation workflow can be broken down into six major steps;  
A) A Target Entity (which is a client of the reviewer) needs to be able to upload balance data that needs to be confirmed
B) A reviewer needs to select a confirming entity for all the accounts that needs to be confirmed (Think of the confirming entity as a 3rd party reviewer)
C) The Target Entity then needs to be able to create a system registration letter (pdf) that they can send to the confirming entity so that they can register and access the balance data they need to confirm
D) Once the letter is created the reviewer and the Target Entity then needs to be able to request the confirming entity to confirm the balance data (this includes attaching additional documents and references etc..)
E) Once A to D is performed the Confirming Entity then needs to register with help of the code in the letter they received from the target entity after which they should be able to respond to the request to confirm the balance data
F) If the Confirming Entity finds discrepancies in the Balance Data the reviewer and the Target Entity needs to be able to reconcile the balance data

(Each task has some sub-tasks, e.g. "Reviewer creates balance confirmation requests" is a sub-task of D), and "the Target Entity checks and attaches necessary reference to the balance confirmation requests" is another sub-task of D). Please see required functionality section for more details regarding subtasks.

Attached to this challenge are two wireframes which should help you design the application. We want you to base your design of wireframe submission called Wireframes_2 (2nd Placement), but also take the best design elements from wireframes_1 (1st placement). We have proposed some elements that we would like you to incorporate from wireframes_1 (1st placement), if you think there are other UX/UI elements from this wireframe that you think are good please feel free to use them as well. 

Required Key Features:
A Main Dashboard: A clean and clear dashboard giving each user a high-level overview of all the projects they are involved in. A pending task section gives the user a clear view of which tasks needs to be performed. Clicking the task will take the user straight to the sub-task where the user-specification needs to take place.

A Project level Dashboard: On this screen each of the section of main flow (A to F) is divided by tabs. Tabs are the same for all user:
-- Upload Confirmation Data tab
-- Select the Confirming Entities tab
-- Registration Request Letter tab
-- Request Balance Confirmation tab
-- Confirmation Response tab
-- Reconciliation tab
-- Process status tab
- Each subtask under each tab is customized based on user role that is logged in to keep call-to-actions clear (please see screen requirement section and attachment for more details).
- There are many different user levels but we want you to focus on designing the application for the 3 main roles: A review manager, A  target entity manager,and  a confirming entity .When the wireframes and attachments refer to a user as a manager this user can not only approve the work of a staff worker (and their own work) but they should also be able to perform the work of a staff worker. We therefore want you to design all the screens with a manager role in mind even if the screen example says "staff".
- Links to Balance data, Master data, and a list of confirming entities related to the project should be accessed via a process status tab where the user can see the project status step-by-step (who performed the task and at what time etc.)
- Each of the data lists mentioned can be many 100 rows long. Please keep this in mind when designing the screens. 
- A simple back button will take user back to the main dashboard.

- Our favorite wireframe (#2) is currently showing all the subtask steps in the workflow, we would like to show the user specific steps only. For example, for the review manager we only want to see the steps that specific user needs to perform. That being said, we still want there to be some type of notification that the target has uploaded the data in the workflow etc. Please refer to wireframes #1 for ideas how to lay this out. 

- In addition to separating the steps based on the user role, it would be good to show all the expected steps that the needs to be performed by the logged in user role, just gray out the "future" step until the user completes the prerequisite step. To get a visual idea of this concept please refer to wireframes #1.

- A lot of the screens have one or many approval steps. For all approval or confirmation steps please add a reject or red-do button indicating that the user can also reject or send back the submitted data or request to the user who performed it. We are looking forward to seeing your design skills in creating a UI that clearly enables this and layout which show if a step has been rejected and how the user who performed the tasks can redo it and resubmit it.

Screen Requirements:
00. GUI Kit Screen
- Create a GUI KIT for any design elements in the apps so it can be replicable for other screens that not get covered in this design challenge.
- Please provide at least the following design elements for the apps:
-- Input Form (textbox, checkbox, dropdown, text areas, buttons, link, upload form, etc)
-- Table (header, footer, row, stripes, etc)
-- Any icons, labels, toggles, alert and notices, tags, menu, navigation, tooltip, modal window, confirmation box, progress bar, etc.

01.  Main dashboard screen
Reference Wireframes_2/2nd Placement -> "Dashboard-ReviewerStaff"
- A clean and clear dashboard gives each user a high-level overview of all the projects they are involved in. We want you to explore innovative UI element that can make it easy to understand the project flow and what needs to be done, which task are pending, the status of subtask etc.
- Clear pending task section gives the user a clear view of which tasks needs to be performed. Clicking the task will take the user straight to the sub-task where the user-specific action needs to take place. 
- Our favorite Wireframes_2/2nd Placement looks a little too simple, It would be good to see some pretty icons added and visual design on some of the interactive elements etc 
- For all pages, Menu bar is needed (missing in the wireframes_#2). In the menu, link to following pages should be included:
-- Project management
-- User management
-- Balance Data list
-- Confirming entities list
- In addition, we would like to have a sitemap added in all pages.

02. Project screen for reviewer showing the tab "Upload Confirmation data"
Reference Wireframes_2/2nd Placement -> Project details-UploadData-ReviewerManager
The following steps needs to be included:
-- Request  the upload of Balance Confirmation Data
-- Preview all the uploaded balance data
-- Preview all the uploaded Master data
-- Request additional data
-- see who requested and uploaded the data (even if we don't want to see the step produced by another user we still want to see some type of notification of who performed the task and when it was performed - this is true for all the screens)
-- Perform Data completeness check  (population analysis) on all the account data uploaded.
- In wireframes_2/2nd Placement the step to "give approval of data" and "perform data completeness" are two separate subtasks (5 and 6), this can be merged by making the approval process part of the data completeness check.
- Create preview screen where users can view data content from any files that have been uploaded to the system (this can be part of this screen or separate) keep in mind that the balance data set can be very large many 100 rows of data. We are really looking for your design expertise here, is there a visual smart way to incorporate it in the workflow screen or should it be a separate screen?

03. Project screen for reviewer showing tab "Select the Confirming Entities"
Reference Wireframes_2/2nd Placement -> Project details-UploadData-ReviewerManager-Completed
The following steps needs to be included:
-- Select Confirming Entity for each of the account that needs to be confirmed (based on the form shown in Project details-SelectEntities-ReviewerStaff)
-- To select entity, the user does not need to view Balance Data Summary (Wireframes_2/2nd Placement has this in the design), instead It would be good if the list of selected entity, account code/name, balance data total will be created and appeared when entities are selected instead of showing Balance Data Summary in default.
-- Request Approval of selected Confirming Entity
--- show a sub-workflow for the confirming entity which is being approved (logging when the entity was approved, when registration letter was created, when the entity was registered, when the confirmation request was submitted etc.)
-- Give approval of selected Confirming Entity

04. Project screen for Target Entity showing Tab "Send system registration request letter"
Reference Wireframes_2/2nd Placement -> Project details-RegistrationLetter-TargetEntityStaff & Project details-RegistrationLetterDownload-TargetEntityStaff
The following steps needs to be included:
--- See who requested the registration letter 
-- Create registration letter
---- Download List of confirming entities (without address)
[Note: user should be able to add areas to the excel or csv file offline if needed]
---- Upload List of confirming entities (with address)
---- View the uploaded entity list with address
---- Edit, update or add addresses in the application 
-- Request approval to send the registration letter
---- See who gave the approval to send the letter
---- Update the address if approval was not given
-- Download registration letter
--- add date to the “confirming entity flow” indicating when the registration letter was sent to the confirming entity

05. Project screen for Target Entity showing Tab "Request balance confirmation"
Reference Wireframes_2/2nd Placement -> Project details-BalanceConfirm-TargetEntityStaff
The following steps needs to be included:
-- See who created the confirmation request
-- Attach references and attachments  to each confirmation request (please take ideas from both wireframe_1 and wireframe_2 when you design this screen)
-- Notify the Reviewer of the attached file
-- See if the reviewer approved or asked for more attachments (continue this process until given final approval)

06. Project screen for Target Entity showing tab "Reconciliation of confirmation balance"
Reference Wireframes_2/2nd Placement -> Project details-Reconciliation-TargetEntityStaff & Project details-Reconciliation-TargetEntityManager
The following steps needs to be included:
-- See who requested the reconciliation
-- Perform Reconciliation according to the form outlined in Project details-Reconciliation-TargetEntityStaff for each of the account that need reconciliation
-- Internally approve or reject reconciliation result. If reject should be able to go back and add information etc. and re-request approval. As for all approval/reject/resubmit task. we are looking forward to seeing your design skills in creating a UI that clearly show if a step has been rejected and how the user who performed the tasks/redo it and resubmit it. 

07. Screen(s) - Project screen(s) for Confirming entity tasks
Reference Wireframes_2/2nd Placement -> confirmationresponsedata-confirmingEntitymanager & Dashboard-ConfirmingEntityManager
Please feel free to divide this up into more than one screen. If you think is needed.The important part is that we want this to be very simple and clean for the user. No need for complex process flows etc. 
The following steps needs to be included:
-- Use the code to register a user. This user should have access to the confirmation form that the reviewer and target entity prepared for them
-- Fill out  the form to respond to a confirmation request
-- Add the ability to add multiple rows when doing the confirmation response, because one confirming account sometime relates to multiple confirmed accounts. Just to elaborate further we would like the confirming entity to be able to add rows in the Account Balance Section (please see wireframe_2 for details). The relationship of Confirmation Balance and Account Balance could be one-to-multiple rows.
-- Give Approval of confirmation response before notifying the reviewer that the confirmation request had been completed. 

Create it as responsive design :
Desktop will be the primary target device, but please consider this app will be responsive in the future and design elements should be easily translated to working on different device sizes (i.e. tablet) in the future.
- Desktop : 1280px width with height adjusting accordingly

Branding Guidelines :
- Please follow the Branding guidelines: 
https://projects.invisionapp.com/boards/VQ1SSU6RSMBA3

Documentation :
- Wireframes.zip : https://drive.google.com/folderview?id=0B6CyMUG3aZWhV0JCZkZVbnlwUTQ&usp=sharing
-- Wireframes_2/ 2nd Placement  : Please use this layout as a base for your design
-- Wireframes_1/ 1st placement :  implement the best feature from these wireframes to your design (check challenge spec) 
-- End-to-end user application flow (using example screens from wireframe_2/2nd placement with some updates)

Target Audience
- The expected users of this application are Reviewers, the Target Entities, and the Confirming Entities. Normally there is a different level between the person requesting and approving a task (Staff vs Manager) but we want you to focus on design for the manager since they can do all the tasks (request a task, perform the task, and approve the task) we therefore want you to design all 3 UI elements layouts needed to do the tasks. 

Judging Criteria
- The overall functionality of your concepts. We are looking for an app that is easy-to-use, clean and visually pleasing
- Your ideas and concepts!
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.

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 layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

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.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

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.

Screening:

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.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

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

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30053803