Develop BUSGO!

Website

To support the BUSGO! Transaction app, the creation of BUSGO! Website is required. More convenient
than the transaction app, BUSGO! Website can be used on many types of devices: smartphones, laptops,
tablets, etc., customers do not need to download and set up. Although BUSGO! Website does not
support the payment function, it still has many functions, from main functions such as: registering,
recharging, checking transactions to functions that support the user experience such as changing
passwords, user guide, etc.

HTML5 and CCS3 are chosen to structure and present the content of BUSGO! Website on the Web page.

 HTML – HyperText Markup Language is the standard markup language for creating Web pages, it
describes the structure of a Web page. HTML consists of a series of elements, which tell the
browser how to display the content.
 CSS – Cascading Style Sheets is the language used to style a Web page, it describes how HTML
elements are to be displayed on the screen, paper, or in other media. CSS saves a lot of work; it
can control the layout of multiple web pages all at once.

BUSGO! Website has a total of 7 pages divided into 4 main pages and 3 sub-pages; main pages run the
main functions while sub-pages support the user experience. If one main page is broken, the whole
website will not work; however, if one sub-page is broken, the website works normally.

List of main pages:

 BUSGO! Login
 BUSGO! Register
 BUSGO! User Interface
 BUSGO! Top up

BUSGO! Login

The mission of BUSGO! Login page is the same as the login page in the transaction app, which is
mentioned in 5.2.

The model of BUSGO! Login:

First, the customer enters the username and password and

type submit.

After submitting, the information is posted into the server.

The server checks whether the username and the password

are matched. If they are matched, the server will move the
page to the user interface page. If they are not matched,
the server will respond fail to log in.
The flowchart of BUSGO! Login
BUSGO! Register

The mission of the BUSGO! Register is the same as the register page in the transaction app, which is
mentioned in 5.2

The model of BUSGO! Register:

First, the customer enters all of information

in the page and type submit.

After submitting, the information is posted

into the server.

The server checks whether the information is

valid or invalid.

If the information is valid, the server will

respond that the account is created. If the
information is invalid, the server will respond
that the account is failed to create.

The flowchart of BUSGO! Register:

BUSGO! User Interface

The mission of BUSGO! User Interface is the same as the user interface page in the transaction app,
which is mentioned in 5.2.

The model of BUSGO! User Interface:

After logging into the account, the BUSGO!

User Interface appears.

The BUSGO! User Interface displays all

information of the account: username, full
name: birthday, priority case, phone
number, balance, and transaction history.

Besides, this page has 3 navigation buttons

that move to other pages: BUSGO! Change
password, BUSGO! Top up and BUSGO! Log
in.

The flowchart of BUSGO! User Interface:

BUSGO! Top up

The mission of BUSGO! Top up is the same as the top-up page in the transaction app, which is
mentioned in 5.2.

The model of BUSGO! Top up:

First, BUSGO! Top up displayed the

full name and the present balance
of the account.

The customer selects the payment

channel and the denomination of
the payment and type submit.

After submitting, the information is

posted into the server.

The server checks whether the

balance in the customer’s e-wallet
has enough money or not.

The server will respond the

payment is successful if the e-
wallet balance has enough money
and not successful if does not have
enough money.

The flowchart of BUSGO! Top up:

List of sub-pages:

 BUSGO! Change password

 BUSGO! Forgot password
 BUSGO! Need help

BUSGO! Change password

BUSGO! Change password is designed to change the password of an account in case the customer
remembers the password.

The model of BUSGO! Change password:

First, the customer enters the old password

Next, the customer enters the new password and re-

enters it again in the bottom box.

After submitting, the server checks whether the old

password is correct or incorrect. If the old password is
correct, the server will check the match of the new
password and the re-enter new password. If they are
matched, the server will change the password as the
new password.
The flow chart of BUSGO! Change password is shown below:

Based on the model, the interface of BUSGO! Change password is designed, it is shown below:
BUSGO! Forgot password

BUSGO! Forgot password is designed to change the password of the account in case the customer does
not remember the password.

The model of BUSGO! Forgot password:

The customer enters all of the information and type

Submit.

After submitting, all information is posted to the

server, the server checks whether the username,
phone number, and birthday are correct or incorrect. If
all information is correct, the server will check the
match of the new password and re-enter new
password. If they are matched, the server will change
the password as the new password

The flowchart of BUSGO! Forgot password is shown

below:
BUSGO! Need help

When customers have questions related to how to use BUSGO! Website, they can visit to BUSGO! Need
help. BUSGO! Need help has detailed instructions on how to use each page of BUSGO! Website.

The model of BUSGO! Need help is divided into 2 parts:

The page list and the page content.

When the customer clicks on each page on the page list,

the instructions of that page will be displayed in the
page content.