BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "InvestLab - Credit Portal UI Design Refinement Challenge". Previously we run a RUX design challenge to create several key screens for our Credit Portal application. In this challenge, we are looking for another help to create all missing screens and adjust the existing key screens so it can fit the user roles flow in the application. 

The InvestLab Credit Portal is our new B2B (business-to-business) web-based application for Sub-distributors and providers of funds that our company has a platform service agreement with. The purpose of the portal is to replace a manual process of sending various reports and invoices to providers via email by providing a UI where they can view and download these reports. Your design needs to follow the previous winning design, it needs to be simple, easy to use, offer a great focus to the user, and at the same time it needs to look modern and professional.

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
01) All User Roles (Screen 1 to 5)
02) Provider Roles (Screen 6 to 7)
- 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 Updates
01) All User Roles (Screen 1 to 5)
02) Provider Roles (Screen 6 to 7)
03) Sub-Distributor Roles (Screen 8 to 11)
04) Administrator Roles (Screen 12 - 14)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into 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
The Credit Portal application is an internet facing application of InvestLab AG, requested from Investment Solutions and Products team. It is a B2B application for Sub-distributors and providers of funds that the InvestLab has a platform service agreement with. 

The total expected number of users is around 200, and it is expected to increase in the future. The user will have access to the system via an authentication mechanism. Their registration will happen manually since this will be managed by the provider's team. InvestLab users will have access to the platform to administer the users creation and mapping to Sub-distributors and providers entities. A manual mechanism to upload the reports will also exist.

The purpose of the portal is to replace a manual process of sending various reports and invoices to providers via email by providing a UI where they can view and download these reports. In accordance with regulations, sub-distributors will be able to access the total fund universe CS has under an agreement and view 3rd party providers' funds based on filter criteria. Also, the application goal will be to streamline the client relationship management and the exchange of information and documentation between CS and providers and Sub-distributors.

Challenge Goal
Create all missing screens and adjust the existing screens to fit user roles flow in the Credit Portal app while keep the design quality consistent or better from the original design base

Design Consideration
- Consistency with the Design base 
- Keep the design clean and professional. Think on a corporate end use
- Best Practice for Responsive Web Based App (Focus on Desktop for NOW)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)

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=653347

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

All User Roles
01) Login Screen
- Ordinary login form fields (username, password, submit button, forgot password, remember me, etc) 
- User will be redirected to their account privileges by the system so we don’t need to separate login screen for each roles
- Needs error login scenario (wrong password and forgot credential)
- Provide screen interaction where user have been log out from the InvestLab credit portal. Logout process should be able to be performed from any page once logged in. The user is shown a blank page with an appropriate message on it after being logged out (see “logout.jpg” for the wireframe)
- For a new user/first time user that never been login before, they will see a disclaimer window first (see “disclaimer.jpg” for the wireframe) with button to “Accept” or “Decline” available before they being redirected to their dashboard. If user declines the disclaimer, he will be redirect back to the login screen. Disclaimer layout can be popup, new screen, or other approach that you think will be perfect for it.  
- Need to have reset password screen (via email or ask administrator)

02) Homepage/Dashboard Screen
- User will be redirected to this screen once they are successfully logged in to the application
- Needs to have Notification area for each user 
- Needs 3 screen variations (for Provider, Sub-Distributor and Admin) for the homepage/dashboard, adjust the information for each homepage/dashboard to match with what the user should see (show the correct information for each user, admin can see information related to the app, other users will see information related to their privileges)

- User (Provider), will have the following menu in their dashboard: 
-- Dashboard
-- My User / Profile
-- My Reports
-- My Invoices
-- Education/Research
-- Contact Us
-- Logout.

- User (Sub-Distributor) will have the following menu in their dashboard:
-- Dashboard
--- Credit Notes
--- Trailer Fee Reports
--- My Funds
-- MyUser / Profile 
-- Education/Research
-- Contact Us
-- Logout

- Admin will will have the following menu in their dashboard: 
-- Dashboard
-- MyUser / Profile
-- Notification Management
-- Accounts
-- View Logs
-- Logout

03) Contact Us Screen
Wireframe reference "Contact.jpg"
- Show list of contact related to the user and help/support for the application
- This screen will show Contact details for the Portal (general info) and for the Key Account Manager called KAM (specific info, different content for each user) 
- Every user (Provider and Sub-Distributor) has its own KAM and they will have an ability to contact their KAM or contact admin/support to get help in the application

04) MyUser / Profile Screen
- All user will be able to manage his profile
- View his existing information
- Update/Change profile information
- Change login password

05) Education / Search Screen
- This page already exist, see base design "09 Research & Information@2x.jpg"
- You just need to include and adjust the screen to match the latest content for each user (menu, layout, etc)
- Sub-Distributor and Provider will have this feature, Admin don’t need this feature
- Education / Research page opens a new tab/window and shows that page in the new tab/window. The user remains logged in.

Provider Roles
06) MyInvoices Screen
- Should be listing all invoices related to the user 
- Put only placeholder for now, we will have the real content available in finalfix phase

07) MyReports Screen
See "MyReports.jpg " in wireframes folder
- Provider will be able to see all reports documents related to them from here
- Provider can see any type of document that is allowed to see (admin will set what kind of document that the provider can see).
- There are various of reports that provider can see in this page, they are:
-- Net Sales Reports
-- Trailer Fees
-- Trailer Fee Exclusions
-- Holdings Reports
-- Coverage Reports
-- Service & Quality Reports
-- List of Sub-Distributors
-- Service Fee Calculations Reports
-- Holdings Exclusion Reports
- All the reports follow same format, please use placeholder/sample report for now
- By default the latest 3 documents are shown, ordered by the date in descending order.
- User clicks on one of the documents and then it is being downloaded.

Sub-Distributor Roles
08) Credit Notes Screen
- This feature already have the screens created from our previous challenge
- Adjust the screen to match with the latest Sub-Distributor screen elements (menu, layout arrangement, etc) 
- See "01 Dashboard - Credit Notes 1@2x.jpg" to "01 Dashboard - Credit Notes 7 Nofication@2x.jpg" for the existing screen

09) Trailer Fee Reports Screen
- For now, create this screen as a screen with list of reports with view and download option

10) My Funds Screen
- This feature already have the screens created from our previous challenge
- Adjust the screen to match with the latest Sub-Distributor screen elements (menu, layout arrangement, etc) 
- View Base design "02 Dashboard - Fund Reports 1@2x.jpg", "02 Dashboard - Fund Reports 2 Fund Followed@2x.jpg" to see interaction for following Fund
- View Base design "02 Dashboard - Fund Reports 3 select 1 fund row@2x.jpg" to "05 Floating State on Scrolling@2x.jpg" to see interaction for comparing Funds
- View Base design "06 Back to Dashboard - Filters & Search - 1@2x.jpg" to "06 Back to Dashboard - Filters & Search - 3 Filters Applied@2x.jpg" to see interaction for searching Funds
- View Base design "07 Static & Dynamic Funds Data@2x.jpg" to see Funds Data (Static/Dynamic)

11) View Single ISIN Data Screen
See "single-ISIN-data.jpg" in wireframes folder
- We need to show this fund classification data for now

Administrator Roles
12) Manage Accounts Screen
- The admin can see the list of users interacting with the system and manage the user accounts and their privileges in the system. In the end of the editing process, he can save the made changes
- The admin can assign roles (Provider, Sub-Distributors, Administrator), delete create and edit users

- The admin assign users to specific Accounts based on the role (valid only for Sub Distributors and Providers):
-- if assigned the role Provider then only providers accounts can be assigned to the user
-- if assigned the role Sub-Distributor only Sub-Distributor accounts can be assigned to the user

- Admin also will be able to set the user account as active/inactive (if inactive, user cannot login to the app)

- The admin can delete, create and edit Sub-Distributors. Every Sub-Distributor has to be assigned to one Key Account Manager. When create new Sub-Distributors account the following information needs to be added:
-- Sub-Distributor Name
-- (Sub-Distributor Id) - this will be provided by the system (read only)
-- Sub-Distributor Status - default is new
-- Sub-Distributor Key Account Manager (dropdown options to select available KAM)
-- Sub-Distributor Blocked/Allowed Providers
-- Sub-Distributor Email

- The admin can delete, create and edit Providers. Every Provider has to be assigned to one Key Account Manager. When create new Provider account the following information needs to be added:
-- Provider Name
-- (Provider id) - this will be provided by the system (read only)
-- Provider Status
-- Provider Key Account Manager (dropdown options to select available KAM)
-- Provider Email

- The admin can create/edit Key Account Managers. The following information needs to be added:
-- Key Account Manager Name
-- Key Account Manager Telp
-- Key Account Manager Address
-- Key Account Manager Email

- View base design "08 Providers - 1@2x.jpg" to "08 Providers - 5 Blocked Providers Updated@2x.jpg" to see glimpse of Admin features to manage user 

13) Notifications Management
See "notification-management.jpg" for the wireframes
- Administrator will be able to manage notification for all user from this screen
- Users get notifications via email whenever there is a new/updated document available for their Account (Provider or Sub-Distributor) that the users are assigned to
- Admin can see list of all users based on their privileges (Provider or Sub-Distributor) and dig down to manage their notification
- Administrator will be able to decide what kind of document types that the user will get notifications (for example, pdf will send notification to the user, but docx will not send notification to the user email).
- Notification emails send to the user will be archived in the application as a communication to the customer (Admin can see log history of each user notification)

14) Actions Log Screen
See "action-log.jpg" for the wireframes
- Screen for Action Logs
- The admin can filter the system logs according to the timestamp of the events and see the results using the Search button
- By default the timestamp of Until: is the current timestamp (T) and of From: T - 3days

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

 
Marvel Prototype
- We need you to upload your screens to the Marvel App. Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot) 
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
 
Branding Guidelines
- Follow our design base (winning submission from the previous challenge)

Documentation
https://drive.google.com/drive/folders/1fImwWS8oCIdjT6arjZtVXIU41vD0FkJG?usp=sharing
- The previous winning design (use it as design base)
- Wireframes

Target Devices
- Responsive Web Application (Focus on Desktop for now)
- Desktop: 1280px (@1x) width or 2560px (@2x) if you work on a retina display
- Use grid systems for your layout

Target Audiences
InvestLab User, such as:
- Provider
- Sub-Distributor
- Admin

Judging Criteria
Your submission will be judged on the following criteria:
- Completeness of the screen requirements
- Design consistency with our previous winning design
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
 
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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
 
Source Files
All source files of all graphics created in either Adobe Photoshop, XD, or Sketch and saved as editable layer 
 
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.

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.

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:

Topcoder Open 2019

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
  • Sketch
  • XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30078581