Submit a solution
The challenge is finished.

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!

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: &
- 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 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.

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.


2017 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 "" file.
  3. Place all of your source files into a "" 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.


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

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30057935