Challenge Summary
Welcome to "NextGen - Open Loan Dashboard UI Redesign Challenge". In this challenge, we need your help to re-design our Open Loan View dashboard from our NetOxygen Loan Origination system and create UI KIT for the application. The new UI/UX should highly efficient and optimized lending operation that able to increases loan production, improves loan quality and reduces cost per loan at every aspect of origination from lead management and processing to underwriting, post-closing, secondary marketing and beyond.
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!
0) General Requirements
1) Open Loan View Screen
2) Login screen
3) UI Controls 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.)
0) General Requirements
1) Open Loan View Screen
2) Login screen
3) UI Controls Screen
- 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 NetOxygen Loan Origination System is a universal lending system that provides mortgage, consumer and commercial lenders with the ability to adapt to business, industry and regulatory change while driving progress in any market conditions.
From specialized functions to entire workflows, NetOxygen creates a highly efficient and optimized lending operation that increases loan production, improves loan quality and reduces cost per loan at every aspect of origination from lead management and processing to underwriting, post-closing, secondary marketing and beyond.
The goal of the application is to streamline loan originations and create a highly efficient and optimized lending operation that increases loan production, improves loan quality and reduces cost per loan at every aspect of origination from lead management and processing to underwriting, post-closing, secondary marketing and beyond. Users will use the application to create loans, manage and generate documents and take the loan forward in the loan origination lifecycle as per the designed workflow.
Challenge Goals
The main goal of this project is to re-think the user interface of our Open Loan View Dashboard and to provide a user-friendly design in order to facilitate productivity improvements and at the same time provide a very contemporary and modern design.
Design Consideration
- Lower contrast to reduce eye fatigue.
- Redesigned Open Loan View Dashboard.
- New and Modern look and feel.
- Refreshing login splash screen
- UI KIT/Control Redesign
- Repositioning screen elements for a better layout
- Redesigned work basket to easily resolve work items, manage ad-hoc requests and set up reminders.
- Re-engineered Task list with search capabilities
- Favorites Bar for commonly access tasks.
Important Notes (Key to Success):
- This application is a legacy system with lots of code and size limitations. Your Design MUST stay within the screen size parameters set in the challenge.
- Because the system is so complex and since we have lots of customization from clients means screen real estate is at a premium.
- Feel free (and encouraged) to move something around and take up screen real estate, but it needs to have a practical justification for the change, change the design of each section but within the boundaries of that section.
- The suggestions should include details on specifics like mouseover colours, selected, disabled status of the controls too.
- As our clients are among the top banks and lenders in the US, we would expect the styles to be very professional and conducive to the banking domain but at the same time very modern.
- We want the design to take into consideration that this application is used by the back end users continuously for 8 hours every day and so the colour suggestions need to be such that they are easy to look at for a long duration and does not cause any irritation or fatigue to eyes.
Screen Requirements
0) General Requirements
- Provide 2 different skin themes i.e. 2 different colour pallets so our clients can choose the one they like.
1) Open Loan View Screen
- Users can manage the work items assigned to them.
- Go to a screen by searching the tasks or clicking on one of their favourite pages.
- See at a glance section of the loan.
- Using the top menu, several other screens can be accessed. And data can be entered using the form in the centre.
- There is an extra client specific section on the right-hand side where external links can be hosted.
- Needs familiar layout, we need to continues a similar layout as the previous version, which helps reduce re-training, documentation updates, and promotes quicker adoption by current users.
1.1 Task Frame
- Task List, Present work task from executing custom workflows.
- Task List, Present personal reminders.
- Task List, Present ad-hoc work requests from other users.
- Workbench, Presents the customized set of screens users can navigate to in order to complete their work items.
- List of commonly referenced key loan level indicators.
1.2 New Presentation for Work Items
- Task from executing workflows, Multiple work items presented in a list.
- Task from executing workflows, Work items are no longer hidden in a combo box.
- Task from executing workflows, Status Indicators for each work item, along with the due date.
- Work Requests from Other Users, Work requests are presented as email notifications
- Work Requests from Other Users, Remarks stored as chat messages making it easier to follow the progress of a request.
- Personal Reminders, Easier to create, view, and manage reminders.
1.3 Expanded 3 Panel Task View Reminder Example
- Needs to be dynamic, change based on task type
- 3 areas need to be a redesign, Task, Task Details, and Task Remarks
1.4 Expanded 3 Panel Task View
- Layout Change, When expanded the workbench task in focus is resized keeping the work item details in focus.
- Layout Change, Useful when needing to change loan information and see HardStop details, reminders, or work request information at the same time.
1.5 Page Contents
- Loan Level Content Screens, Redesign controls to provide a better user experience.
- Loan Level Content Screens, Uniform design and layout across screens.
- Loan Level Content Screens, Resized screens to provide maximum utilization of the page and minimize scrolling.
1.6 Client Content
- Navigation Content, Client content can be placed to the right of the mainframe.
- The example to the right is a list of commonly used external links.
2) Login screen
- Users can provide username and password.
- Needs Reset password scenario
- Needs error login scenario
- If users belong to multiple groups which means they can perform different roles, then using the second pop, they can define which user role would they like to log in.
3) UI Controls Screen
- We need design suggestions on the UI control look and feel.
- The form in the centre can host various UI controls and we have listed all possible controls that can be used:
-- Combo box
-- List box
-- Radio button
-- Radio / another combo box
-- Static text – Label
-- Silverlight control
-- Textbox
-- Checkbox
-- Group box
-- Button
-- Generic data control. (grid control)
-- Dynamic Borrower tab control (tab control)
-- Borrower list control
-- List chooser
-- Menu Bar
-- Image Button
-- Message box
-- Product Selector Pre-filter
-- Product Selector Ratelines
-- Tree Control
-- List chooser
-- Yes No Dialog box
-- Multiline text editor
-- Document viewer tree control
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 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
- Font, Colors, Style: Open To Designer.
- This is a back-end application for bank employees.So the colour suggestions can be whatever seems best for the banking domain but yet very contemporary.
- The users will continuously use this app for 8 Hours every day, so your colour suggestions need to be such that they are easy to look at for a long duration and does not cause any irritation or fatigue to eyes.
Documentation
- NetOxygen UI Redesign.pptx contains screenshots of all the components that we are expecting to restyle and provide colour suggestions on.
- NetO UI Controls.pptx contains screenshots of all the 24 design elements that are used in our application and we need style suggestions on each of them. The pages in the screenshot are just indicative forms to showcase the controls. Just focus on each individual control and provide us with the design for them.
Target Devices
- We are targeting for Desktop App
- The application frame is restricted to 1024x768 that includes all the elements in the open loan view.
- The left task column is limited to a max width of 205px and the centre form is restricted to 805px.
Target Audience
- Employees of the lenders who are involved in Loan origination process will use the application.
- For example: Originators, Processors, Underwriters, Closers etc.
Judging Criteria
Your submission will be judged on the following criteria:
- 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
- Overall design and user experience
- Cleanliness of screen design and user flow
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/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.
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 Feedback0) General Requirements
1) Open Loan View Screen
2) Login screen
3) UI Controls 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 Updates0) General Requirements
1) Open Loan View Screen
2) Login screen
3) UI Controls Screen
- 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 NetOxygen Loan Origination System is a universal lending system that provides mortgage, consumer and commercial lenders with the ability to adapt to business, industry and regulatory change while driving progress in any market conditions.
From specialized functions to entire workflows, NetOxygen creates a highly efficient and optimized lending operation that increases loan production, improves loan quality and reduces cost per loan at every aspect of origination from lead management and processing to underwriting, post-closing, secondary marketing and beyond.
The goal of the application is to streamline loan originations and create a highly efficient and optimized lending operation that increases loan production, improves loan quality and reduces cost per loan at every aspect of origination from lead management and processing to underwriting, post-closing, secondary marketing and beyond. Users will use the application to create loans, manage and generate documents and take the loan forward in the loan origination lifecycle as per the designed workflow.
Challenge Goals
The main goal of this project is to re-think the user interface of our Open Loan View Dashboard and to provide a user-friendly design in order to facilitate productivity improvements and at the same time provide a very contemporary and modern design.
Design Consideration
- Lower contrast to reduce eye fatigue.
- Redesigned Open Loan View Dashboard.
- New and Modern look and feel.
- Refreshing login splash screen
- UI KIT/Control Redesign
- Repositioning screen elements for a better layout
- Redesigned work basket to easily resolve work items, manage ad-hoc requests and set up reminders.
- Re-engineered Task list with search capabilities
- Favorites Bar for commonly access tasks.
Important Notes (Key to Success):
- This application is a legacy system with lots of code and size limitations. Your Design MUST stay within the screen size parameters set in the challenge.
- Because the system is so complex and since we have lots of customization from clients means screen real estate is at a premium.
- Feel free (and encouraged) to move something around and take up screen real estate, but it needs to have a practical justification for the change, change the design of each section but within the boundaries of that section.
- The suggestions should include details on specifics like mouseover colours, selected, disabled status of the controls too.
- As our clients are among the top banks and lenders in the US, we would expect the styles to be very professional and conducive to the banking domain but at the same time very modern.
- We want the design to take into consideration that this application is used by the back end users continuously for 8 hours every day and so the colour suggestions need to be such that they are easy to look at for a long duration and does not cause any irritation or fatigue to eyes.
Screen Requirements
0) General Requirements
- Provide 2 different skin themes i.e. 2 different colour pallets so our clients can choose the one they like.
1) Open Loan View Screen
- Users can manage the work items assigned to them.
- Go to a screen by searching the tasks or clicking on one of their favourite pages.
- See at a glance section of the loan.
- Using the top menu, several other screens can be accessed. And data can be entered using the form in the centre.
- There is an extra client specific section on the right-hand side where external links can be hosted.
- Needs familiar layout, we need to continues a similar layout as the previous version, which helps reduce re-training, documentation updates, and promotes quicker adoption by current users.
1.1 Task Frame
- Task List, Present work task from executing custom workflows.
- Task List, Present personal reminders.
- Task List, Present ad-hoc work requests from other users.
- Workbench, Presents the customized set of screens users can navigate to in order to complete their work items.
- List of commonly referenced key loan level indicators.
1.2 New Presentation for Work Items
- Task from executing workflows, Multiple work items presented in a list.
- Task from executing workflows, Work items are no longer hidden in a combo box.
- Task from executing workflows, Status Indicators for each work item, along with the due date.
- Work Requests from Other Users, Work requests are presented as email notifications
- Work Requests from Other Users, Remarks stored as chat messages making it easier to follow the progress of a request.
- Personal Reminders, Easier to create, view, and manage reminders.
1.3 Expanded 3 Panel Task View Reminder Example
- Needs to be dynamic, change based on task type
- 3 areas need to be a redesign, Task, Task Details, and Task Remarks
1.4 Expanded 3 Panel Task View
- Layout Change, When expanded the workbench task in focus is resized keeping the work item details in focus.
- Layout Change, Useful when needing to change loan information and see HardStop details, reminders, or work request information at the same time.
1.5 Page Contents
- Loan Level Content Screens, Redesign controls to provide a better user experience.
- Loan Level Content Screens, Uniform design and layout across screens.
- Loan Level Content Screens, Resized screens to provide maximum utilization of the page and minimize scrolling.
1.6 Client Content
- Navigation Content, Client content can be placed to the right of the mainframe.
- The example to the right is a list of commonly used external links.
2) Login screen
- Users can provide username and password.
- Needs Reset password scenario
- Needs error login scenario
- If users belong to multiple groups which means they can perform different roles, then using the second pop, they can define which user role would they like to log in.
3) UI Controls Screen
- We need design suggestions on the UI control look and feel.
- The form in the centre can host various UI controls and we have listed all possible controls that can be used:
-- Combo box
-- List box
-- Radio button
-- Radio / another combo box
-- Static text – Label
-- Silverlight control
-- Textbox
-- Checkbox
-- Group box
-- Button
-- Generic data control. (grid control)
-- Dynamic Borrower tab control (tab control)
-- Borrower list control
-- List chooser
-- Menu Bar
-- Image Button
-- Message box
-- Product Selector Pre-filter
-- Product Selector Ratelines
-- Tree Control
-- List chooser
-- Yes No Dialog box
-- Multiline text editor
-- Document viewer tree control
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 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
- Font, Colors, Style: Open To Designer.
- This is a back-end application for bank employees.So the colour suggestions can be whatever seems best for the banking domain but yet very contemporary.
- The users will continuously use this app for 8 Hours every day, so your colour suggestions need to be such that they are easy to look at for a long duration and does not cause any irritation or fatigue to eyes.
Documentation
- NetOxygen UI Redesign.pptx contains screenshots of all the components that we are expecting to restyle and provide colour suggestions on.
- NetO UI Controls.pptx contains screenshots of all the 24 design elements that are used in our application and we need style suggestions on each of them. The pages in the screenshot are just indicative forms to showcase the controls. Just focus on each individual control and provide us with the design for them.
Target Devices
- We are targeting for Desktop App
- The application frame is restricted to 1024x768 that includes all the elements in the open loan view.
- The left task column is limited to a max width of 205px and the centre form is restricted to 805px.
Target Audience
- Employees of the lenders who are involved in Loan origination process will use the application.
- For example: Originators, Processors, Underwriters, Closers etc.
Judging Criteria
Your submission will be judged on the following criteria:
- 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
- Overall design and user experience
- Cleanliness of screen design and user flow
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/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.