Challenge Summary
Welcome to "NextGen Lendcentric Launchpad Design Challenge - Part 3". This challenge is a continuation of our previous challenge to create UI/UX for Lendcentric launchpad App. In this challenge, we need to create screen/features for the intake process. 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!
11) Declarations Screens (Key Important Screen!)
1) Getting Started Screens
2) Loan Information Screens
3) Product Comparison & Selection Screens
4) Loan Review Screen
5) Personal & Property Information Screens
- 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.)
1) Getting Started Screens
2) Loan Information Screens
3) Product Comparison & Selection Screens
4) Loan Review Screen
5) Personal & Property Information Screens
6) Credit Check Screen
7) Employment Screen
8) Income Screen
9) Assets Screen
10) Liabilities Screen
11) Declarations Screens (Key Important Screen!)
12) Application Review Screens
- 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
LendCentric Launchpad is essentially a Business to Consumer (B2C) portal or a borrower facing portal for loan originations. The NetOxygen Business to Consumer (B2C) acts as an extension of core NetOxygen Loan Origination System platform. It allows the borrowers to actively engage in the loan origination process which increases loan processing speeds for the lender. The key features include:
- User self-registration
- Integrated products and associated business rules
- Integrated pricing logic for providing rate quotes
- Dynamic communication tool keeping borrowers and back-office in sync
- Credit report integration
- Simple and smooth document delivery
- Borrowers can provide documentation electronically
- Dynamic status and conditions displays
- Seamless submission of loan data to LOS
- Tools for excellent user experience: Loan Calculators, Glossary, Rate Quotes, Track rate changes, RSS feeds, Referral Engine
- Field and Application level Help Topics
This project will be to design the application intake process. End users will go through the application intake process using the B2C portal and post-submission, they will be redirected to the post application intake process.
Challenge Goals
The Business to Consumer (B2C) portal will act as an extension of core NetOxygen Loan Origination System platform. It is designed with the intention to allow borrowers to actively engage in the loan origination process which in turn increases loan processing speeds for the lender. In this challenge, we want to design the entire application intake piece of the portal (Application Intake). This will allow the end users (borrowers) to create a loan application and submit it all by themselves with minimal guidance from loan officers.
Branding Guidelines
We already completed the Part 1 and 2 of this product and the designs can be viewed from the links below as your references:
Part 1
- Desktop: https://marvelapp.com/1jg26ha/screen/30550078
- Mobile: https://marvelapp.com/i1ci15g/screen/30535431
Part 2
- Desktop: https://marvelapp.com/28f1c2j/screen/32228410
- Mobile: https://marvelapp.com/ja0d186/screen/32228383
Some Branding Notes:
- The header design should be as mentioned on this screen: https://marvelapp.com/1jg26ha/screen/30550078
- Do NOT design it like the rest of the designs (do not use the blue bar in the header).
- Wherever there is data entry involved, we want to break the screens into smaller chunks so that the borrowers are not overwhelmed with too much data being asked at the same time. That is one of the reasons we have fewer fields in our mockups on each page with an exception for a few. The review screens, however, can have slightly more data presented but in a more user-friendly layout.
Design Consideration
- This should be a responsive application, but for now, we want to focus on Desktop version.
- Your design needs to meet and addressed "ADA compliance" standard. Basically, we need to make sure color isn't used to represent actions, the text is easy to read, color contrast is high, etc. Read more about ADA compliance from This Article.
- Please note, if your submission wins the challenge, we will have private task offer for you to create the mobile version!
- The wireframes attached should be used for CONTENT ONLY.
- The overall design and layout of the outer framework should still follow the same UI as provided in the branding guidelines area because these screens are part of the same product as well so we need to present a consistent experience to the borrowers (end users).
- Although the wireframes may provide some design suggestions, we are looking for innovative concept or layouts for the individual screens in terms of data presentation to end users and dynamically hide and show fields depending on the situation.
- In some of the pages, we have provided notes at the bottom to provide additional details for the screen layout and requirements.
Screen Requirements
We are looking for your creativity to create the layout and arrange content information for this Intake process. We DO NOT want you to just color the wireframes! Be creative and WOW us! Please design the following screens in your design:
1) Getting Started Screens
Wireframe Page 1-3
- This is the first page of the application intake.
- This screen sets the tone for the design parameters to be followed. Especially how the information on progress of the overall loan application and individual sections is presented to the borrowers is crucial.
- Also all the elements on the left hand menu represent different sections that they need to complete and they should be notated appropriately as the borrowers progress through the application.
- In this section, borrower will be asked about their loan purpose and the mortgage professional that will help them through the loan process.
2) Loan Information Screens
Wireframe Page 4-6
- Users can key in the basic loan parameters and see the list of eligible products.
- They should be presented with 3-4 best options with one highlighted as the best match based on their input parameters.
- They should also be able to view additional options, compare them and select other product if needed.
3) Product Comparison & Selection Screens
Wireframe Page 7-9
- Borrower will be presented with all loan options available in the system which they can select or compare between each other
- There will be a filter available for the borrower to adjust the loan that suitable for them
- The best option that matched with the borrower needs should be highlighted (in wireframe, it's "20 Year Fixed")
- Might needs to provide card and list view to show the available loan
4) Loan Review Screen
Wireframe Page 10
- Show quick summary of loan information that borrower selected
- Borrower will be able to edit the loan if necessay
- What is the best way to presented "Interest & Principal" and "Amortization" and all chart display?
- Can we arrange the information better?
5) Personal & Property Information Screens
Wireframe Page 11-15
- Borrower should provide some mandatory disclosures related to their personal information.
- Borrower will be able to view their personal information from this section.
- Additional information about borrower
- Current Residence Information
- Information for refinance status
- This screen is special because there are multiple layers of questions that come up based on the answers provided by borrowers and we need a concise way to represent this information.
6) Credit Check Screen
Wireframe Page 16
- After borrower filled all the necessary information, the system should be ready to pull the borrower credit
- Provide some interaction where borrower can choose whether they want to pull their credit or not
7) Employment Screen
Wireframe Page 17
- Borrower should be able to enter all the previous and current employment details on this screen.
- If borrower have more than one employment status (present or previous), they will be able to enter all those information on this screen
8) Income Screen
Wireframe Page 18
- This screen still related to "Employment" page before
- Based on how many informations of Employment details entered in previous step, this screen will capture the info and requesting borrower to enter details of their income from each employment.
9) Assets Screen
Wireframe Page 19
- Borrower will be asked about their assets
- They can import their asset information by signing in with their online banking credential
- Borrower also able to update their financial data manually (provide file upload and view upload files area)
10) Liabilities Screen
Wireframe Page 20
- Show list of liabilities from borrower credit report
- Borrower will be able to enter liabilities information manually
11) Declarations Screens (Key Important Screen!)
Wireframe Page 21-24
- Borrower will answer some of the mandatory questions and may also need to provide explanations depending on their answers.
- This screen (like many other screens) has to dynamically present the input fields to the users to provide clarifications based on the answers that they provide.
- Borrower should provide some mandatory disclosures related to their gender, ethnic, race, etc.
- We need to make these screens convenience for the borrower.
12) Application Review Screens
Wireframe Page 25-27
- This will be the final screen before the application is submitted.
- Borrower will be able to review all the information that they provided and should have the ability to edit any specific section that they want to update.
- These screens are tricky as they present both loan level information (like property address etc) and borrower level information ( if there are multiple borrowers on the same loan).
- We need the best way to present both types of information throughout this section.
Important:
- DO NOT JUST COPY the wireframes, it should be used as references for content information. Even though we would like to keep overall theme like cards usage, etc. We still need your creativity to represent the data and content information in a better way!
- Keep things consistent. This meansallgraphic 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).
Documentation
https://drive.google.com/drive/folders/1k20puXYP0oq38I6eCnf8y3Vc1385GMGs?usp=sharing
- Existing Storyboard
- Wireframes (App Intake Mockups.pdf)
Target Devices
- Desktop: Min 1280px (w) with Height adjusted accordingly
Target Audience
- Consumers who seek loans for home and other collaterals like a boat, auto, personal loans etc. Basically the end consumers or borrowers.
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/Illustrator/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 colors) or modify overall colors.
Round 1
Submit your initial design for a Checkpoint Feedback11) Declarations Screens (Key Important Screen!)
1) Getting Started Screens
2) Loan Information Screens
3) Product Comparison & Selection Screens
4) Loan Review Screen
5) Personal & Property Information Screens
- 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 Updates1) Getting Started Screens
2) Loan Information Screens
3) Product Comparison & Selection Screens
4) Loan Review Screen
5) Personal & Property Information Screens
6) Credit Check Screen
7) Employment Screen
8) Income Screen
9) Assets Screen
10) Liabilities Screen
11) Declarations Screens (Key Important Screen!)
12) Application Review Screens
- 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
LendCentric Launchpad is essentially a Business to Consumer (B2C) portal or a borrower facing portal for loan originations. The NetOxygen Business to Consumer (B2C) acts as an extension of core NetOxygen Loan Origination System platform. It allows the borrowers to actively engage in the loan origination process which increases loan processing speeds for the lender. The key features include:
- User self-registration
- Integrated products and associated business rules
- Integrated pricing logic for providing rate quotes
- Dynamic communication tool keeping borrowers and back-office in sync
- Credit report integration
- Simple and smooth document delivery
- Borrowers can provide documentation electronically
- Dynamic status and conditions displays
- Seamless submission of loan data to LOS
- Tools for excellent user experience: Loan Calculators, Glossary, Rate Quotes, Track rate changes, RSS feeds, Referral Engine
- Field and Application level Help Topics
This project will be to design the application intake process. End users will go through the application intake process using the B2C portal and post-submission, they will be redirected to the post application intake process.
Challenge Goals
The Business to Consumer (B2C) portal will act as an extension of core NetOxygen Loan Origination System platform. It is designed with the intention to allow borrowers to actively engage in the loan origination process which in turn increases loan processing speeds for the lender. In this challenge, we want to design the entire application intake piece of the portal (Application Intake). This will allow the end users (borrowers) to create a loan application and submit it all by themselves with minimal guidance from loan officers.
Branding Guidelines
We already completed the Part 1 and 2 of this product and the designs can be viewed from the links below as your references:
Part 1
- Desktop: https://marvelapp.com/1jg26ha/screen/30550078
- Mobile: https://marvelapp.com/i1ci15g/screen/30535431
Part 2
- Desktop: https://marvelapp.com/28f1c2j/screen/32228410
- Mobile: https://marvelapp.com/ja0d186/screen/32228383
Some Branding Notes:
- The header design should be as mentioned on this screen: https://marvelapp.com/1jg26ha/screen/30550078
- Do NOT design it like the rest of the designs (do not use the blue bar in the header).
- Wherever there is data entry involved, we want to break the screens into smaller chunks so that the borrowers are not overwhelmed with too much data being asked at the same time. That is one of the reasons we have fewer fields in our mockups on each page with an exception for a few. The review screens, however, can have slightly more data presented but in a more user-friendly layout.
Design Consideration
- This should be a responsive application, but for now, we want to focus on Desktop version.
- Your design needs to meet and addressed "ADA compliance" standard. Basically, we need to make sure color isn't used to represent actions, the text is easy to read, color contrast is high, etc. Read more about ADA compliance from This Article.
- Please note, if your submission wins the challenge, we will have private task offer for you to create the mobile version!
- The wireframes attached should be used for CONTENT ONLY.
- The overall design and layout of the outer framework should still follow the same UI as provided in the branding guidelines area because these screens are part of the same product as well so we need to present a consistent experience to the borrowers (end users).
- Although the wireframes may provide some design suggestions, we are looking for innovative concept or layouts for the individual screens in terms of data presentation to end users and dynamically hide and show fields depending on the situation.
- In some of the pages, we have provided notes at the bottom to provide additional details for the screen layout and requirements.
Screen Requirements
We are looking for your creativity to create the layout and arrange content information for this Intake process. We DO NOT want you to just color the wireframes! Be creative and WOW us! Please design the following screens in your design:
1) Getting Started Screens
Wireframe Page 1-3
- This is the first page of the application intake.
- This screen sets the tone for the design parameters to be followed. Especially how the information on progress of the overall loan application and individual sections is presented to the borrowers is crucial.
- Also all the elements on the left hand menu represent different sections that they need to complete and they should be notated appropriately as the borrowers progress through the application.
- In this section, borrower will be asked about their loan purpose and the mortgage professional that will help them through the loan process.
2) Loan Information Screens
Wireframe Page 4-6
- Users can key in the basic loan parameters and see the list of eligible products.
- They should be presented with 3-4 best options with one highlighted as the best match based on their input parameters.
- They should also be able to view additional options, compare them and select other product if needed.
3) Product Comparison & Selection Screens
Wireframe Page 7-9
- Borrower will be presented with all loan options available in the system which they can select or compare between each other
- There will be a filter available for the borrower to adjust the loan that suitable for them
- The best option that matched with the borrower needs should be highlighted (in wireframe, it's "20 Year Fixed")
- Might needs to provide card and list view to show the available loan
4) Loan Review Screen
Wireframe Page 10
- Show quick summary of loan information that borrower selected
- Borrower will be able to edit the loan if necessay
- What is the best way to presented "Interest & Principal" and "Amortization" and all chart display?
- Can we arrange the information better?
5) Personal & Property Information Screens
Wireframe Page 11-15
- Borrower should provide some mandatory disclosures related to their personal information.
- Borrower will be able to view their personal information from this section.
- Additional information about borrower
- Current Residence Information
- Information for refinance status
- This screen is special because there are multiple layers of questions that come up based on the answers provided by borrowers and we need a concise way to represent this information.
6) Credit Check Screen
Wireframe Page 16
- After borrower filled all the necessary information, the system should be ready to pull the borrower credit
- Provide some interaction where borrower can choose whether they want to pull their credit or not
7) Employment Screen
Wireframe Page 17
- Borrower should be able to enter all the previous and current employment details on this screen.
- If borrower have more than one employment status (present or previous), they will be able to enter all those information on this screen
8) Income Screen
Wireframe Page 18
- This screen still related to "Employment" page before
- Based on how many informations of Employment details entered in previous step, this screen will capture the info and requesting borrower to enter details of their income from each employment.
9) Assets Screen
Wireframe Page 19
- Borrower will be asked about their assets
- They can import their asset information by signing in with their online banking credential
- Borrower also able to update their financial data manually (provide file upload and view upload files area)
10) Liabilities Screen
Wireframe Page 20
- Show list of liabilities from borrower credit report
- Borrower will be able to enter liabilities information manually
11) Declarations Screens (Key Important Screen!)
Wireframe Page 21-24
- Borrower will answer some of the mandatory questions and may also need to provide explanations depending on their answers.
- This screen (like many other screens) has to dynamically present the input fields to the users to provide clarifications based on the answers that they provide.
- Borrower should provide some mandatory disclosures related to their gender, ethnic, race, etc.
- We need to make these screens convenience for the borrower.
12) Application Review Screens
Wireframe Page 25-27
- This will be the final screen before the application is submitted.
- Borrower will be able to review all the information that they provided and should have the ability to edit any specific section that they want to update.
- These screens are tricky as they present both loan level information (like property address etc) and borrower level information ( if there are multiple borrowers on the same loan).
- We need the best way to present both types of information throughout this section.
Important:
- DO NOT JUST COPY the wireframes, it should be used as references for content information. Even though we would like to keep overall theme like cards usage, etc. We still need your creativity to represent the data and content information in a better way!
- Keep things consistent. This meansallgraphic 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).
Documentation
https://drive.google.com/drive/folders/1k20puXYP0oq38I6eCnf8y3Vc1385GMGs?usp=sharing
- Existing Storyboard
- Wireframes (App Intake Mockups.pdf)
Target Devices
- Desktop: Min 1280px (w) with Height adjusted accordingly
Target Audience
- Consumers who seek loans for home and other collaterals like a boat, auto, personal loans etc. Basically the end consumers or borrowers.
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/Illustrator/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 colors) or modify overall colors.
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.