Challenge Summary
Welcome to Next Gen LendCentric Launchpad Design Concepts Challenge
Next Gen 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.
For this challenge, we need your help to create design concepts of some Next Gen LendCentric Launchpad screens explained on challenge specification for Desktop and Mobile screens.
Let’s discuss any questions you have via challenge forum.
Good luck and Have fun!
1). Landing Page
2). Dashboard
3). To-Do List
4). Loan Status
1). Landing Page
2). Dashboard
3). To-Do List
4). Loan Status
5). Messages
6). Documents
7). Login
Next Gen LendCentric Application Features:
- 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
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Create design that will boost the user experiences of Launchpad Page.
- Make sure all elements/buttons/chart is easy to use/understand.
- All text on your submission need to be editable
- When you create icon/graphic, make sure they use vector shape format.
a). Screen Sizes:
- Desktop Standard Screen Size: 1366px(w) × 768px(h)
- Mobile Retina Screen Size: 750px(w) × 375px(h)
b). Design guideline, colors, typography.
- We do not have any guidelines or restrictions. All wireframes provided are indicative of what we intend the CONTENT ONLY to be on the screens.
- We have also provided use case diagrams for better understanding of the user flows.
- We are looking for original concepts, ideas, and designs. DO NOT color in or just "design" the wireframes.
- Color palette is up to designer
- Fonts is up to designer
c). Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: tgerring@topcoder.com & lunarkid@copilots.topcoder.com
- Important! Make sure to include the shared URL/Link to your MarvelApp inside your "notes.txt"
Design Problems:
- This is the first iteration of the Next Gen LendCentric Launchpad project. We are starting with a use case of landing page for registration and dashboard screen which is shown after a loan has been created. There are many more modules that will be added later to include the entire loan application intake process and borrower rate shopping scenarios etc.
- This is also a responsive application, we would like to design all screens for mobile as well.
Page Requirements
1). Landing Page
- Provides different ways to login to the application.
- This should be a very attractive page in terms of header, footer and body design.
- Design should be visually engaging and clear for the user that there are 3 distinct actions that use can take
- Open to all layout suggestions and looking for the best UX/UI for organizing the content
Page Elements:
A. Header
- Application Logo
- Phone Number
- Chat Now button
B. Hero Image/ Slider/ Graphic
- Slideshow banner or some other main graphic that will display some text information about loan. Example: Loan Origination Technology. That fuels the future lender
C. Action Buttons
- Want to start a new loan application. Get Started
- Are you an existing customer. Register
- Already registered? Sign in
- Any additional text, description, and/ or icons can be included with these sections/ actions as well. We are open to your layout ideas and suggestions.
D. Footer
- Client partner logos
- Footer text:
NMLS #131108
LendCentric LaunchPad, 810 Crescent Center Dr. Suite 400 Franklink, TN-3
® 2014, WGS LaunchPad, All Rights Reserved.
- Footer links for
-- Security & Privacy
-- Disclosures & Licenses
-- Terms of Use
-- About Us
2). Dashboard
- This is the first screen after users logs in. Here are all page navigation after user logged in:
-- Dashboard
-- Loan Status
-- To-Do List
-- Documents
-- Disclosures
-- Messages
-- Contacts
-- Calculators
-- Property Info
-- Help
- Provides a complete summary of the selected loan with all important sections.
- Each section on dashboard needs to be designed keeping in mind the adaptive design model as borrowers may use the same screen from desktop to mobiles.
- Also multiple "views" should be provided for loan status, to do list sections, etc on dashboard so that our clients can choose which format of card to be displayed. Not every section needs multiple views, but where it makes sense based on the content/ data.
- We are very much open to any other creative ideas if possible given that it covers all aspects. Examples, could include cards/ tiles, sub-sections of content, etc. Show us your best Dashboard designs!
- We want borrowers to be able to choose what sections they intend to see on the dashboard screen and hence configuration options should also be provided. User preferences section to turn off/ on different content sections on the dashboard.
Page elements:
A. Header/ Navigation (across all Dashboard screens)
- Select Loan Dropdown
- Settings
- Status
- Help
- User Information/ User Profile
B. Summary
- Loan Id: 111-123456789
- Loan Type: Home Purchase
- Fixed rate
- 30 Year
- $435,000
- $87,000
- 4,265%
- Locked
C. To-Do List
1) Last 3 Year W2
2) Last 6 Months Paystub
3) Govt Issues Photo Identification
4) Purchase Sale Agreement
5) Copy of Hazard Insurance Polic
D. Disclosure
1) Welcome Package
2) Initial Disclosures
3) Denial Letter
E. Loan Status
- Chart
- Legends: Origination, Processing, UW, Closing
F. Property Info
- Property Address: 1731 Decatur Cir, Franklin TN 37067
- Property Type: Single Family
- Occupancy Type: Primary Residence
G. Loan Contacts
- Loan Officer, John Orig, 236457698778
- Processor, Patty Processor, 232903798263
- Title Company, Ursula Title, 213123213789
- Seller, Jack Lang, 23278923978
- Realtor, Builders, 2323232983798237
H. Map
- Google Map displayed here (could be combined with Property info if it makes sense. Maybe another "view" of that section)
3). To-Do List
- This is probably one of the most commonly used screens by borrowers.
- This screen will contain all the items that we need the borrowers to take action upon.
- Examples being upload documents, e-sign the documents etc.
- Option should be provided to upload multiple documents, provide comments etc.
- As with other screens, we are again open to suggestions on user experience and layout but we will still like to keep the 3 sections as Open Items, Received Items and Closed Items.
- Designers can design these three sections in any way as long as they are very easily presented and understood by the end users/borrowers.
Page elements:
Check provided screen flow of To-Do List.zip. Remember, you just need copy the content. Ignore the page layout. We are just showing this as reference, please design your own ideas and concepts.
4). Loan Status
- We want a very good look and feel for the loan status screen as this shows the actual progress on the loan.
- We are very open to having creative graphical representations or animations as well.
- However, we would need configurable options in terms of defining the buckets like Origination, Processing, Underwriting and Closing.
- Also the sub items under these could increase/decrease and hence should be configurable. This is intended to be a read only screen with no action performed by the user.
- We would need atleast 2-3 different views of this screen as our clients may want different formats: Eg:
- A graphical representation
- A text representation with status display and progress tracking
- An animation version?
- We are open to your ideas
Page elements
- Display progress status for each block and checked/unchecked mark icon for completed loan status
A. Origination
- Application Capture
- Credit Pulled
- Product Selected
- Generated Disclosures
B. Processing
- Your document received
- Appraisal Received
- Title Received
- Verification of Documents
C. Underwriting
- Income/Credit Analysis
- Collateral Analysis
- UW Decision
D. Closing
- Closing Disclosure
- Closing package sent
- Closing Date Scheduled
- Document Signing
- Disbursements of funds
5). Messages
- This is the message center.
- All message to and from borrower will be displayed here
- Only the first line of the message be show, the rest should be displayed on clicking down the arrow. (like email)
- A panel should open displaying the rest of the message
- We’re open to suggestion on the entire screen, user interactions, and overall UX
Page Elements:
- Create Show All, Sent By Me, Sent to me tabs
- Example message row
- Alert button, reply/forward icon, Message title, Date/Time
- Need able to expand row to view message details
- Display Post Message form
6). Documents
- This page displayed all Documents
- Disclosure that are not yet signed should have hyperlink to to To-Do List section
- Sort option should be provided on every column
- Filter options should be provided for Doc Type and Status Column
Page elements:
A. Filter:
- Doc Type
- Status Column
B. Table Columns (Values)
- Doc Type (Disclosures, Provided By You)
- Description (Closing Disclosures, W2 for 3 Years, Last 3 Month Pays, Initial Disclosure, Re-Disclosure)
- Upload Date & Time (Date & Time)
- Status (Viewed, Not Viewed, Closed, Received, Signed/Closed. Viewed)
- File Name (Filename)
7). Login
- Create how Login page should look for this Next Gen LendCentric Launchpad
Page elements:
- Company Logo
- Email
- Password
- Forgot Password Link
- Security Question: What school did you attend for sixth grade?
- Checkbox: This is Private Computer. Dont ask me again
- Sign In button
- Register button
Target User
- Consumers who seek loans for home and other collaterals like boat, auto, personal loans etc. Basically the end consumers or borrowers.
Judging Criteria
- How well you create Next Gen LendCentric Launchpad Design Concepts
- Cleanliness of your graphics and design.
- 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 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.
Next Gen 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.
For this challenge, we need your help to create design concepts of some Next Gen LendCentric Launchpad screens explained on challenge specification for Desktop and Mobile screens.
Let’s discuss any questions you have via challenge forum.
Good luck and Have fun!
Round 1
Initial Next Gen LendCentric Launchpad Design Concepts Challenge on Desktop screen size for these following pages:1). Landing Page
2). Dashboard
3). To-Do List
4). Loan Status
Round 2
Final Next Gen LendCentric Launchpad Design Concepts Challenge on Desktop & Mobile screen sizes combined with Checkpoint Feedback for these following pages:1). Landing Page
2). Dashboard
3). To-Do List
4). Loan Status
5). Messages
6). Documents
7). Login
Next Gen LendCentric Application Features:
- 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
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Create design that will boost the user experiences of Launchpad Page.
- Make sure all elements/buttons/chart is easy to use/understand.
- All text on your submission need to be editable
- When you create icon/graphic, make sure they use vector shape format.
a). Screen Sizes:
- Desktop Standard Screen Size: 1366px(w) × 768px(h)
- Mobile Retina Screen Size: 750px(w) × 375px(h)
b). Design guideline, colors, typography.
- We do not have any guidelines or restrictions. All wireframes provided are indicative of what we intend the CONTENT ONLY to be on the screens.
- We have also provided use case diagrams for better understanding of the user flows.
- We are looking for original concepts, ideas, and designs. DO NOT color in or just "design" the wireframes.
- Color palette is up to designer
- Fonts is up to designer
c). Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: tgerring@topcoder.com & lunarkid@copilots.topcoder.com
- Important! Make sure to include the shared URL/Link to your MarvelApp inside your "notes.txt"
Design Problems:
- This is the first iteration of the Next Gen LendCentric Launchpad project. We are starting with a use case of landing page for registration and dashboard screen which is shown after a loan has been created. There are many more modules that will be added later to include the entire loan application intake process and borrower rate shopping scenarios etc.
- This is also a responsive application, we would like to design all screens for mobile as well.
Page Requirements
1). Landing Page
- Provides different ways to login to the application.
- This should be a very attractive page in terms of header, footer and body design.
- Design should be visually engaging and clear for the user that there are 3 distinct actions that use can take
- Open to all layout suggestions and looking for the best UX/UI for organizing the content
Page Elements:
A. Header
- Application Logo
- Phone Number
- Chat Now button
B. Hero Image/ Slider/ Graphic
- Slideshow banner or some other main graphic that will display some text information about loan. Example: Loan Origination Technology. That fuels the future lender
C. Action Buttons
- Want to start a new loan application. Get Started
- Are you an existing customer. Register
- Already registered? Sign in
- Any additional text, description, and/ or icons can be included with these sections/ actions as well. We are open to your layout ideas and suggestions.
D. Footer
- Client partner logos
- Footer text:
NMLS #131108
LendCentric LaunchPad, 810 Crescent Center Dr. Suite 400 Franklink, TN-3
® 2014, WGS LaunchPad, All Rights Reserved.
- Footer links for
-- Security & Privacy
-- Disclosures & Licenses
-- Terms of Use
-- About Us
2). Dashboard
- This is the first screen after users logs in. Here are all page navigation after user logged in:
-- Dashboard
-- Loan Status
-- To-Do List
-- Documents
-- Disclosures
-- Messages
-- Contacts
-- Calculators
-- Property Info
-- Help
- Provides a complete summary of the selected loan with all important sections.
- Each section on dashboard needs to be designed keeping in mind the adaptive design model as borrowers may use the same screen from desktop to mobiles.
- Also multiple "views" should be provided for loan status, to do list sections, etc on dashboard so that our clients can choose which format of card to be displayed. Not every section needs multiple views, but where it makes sense based on the content/ data.
- We are very much open to any other creative ideas if possible given that it covers all aspects. Examples, could include cards/ tiles, sub-sections of content, etc. Show us your best Dashboard designs!
- We want borrowers to be able to choose what sections they intend to see on the dashboard screen and hence configuration options should also be provided. User preferences section to turn off/ on different content sections on the dashboard.
Page elements:
A. Header/ Navigation (across all Dashboard screens)
- Select Loan Dropdown
- Settings
- Status
- Help
- User Information/ User Profile
B. Summary
- Loan Id: 111-123456789
- Loan Type: Home Purchase
- Fixed rate
- 30 Year
- $435,000
- $87,000
- 4,265%
- Locked
C. To-Do List
1) Last 3 Year W2
2) Last 6 Months Paystub
3) Govt Issues Photo Identification
4) Purchase Sale Agreement
5) Copy of Hazard Insurance Polic
D. Disclosure
1) Welcome Package
2) Initial Disclosures
3) Denial Letter
E. Loan Status
- Chart
- Legends: Origination, Processing, UW, Closing
F. Property Info
- Property Address: 1731 Decatur Cir, Franklin TN 37067
- Property Type: Single Family
- Occupancy Type: Primary Residence
G. Loan Contacts
- Loan Officer, John Orig, 236457698778
- Processor, Patty Processor, 232903798263
- Title Company, Ursula Title, 213123213789
- Seller, Jack Lang, 23278923978
- Realtor, Builders, 2323232983798237
H. Map
- Google Map displayed here (could be combined with Property info if it makes sense. Maybe another "view" of that section)
3). To-Do List
- This is probably one of the most commonly used screens by borrowers.
- This screen will contain all the items that we need the borrowers to take action upon.
- Examples being upload documents, e-sign the documents etc.
- Option should be provided to upload multiple documents, provide comments etc.
- As with other screens, we are again open to suggestions on user experience and layout but we will still like to keep the 3 sections as Open Items, Received Items and Closed Items.
- Designers can design these three sections in any way as long as they are very easily presented and understood by the end users/borrowers.
Page elements:
Check provided screen flow of To-Do List.zip. Remember, you just need copy the content. Ignore the page layout. We are just showing this as reference, please design your own ideas and concepts.
4). Loan Status
- We want a very good look and feel for the loan status screen as this shows the actual progress on the loan.
- We are very open to having creative graphical representations or animations as well.
- However, we would need configurable options in terms of defining the buckets like Origination, Processing, Underwriting and Closing.
- Also the sub items under these could increase/decrease and hence should be configurable. This is intended to be a read only screen with no action performed by the user.
- We would need atleast 2-3 different views of this screen as our clients may want different formats: Eg:
- A graphical representation
- A text representation with status display and progress tracking
- An animation version?
- We are open to your ideas
Page elements
- Display progress status for each block and checked/unchecked mark icon for completed loan status
A. Origination
- Application Capture
- Credit Pulled
- Product Selected
- Generated Disclosures
B. Processing
- Your document received
- Appraisal Received
- Title Received
- Verification of Documents
C. Underwriting
- Income/Credit Analysis
- Collateral Analysis
- UW Decision
D. Closing
- Closing Disclosure
- Closing package sent
- Closing Date Scheduled
- Document Signing
- Disbursements of funds
5). Messages
- This is the message center.
- All message to and from borrower will be displayed here
- Only the first line of the message be show, the rest should be displayed on clicking down the arrow. (like email)
- A panel should open displaying the rest of the message
- We’re open to suggestion on the entire screen, user interactions, and overall UX
Page Elements:
- Create Show All, Sent By Me, Sent to me tabs
- Example message row
- Alert button, reply/forward icon, Message title, Date/Time
- Need able to expand row to view message details
- Display Post Message form
6). Documents
- This page displayed all Documents
- Disclosure that are not yet signed should have hyperlink to to To-Do List section
- Sort option should be provided on every column
- Filter options should be provided for Doc Type and Status Column
Page elements:
A. Filter:
- Doc Type
- Status Column
B. Table Columns (Values)
- Doc Type (Disclosures, Provided By You)
- Description (Closing Disclosures, W2 for 3 Years, Last 3 Month Pays, Initial Disclosure, Re-Disclosure)
- Upload Date & Time (Date & Time)
- Status (Viewed, Not Viewed, Closed, Received, Signed/Closed. Viewed)
- File Name (Filename)
7). Login
- Create how Login page should look for this Next Gen LendCentric Launchpad
Page elements:
- Company Logo
- Password
- Forgot Password Link
- Security Question: What school did you attend for sixth grade?
- Checkbox: This is Private Computer. Dont ask me again
- Sign In button
- Register button
Target User
- Consumers who seek loans for home and other collaterals like boat, auto, personal loans etc. Basically the end consumers or borrowers.
Judging Criteria
- How well you create Next Gen LendCentric Launchpad Design Concepts
- Cleanliness of your graphics and design.
- 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 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.