IS480 Team wiki: 2013T1 Kungfu Panda X-Factor

From IS480
Revision as of 12:45, 25 November 2013 by Yh.koon.2010 (talk | contribs)
Jump to navigation Jump to search
Home About Us Project Overview Project Management Testing Project Documents

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

X-Factor Component

KP XFactor.PNG


The User Interface of our SMUtBank Teller Application has been made to be as cutting-edge and as Native-like as possible. Much of which is absent from typical Websites.

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. Simple to use
  8. Tight and fixed layout

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

User Interface

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.

Kfp single page.png

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.

Kfp validation 1.png

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.

Kfp validation 2.png

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.

Kfp visual 1.png

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.

Kfp visual 2.png

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

High Performance

Much of the Web application has been optimized for speed, without affecting accuracy. For example in generating the Individual Profiles for Credit Approval Simulation, all the information is stored in the Drop Down List itself, every option within the Drop Down List has its own data and displays itself when the user selects it. This is contrary to storing it in an Array and iterating through it everytime a user selects an ID from the Drop Down List that matches an ID in an array. Though however minor in performance impact, it helps keep the slickness of the web application feel constant through out.

Kfp high 1.png Kfp high 2.png

The large usage of AJAX calls to facilitate communication with the Bank's core is also a key aspect of the web application. Every request and response is handled through AJAX only, this absolves of the user from fetch so many files from the server as well as vice-versa. Saving bandwidth, especially when 30-40 students are hammering away at the application at once. Which has been tested in a classroom environment to be steady throughout the session.

Page Caching

Due to the way the web application serves users, being a single page application, and never actually requiring a page refresh; All Pages are loaded during the initialization of the application and stored in the user's cache, should the user "change" a page, the page will be fetched templating-style and loaded onto the current Document Object Model, if necessary, an AJAX call will be made to the server to add data to it.

Kfp cache.png

Minimal Clicks

The way controls are built allows the user to stay of the mouse if possible. Every single inch of the web application is usable without a mouse, that includes clicking on tabs or divs. Users are encouraged to minimize the rate of exchange between mouse and keyboard due to the nature of filling up forms in most typical situations. There are also clear indications of

Kfp clicks.png

Simple to use

The web application was designed for students in mind, and as well as how we could make the application as simple and straightforward as possible to use. The idea is simple, fill the form, and confirm it. In-between that part is the most important, ensuring that Users know where and what they have to key in and the banking jargon used, as handling any exceptions or errors that would otherwise throw most users off.

Some of the more subtle things:

  • No need to aim for small checkboxes
  • No pesky alert messages that forces users to click
  • Back/Forward buttons are usable despite being a Single Page application
  • Graphs are used to give the user a better idea of the situation
  • Instructions are in tough places for first-time users
  • Colour scheme is meant to be pleasing to the eye
  • Buttons catch the User's eye to guide them to the important parts of the page
  • Default/Clear buttons make life easier should there be mistakes

Kfp subtle.png

Tight and fixed layout

The layout is unique in regards to how websites are being designed. This web application does not have any responsive CSS and utilizes a fixed 1024 x 768 as an optimal resolution. However, the main reason is this, a fixed layout when used often will stay with the user. Should the screen change and the position of the input fields and buttons change, it could well put the user off, causing the user to search again for the fields he needs to type into.


Software Testing

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.

Credit scoring Process Flow


Credit approval process diagram


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


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.


Teaching tool process flow


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.


'Residence Stability:

Job Stability:

No of Credit Cards

Credit and Banking History

Loan Quantum (HDB Flat)


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)


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

Teaching Tool Mock Up

Teaching Tool Data Generation


Teaching Tool Rule Customization


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)