FeeStop

Fee Payment Gateway

Overview

About The Project

Overview: FeeStop was an individual project where I designed a web application that aimed at solving a real-life problem of people in India. The application gave users a seamless path to pay their or their child’s education fee online and avoid long queues.

Discipline: UI/UX Design, Front-End Development, Prototyping

Skills: HTML, CSS, JavaScript, JSON, Ajax, Bootstrap

Duration: Spring 2018, 8 weeks

The Problem

The issue in hand was the struggle of a parent in India who wanted to pay their child’s fee online. Most of the educational institutions in India accept their payments through cash deposit or cheque. This forces people to stand in long queues. FeeStop aids in solving this issue.

FeeStop provides a seamless path for users to pay their child’s education fee online and avoid long queues.

User Analysis

Identifying My Target Audience

This product is primarily for people who stand in long queues and waste a lot of time to pay some sort of education fee. The target users were classified into two categories: Parents and Young Adults.

Concept

So, What Is FeeStop?

FeeStop is a self-serving marketplace for educational fees services offering state-of-the-art technological interventions at all touch points where financial transactions take place.

The main idea was to create an interface that the users are used to and is not against their mental model. FeeStop has two gateways, one for the user where the users could pay the education fee and one for the institutions where FeeStop collects the fees on their behalf and provide them with a hassle-free solution.

Considering the fact that this platform aims to serve a country with a population of around 1.3 billion, it was important to keep in mind that everyone cannot afford to pay their education fee all at once. FeeStop gives them the opportunity to pay that fees in installments.

In all, this self-serving marketplace is an easy-to-use tool that saves time and energy of the users.

Task Analysis

Step-By-Step Analysis Of The Users’ Task, From Their Perspective

To determine the FeeStop interface, two tasks were designed -

  1. The first task required the user to pay their education fee in full.
  2. The second task focused on paying the education fee by opting for installments.

By selecting these tasks, I wanted to see the understandability of the FeeStop interface.

Development Process

The Design/Code Process

I wanted to make a simple looking application which is easy to use. The main design decisions were made keeping in mind the variety of target audience of this product. This sections cover the whole prototyping phase and list my primary decisions.

Paper Prototyping

After coming up with the user flows, I decided to jump on the drawing board and start with initial sketches of the prototype. This exercise helped me in focusing on the important things of the prototype like labeling and functionalities.

Coded Prototype

After making the paper prototype, it was time to give life to the actual product. This prototype was coded using HTML5, CSS3, JavaScript, JSON, Ajax and Bootstrap framework.

Decision-Making

Design And Technical Decisions

In this section, I will describe some of the important design and technical decisions that I took for this prototype.

Login Screen

Since FeeStop is a web application, I designed a login/signup screen for the users who already knew what FeeStop was and wanted to use it.

Main Screen

For this project the goal was for the main screen to be very simple and clean because my target audience varies from young adults to old parents. I decided to go with a layout where the call to action buttons will be big and prominent with clear labeling.

Form Progress Bar

A progress bar was added to the payment form as positive feedback is one of the oldest known human motivators and a progress bar acts to constantly encourage the user, letting them know that they are making progress with their task.

Dynamic Dependent drop-down List Using Jquery, Ajax, and JSON

The first step of the payment gateway has a dynamic dependent drop-down where the options of a particular drop-down change with respect to the option selected in the parent drop-down. The data of each drop-down is pulled via a JSON file that I created.

For Instance - If the user selects Cornell University in the school selection drop-down, the database will then fetch data which is related to the Cornell University for the next drop-down.

Session Timeout Popup using Jquery

The payment gateway also has a session timeout error message that displays after a certain period of inactivity on that particular page. A session timeout popup was included because it makes a payment gateway more secure and safe.

Note: For the purpose of testing the session timeout timer has been set to 30 seconds of inactivity.

Validated Form Fields

The user has to go through 5 steps in the payment gateway in order to pay the fees and all the form fields are validated.

Constraints

Due to time constraints, I had to create a prototype where the following features were not working -

  1. Receive Payment
  2. Signup or create a new account
  3. Login (only the users could click on the Login button and proceed forward)
How It Works?

Functioning Of The Coded Prototype

Upon opening the prototype, the user would start by clicking the “Log In” button. This would take the users to the main landing screen of the application. Here the users have two option to proceed further - “I Want To Pay” and “Receive Payments”. As mentioned earlier, for this prototype only the “I Want To Pay” option is functioning. One the user selects that option, he/she is directed to a similar page which has two different type of payment options - “Pay In Installments” or “Make A Full Payment”.

Both the options are working for this prototype and take the user to a 5 step payment form. The only difference between the two options is of one drop-down option that is in the “Pay In Installments” tab. This option allows the user to select the type of installment they want to signup for if they want to pay the fee in installments.

As mentioned earlier, Step 1 consists two drop-down - Select a School and Select a Degree. Both the drop-down are linked to a JSON database that I made for this prototype and the data is pulled using that database. Once the user has completed the Step 1 of this form, clicking “Next” takes them to the second step wherein they have to enter the payer information. This step is very simple and requires basic details like Name and email id. After completing step 2, the user proceeds to step 3 which requires the student’s information. This step is similar to step 2.

The 4th step requires the user to put in card details. This step requires the users to fill in details related to their card that they want to use to make the payment. It also requires the users to accept the company’s terms and conditions which can be viewed by clicking the highlighted text. After entering all the required details, the user can make the final payment and on step 5 they will get a confirmation message.

CONCLUSION

What I learned

As designers, we tend to focus a lot on creating beautiful visuals, how perfect every pixel is going to look and often end up forgetting the development part. This project helped me to understand the importance of front-end development and how important it is to think from the front-end development point of view.

Designers usually forget that everything they design cannot be developed and it happened to me also when I was designing the paper prototype. This project also helped me in enhancing my coding skills which I’m sure will be beneficial for my UX career.