Consumer Loans - Responsive Payments App UI Design Challenge

Welcome to Consumer Loans - Responsive Payments App UI Design Challenge…Task of this challenge is to come up with responsive payment application that allows users to monitor their loans and also allow them to repay their for loan dues through this app!

About the Client:
Client is a leading financial services company. This company provides retail financing for various expensive consumer products (vehicles, electronics, etc). They also offer dealer financing and related dealer services. Ancillary services include servicing loans and securitizing and selling loans into the secondary market, etc.

Round 1

Submit your initial screen for Checkpoint feedback

1) Login (Desktop and Mobile)
2) Registration (Desktop)
3) Dashboard (Desktop and Mobile)
4) Financial Account View (Desktop and Mobile)
5) Single Payment Flow (Desktop)

Feel free to add any other additional screens that are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all required screens with all checkpoint feedback implemented. 

1) Login (Desktop and Mobile)
2) Registration (Desktop and Mobile)
3) Dashboard (Desktop and Mobile)
4) Financial Account View (Desktop and Mobile)
5) Single Payment Flow (Desktop and Mobile)
6) Setting up Recurring Payment (Desktop and Mobile)
7) FAQ (Desktop and Mobile)

Feel free to add any other additional screens, which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

In this challenge, we are looking for your design ideas for a responsive application (desktop and phone) that helps user to repay their loan dues on a monthly basis as well as allow users to make one time payments, scheduled payments, and set up recurring payments, etc... please go through the requirements below to know more..!

Design Guidelines:
- We need the design to be “consumer simple”
- Designs need to be fresh and modern
- We need to make sure we show the user that all of this is SECURE through words/visuals - please be creative in thinking through how to apply this throughout.
- Think of some of the most elegant online payment processes / loan payment options
- Colors/branding are open to the designers!
- Think about user experience, make it intuitive (how easy it is to use this app!)
- We have supplied few screenshots which you can use as a reference for content, please DO NOT COPY the layouts.

Screen Size Requirements:
We need this application to be designed in the below screen sizes
- Desktop (1024px width and height as required)
- iPhone Portrait (640 x 1136px)

Final designs should be both within and without the proper device frame

Required Screens:
We need below screens to be designed…  

1) Login:
A user will have the ability to login into the application
- What are the UI elements required in this page?
- Username, password, Login button, what else can be included in this page?
- A user will be allowed to register with the site.
- We need to make sure we show the user that all of this is SECURE through words/visuals - please be creative in thinking through how to apply this throughout.

2) Registration:
When a user selects to register from Login Screen, they will be directed to this page, we need below fields for registration process..
- Last 4 digits of SSN
- Account number
- Email address
- Last name
- Username / Password

Note that users cannot use social networks for logging in!

3) Dashboard:
- We would like you to create a dashboard for users, this will need to show some quick highlights of the what is going on (any payment dues, quick links to other sections of the app, alerts)
- Show a list of accounts/items financed for which they got loan, click on this will take the user to “Financial Account View”

• Need to see multiple accounts and multiple products per account

• Total loan, monthly payment, last payment, next payment due date

• Need an option that allows the user to contact for assistance - how might they contact?

• Dashboard areas will then translate into the menu..

4) Financial Account View:
- This will show the overview of the “Financial Account View” for the items the user has financed
- How can the user view the payment history? Here are some ideas of information that the user might see. Please organize this in an easy, elegant way for the user to maintain their account.

• What do they see right away, how do they access the details?

• Users will have options to initiate a payment

  • If the user had already set up recurring payments, then it will be good to see a payments schedule list i.e. show list of payments that are scheduled each month and the corresponding amount that need to be paid…also allow users to cancel a scheduled payment.

  • If the user has not scheduled any recurring payments, then we show them two options for making a payment

���- All the below section details are available in the attached image (Financial Account View):

• Payment details for the selected item

• Show multiple fees  (for example: late fees, early payment fee)

• Interest paid as of XX day

• Payoff calendar: This shows the maturity date, payoff amount, good through (date), and interest paid details (Interest to date and prior year interest)

• Notification Preferences: This includes how the payment reminders, confirmations need to be sent either through post or mail, email format (HTML), number of days prior to payment due…etc…

5) Single Payment Flow:
When a user initiates a payment for their financed item we show this screen. We have attached few images that shows the steps for initiating a single payment.
- User will select the “Payment Source” and view details based on the selected source.
- They will need to sign an agreement by clicking on a checkbox before confirming.
- Once a payment is completed, we show a confirmation message and take the user back to financial account view screen.
- Payoff calendar: This shows the maturity date, payoff amount, good through (date), and interest paid details (Interest to date and prior year interest)

6) Setting up Recurring Payment:
- When a user initiates a payment for their financed item we show this screen.
- We had attached few images that shows the steps for initiating a recurring payment.
- User will select the “Payment Source” (ACH, Debit Card, Creadit Card, etc) and view details based on the selected source.
- We need to show them a list of possible schedules for payment dates with the amount that need to be paid on each date – so a user can review this list before confirming.
- They will need to sign an agreement by clicking on a checkbox before confirming.
- Once a payment is done, we show a confirmation message and take the user back to financial account view screen.
- Include link to financial calculator (amortization - if I pay $X more per month - what does that do to the loan payoff date, interest)
 - Show the number of payments left..

7) FAQ:
- We need a FAQ screen that shows list of questions and answers.
- Think on how and where to include this section.
- Think about the experience and how it varies from device to device

Target Audience:
- All users who have taken a loan and looking to make payments, or adjust their payments (e.g.: pay more, change dates, etc), or repay it
- Users may or may not be technically savvy - it must be easy to use
- Users may have many accounts / many items on loan and should be able to manage and toggle through these quickly and easily

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application

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 for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.