• Compete
  • Learn
  • Community

    Cool Bank - Top Up Loan App Design Concepts Challenge









    The challenge is finished.
    Show Deadlinesicon-arrow-up

    Challenge Summary

    Welcome to "Cool Bank - Top Up Loan App Design Concepts Challenge". In this challenge, we need your help to create a new application where a user can apply for additional home equity to fulfill a number of individual needs like, remodeling, continuing education, to purchase a new car. The application needs to be simple, easy to use, offer a great Call To Action (CTA) to the user, and at the same time it needs to look modern and professional and able to present our brand.

    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!

    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.

    Challenge Format

    This competition will be run as a two-round challenge.

    Round 1

    Submit your initial design for a Checkpoint Feedback (Desktop and Mobile)
    1) Home Screen
    2) Qualify Test Screen
    3) Information Collection 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 Updates (Desktop and Mobile)
    1) Home Screen
    2) Qualify Test Screen
    3) Information Collection Screen
    4) Preview and Submit Screen
    5) Other Screen/Features?
    - 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.)

    Regarding the Rounds:

    • To be eligible for Round 1 prizes and design feedback, you must submit before the Checkpoint deadline.
    • A day or two after the Checkpoint deadline, the challenge holder will announce Round 1 winners and provide design feedback to those winners in the “Checkpoints” tab above.
    • You must submit to Round 1 to be eligible to compete in Round 2. If your submission fails screening for a small mistake in Round 1, you may still be eligible to submit to Round 2.
    • Every competitor with a passing Round 1 submission can submit to Round 2, even if they didn't win a Checkpoint prize.
    • Learn more here.

    Full Description & Project Guide

    Background Overview
    Our company is a leading specialist wealth management company that helping our customers with:
    - Financial advice 
    - Superannuation, retirement income and other investment products for individuals
    - Superannuation services for businesses
    - Administration, banking and investment services for self-managed super funds
    - Income protection, disability, and life insurance
    - Selected banking products, and
    - Investments in shares, fixed interest, property, infrastructure, multi-manager and multi-asset funds.
    In this challenge, we want to create a Bank loan extension application that has a focus to trigger and provide great 'call to action' to the user. We will explore a small workflow to capture information from an existing customer to determine eligibility for a credit extension on their existing loan.
    Some references to CTA examples (feel free to explore more):
    Challenge Goal
    Provide a new look and feel that able to encourage people to apply for additional home equity to fulfill a number of individual needs like, remodeling, continuing education, to purchase a new car.
    Design Consideration
    - New, Professional, and Modern look and feel.
    - Offers Great 'Call To Action' Interaction
    - Simplicity to add necessary information 
    - Responsive website (needs to work on Desktop & Mobile devices)
    - Easy to understand flow from page to page
    - Intuitive for the user; should never be left asking "what do I do next?"
    - Simple, clean, modern.
    - 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:
    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.

    1) Home Screen
    - After successful login, the user will be redirected to this screen
    - This screen show's existing interaction areas in the web page that the bank has with customers.
    - The key thing the bank wants to achieve is a hire rate of people requesting a loan extension so Feel free to suggest other better ways to engage the customer.
    - This is probably the most important screen to in entice the user to proceed. This is a "call to action" screen. 
    - We want to encourage the customer to evaluate if they qualify for additional loan amount and what that additional money could be used for. Further education, a new car, home renovation, a vacation. The most important thing is to get them started on the journey.
    - This screen will show useful information related to the user (User Personalization) 
    - This screen needs to have a list of Quick Links so they can navigate to other related application, view specific information, etc (for ex, links to "Update How I receive my statements", "Go to My Money Manager", "Find my forms and documents", etc)
    - Provide a section where the user can see new and important Message on the screen (on the main screen)
    - Marketing Carousel, show list of a carousel (thumbnail, short description, link/button) and show products that suitable for the user or might attract user interest. 
    - A 'Call To Action' (CTA) to apply and request the additional/top-up loan process.
    - If the user already filled in the additional/top up Loan, the user should be able to see the process of loan approval Status from this screen.
    - Notification? Search? Profile? Account Summary? etc? What else can we provide on this screen that will increase the user experience when using the app? 
    2) Qualify Test Screen
    - Before able to apply and request for the additional/top-up loan, the user needs to pass the qualifying test first.
    - The idea of this screen is, we don't want to have the user fill out this gigantic form with lots of data only to be rejected. 
    - This screen will let them know whether they are conditionally approved or not.
    - In this screen, the user will need to answer two questions:
    -- How Much do you want to borrow? (The amount has to be between $5k and $100k)
    -- Confirm Current Salary? (we probably have the salary already, but it's possible salary changed after the loan was obtained, so we need to ask again)
    - If user input meets the criteria (The salary is sufficient and the amount they are looking to borrow fits in what they qualify for), show that user is conditionally approved and the user can continue the top up process. The user will next be requested to provide additional information to confirm their eligibility.
    - If user input does not meet the criteria, show the rejection status confirmation.
    3) Information Collection Screen
    - Once user passed the Qualify Test screen, they will be able to provide full information required for the Loan Top Up.
    - Full required information fields can be found at the challenge attachment "Easy Increase form INT-S"
    - The Bank might already have some of the user information, so you just need to create data that needs Customer Input Required (check "Wireframe Whiteboard Session")
    - We are not looking for some boring approach like ordinary form wizard, please explore how to create a great interaction that able to engage the user through the gigantic form filling process
    - The user should be able to save their progress at any time and close the form. When a user wants to continue and open the form, it should show the user latest process.  
    - The user should be able to see their progress status (in percentage)
    4) Preview and Submit Screen
    - Once the user finishes the form, the user should be able to review all the information in preview mode before submitting the form.
    - A user can edit the information on the form if there is any missing/wrong information added. 

    5) Other Screen/Features?
    - Show us additional improvements and enhancement that you can provide for this app
    - We are open to any kind of suggestion and Ideas!
    - 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
    - Use our Branding Guidelines Docs for colors and layout recommendation
    - Fonts (use Archer and Open Sans, see our branding guidelines)
    - The design style is open to designers
    Documentation (Check Challenge Attachment)
    - Branding Guidelines.zip
    - Wireframes (Rough Flow sketch)
    - Top Up Form Collection
    Target Devices
    We are targeting for Responsive Website
    - Desktop: 1366px minimum width with height adjusting accordingly
    - Mobile: 750px width with height adjusting accordingly
    Target Audience
    - Existing bank customers with a mortgage
    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
    - 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, Illustrator (might need to convert it to photoshop later) or Sketch and saved as an 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.

    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.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2018 Topcoder(R) Open


    Screening Scorecard


    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. Create a JPG preview file.

    Trouble formatting your submission or want to learn more? ‌Read the FAQ.


    All fonts within your design must be declared when you submit. DO NOT include any font files in your submission or source files. Read about the font policyhere.


    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 screeninghere.

    Questions? ‌Ask in the Challenge Discussion Forums.


    • 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.