HeaderSIS.jpg

IS480 Team wiki: 2013T1 Kungfu Panda X-Factor

From IS480
Jump to navigation Jump to search
KP-NewHeader.PNG
Home About Us Project Overview Project Management User Testing Project Documents


SMU tBank Our Project Scope Our X-Factor Technologies Going Forward

X-Factor Component

KP XFactor.PNG



Bank Teller User Interface

The User Interface of our SMUtBank Teller Application has been made to be as cutting-edge as possible. Much of which

Utilizing a couple of important features:

  1. Single-Page Design (Back and Forward arrows are still usable)
  2. Front-end validation for every field
  3. Useful Visual Effects
  4. High performance
  5. Page caching
  6. Minimal Clicks
  7. Strong performance when used by first-time users
  8. Tight and fixed layout for familiarity and quick learning

Another important feature of User-Interface is a strong automated testing

Single Page Design

We make use of a Single Page Design for a very strong reason: Speed. Many of the page "changes" rely on Backbone.js to swap elements in and out and manage data through the use of AJAX (Asynchronous Javascript and XML). The advantages of this are clear:

  • All resources only needed to be loaded once
  • Page requests are minimized to AJAX requests
  • Better user experience and no page "whiteouts" (White page when loading), making it closer to the performance of a native application.

<pictures of single page in action here>

However, there are also some disadvantages to this method:

  • Increased complexity in managing the web application, much more Javascript to manage the AJAX requests
  • Much more logic checks in place.

Front-end validation

Every field and button click is validated and checked. After the field has been edited by the User, it will be checked immediately via Javascript to ensure basic requirements have been met, such as if it is an Integer, a Float, or a Varchar. There are some additional checks based on the functionality of the page, such as LTV ratio or if the account has a sufficient balance. Certain aspects of validation have to be handled by the backend service, such as checking for duplicate Identification numbers.

<pictures of error happening>

Validation is placed directly on the input field itself, through the use of HTML5 data attributes e.g. data-type="varchar". These data attributes allow the Javascript to view through the element and determine what validation process to apply to it.

<pictures of html code>

Useful Visual effects

Almost every action, successful or not will produce a notification message 10 (15 for errors) seconds long and manually cleared. This is to give the user active feedback on his/her actions, it obstructs the screen slightly and forces the user to actively click it to ensure his/her acknowledgement.

<picture of notifications>

As part of every important validation process, Signposts are extremely clear as to what the user should do. The input field is coloured red, or there will be a red notification message on the top right to signify a negative event. Should that not be enough, the borders of the screen will glow a slight red hue to clearly warn that the user has made a mistake. This idea itself was copied from modern First-Person shooter games who use reddish screens to warn of impending danger. It is applied to our application in great effect, without producing a conspicuous and inhibiting alert message as do most web applications.

<pictures of sign posts>

Use of highlights and automated-screen scrolling is important too. Upon clicking certain unique elements, the user will be automatically scrolled to the point we want them to focus on. A good example is the Transaction History page, where a user is able to click a point on the graph and it will direct the user to a readable text version of the transaction. Errors that are out of sight will be scrolled to to ensure that the user sees the first error of the page, so as not give bring confusion as to why there is an error but not being able to see one (When it is actually out of view).

<pictures of automated scrolling>


  1. High performance
  2. Page caching
  3. Minimal Clicks
  4. Strong performance when used by first-time users
  5. Tight and fixed layout for familiarity and quick learning

Credit Engine Technology Evaluation

We evaluated three mainstream commercial decision engines to use as the base of our credit engine.

As Jess did not have a frontend rule repository and FICO was too costly, we finally settled on Drools as it satisfied our main criterias listed in the table below.

Technology Evaluation.png


Credit Approval


The Credit scoring engine is a complex decision service that performs automatic credit evaluation and approval for mass consumer products such as Home Loans, Auto Loans, and Education Loans.
KP-CA.PNG

Credit scoring Process Flow

KP-CSProcessScore.PNG

Credit approval process diagram

KP-CAProcessDiagram.PNG


Credit Decision Engine Proof of Concept
POC for Credit Decision Engine

Market Research of Credit Engines

FICO Website: FICO Scoring Overview

FICO is a leading company in predictive analytics, specialising in scoring individual's credit-worthiness over a scale of 800 points. Our group used FICO's scoring model as our main reference when developing the rules for our Credit Engine.


Kp-fico overview.png

Examples

FICO's calculation based on Length of Credit History



FICO Types of Credit Used



____________________________________________________________________________________________________________________________

Mockup of Credit Approval Form

Credit Approval Form Mockup v2.png

User Interface of Credit Approval Form

Kp-non simulation.png

Teaching Tool


The teaching tool allows users to simulate varying customer profiles (credit capacity) and also different weightages and thresholds for each of the credit rules. This gives students a hands on learning experience on generic credit scoring rules utilize by banks.


KP-TT.PNG

Teaching tool process flow

KP-TTProcessFlow.PNG

Demographic Information for Generating Teaching Tool Loan Profiles

We retrieved our demographic information from various sources. When presented with alternative sources, we chose the source which was more reliable (e.g. from an authority such as the Government).
The demographics are modeled after the Singapore population whenever possible.
Income:

Residence:

'Residence Stability:

Job Stability:

No of Credit Cards

Credit and Banking History

Loan Quantum (HDB Flat)

Age


Teaching tool Features (Input)

Data Generation

  • Loan Profiles (Demographic information of loan applicants)

Scoring Engine Customization

  • Rules customized to user’s preference
    • Customizable Threshold/Ranges
    • Customizable Weightage



Teaching tool Features (Output)

Breakdown

  • # of approved/rejected/pending loans
  • Min, Max, Average Credit Score
  • Score-breakdown for individual loan profile



Teaching Tool Mock Up

Teaching Tool Data Generation

KP-TeachingToolMockup1-1.PNG

Teaching Tool Rule Customization

KP-TeachingToolMockup2-1.PNG

Teaching Tool Summary of Results (Output)

KP-TeachingToolMockup3-1.PNG KP-TeachingTool DisplayRessult2.png

Teaching Tool User Interface

Teaching Tool Data Generation

Kp-data input2.png

Teaching Tool Rule Customization

Kp-rules1.png Kp-rules2.png

Teaching Tool Summary of Results (Output)

Kp-results.png