Developing an Online Call Tracing System with User-Centred Design

This project outlines the development of an online call tracing system designed with a strong emphasis on user-centred design. The system allows users to register, log in, and manage their profiles. Key features include the ability to view call history ('You Are Called By'), initiate calls and see caller information ('You Are Calling'), and update user details. The system utilizes PHP for backend logic, MySQL for database management, and integrates with Twilio for real-time call data. The project includes detailed storyboards illustrating the user interface and functionality, emphasizing the importance of a user-friendly experience. The methodology involves database building, record fetching, and ensuring the system is easily accessible. The system's architecture is described, with a focus on the interaction between PHP, MySQL, and Twilio services to provide dynamic call details to the user. The project highlights the advantages of using storyboards in user-centred design to ensure a clear understanding of the application's functionality and a streamlined development process. The user interface is designed using HTML, CSS, and JavaScript. The project includes screenshots of the different screens such as register screen, login screen, and user dashboard.

SECTION A
INTRODUCTION
This is an Online call Tracing System. This system will trace the calls received and also the call dialled
from the phone. A user need to know, who called him, although, it may be an unknown number to
him. In this system, if a user gets the call, he will know who called him. This information may be
beneficiary. In this way, user will know his history, and those numbers who does not exists in his list,
can also be viewed by their names. Even if a user want to call an unknown number, while calling, he
will get to know information about the other user he is calling. This system requires, the user to have
account in the system. After having an account, user can use it, and if anyone unknown calls him, he
can get information like, name and email, if information exists inside the database. Goals of this
system are as follows :-
Database Building – A user needs to register first, it is goal as well as requirement. When a user
register, database is updated with his/her record, and now this record can be used to show others if
this user calls them.
Fetching Records – Fetching records to maintain the call logs, who is calling whom. Whenever user
calls other user, a record should be maintained. So that it can be used to show different outcomes to
a user, like whom he called, or whoever called him, these are the different searches done by
different users.
Accessible – This is very strong and main goal of the system. To be user friendly the system should
be able to show data whenever a user searches according to him. It may be when a user a calls to
other user, or when he want to see list whoever called him.
USER REQUIREMENT AND USE-CASE DIAGRAM
According to the system, user needs to call to another person in order to know whom is he calling, or
he will check the tab called ‘called by’, regarding the calls he got in past. These are the two features,
mandatory in the system, also for this whole system a user will need to register him first. So this
system mainly consists of four functionalities. These are -
1. Login
2. Register
3. You Are Called By
4. You Are calling
5. Update
6. Logout
Update and Logout are two additional functionalities given to the user. A user can update his/her
name whenever wishes to. When a user modifies name, this change will be reflected to the other
users also. This means it is real time update, and prvious data also will show now this new name of
the user. This is done for the clarity that same number in records do not exhibit the different names.
Logout functionality simply log out the user. Coming to the user requirements of fetching the

information of number. This can be done by using the stored records in database for the user. This is
made possible using the registration of user. When any user register in system, database is updated,
and now database is increased. This number is also available to users for information. In this
manner, it keeps on increasing which can used on different queries related to user. Now if this
number calls other user, they will be able to see information related to this number in their ‘You Are
Called By’ tab. This is how the user is able to get all information. This system consists of mainly two
datasets. One for user database, and other for call logs. Login, Register and Update fields uses the
user database to create records and maintain/update records. While ‘You are Called By’, and ‘you
are Calling’ uses the call logs database for real time updation in information.
Users functionality can be made clear by the use case diagram.

METHODOLOGY
The proposed system is highly efficient in catching up the calls and showing the call details
dynamically to the user. The system of this expectation for real time application can be achieved
using the backend services like ‘TWILIO’, these services can be used by many backend languages. In
this system we have used one of the most popular language PHP. This language combines well with
Twilio services.
How This system works?
When a user register himself, user database is updated with the information entered. Now this user
data is available to the other users also. In this manner it is an iterative process for updation of
database, as users keep on registering the database keeps on increasing and more number can be
found using this database. PHP fetched the data and provide to TWILIO service to maintain the
record. Then If this caller calls to other number, then this call information is further extended by
TWILIO, to search who was called, and to find his/her information. Then this call is saved in the
database, with the information of called number and caller number. For the future use. Also, while
calling to the user, if real-time services finds the caller identity, then it is shown to user.
Importance in User-Centred Design
The approach taken for the development of the system, is totally user oriented. This means, user can
fluently resolve his query in the system itself. When a user calls, our made services fetched the data
and shows the number. This may be the first user approach to see if the service is working for
him/her or not. Other approach taken by user can be the history, call logs can be checked by the
user, which our PHP code fetches and shows to user, with the identity information of number, which
can be of great benefit to the user. In this way a user can perform his/her different tasks.
STORYBOARD
Here is the prototype of the proposed system designed in MOCKFLOW. It is an online tool to develop
a wireframe/storyboard/prototype for the proposed system.
This prototype consists of following screens-
1. SignUp/Register
2. Login
3. Dashboard of User
4. You Are Called By
5. You Are Calling
6. Update
These Storyborad/prototype screens are given here-
Signup/Register

This is the simple layout for the register of new user. This will add user to database.
Login Screen
This is the required login screen. In this it will checked if the user is there or not. And then login will
take place.
By using these two screen, a user will move towards dashboard. This is the flow of the proposed
system. After this, when user has entered the account. Now we have following storyboards.
Storyboard for dashboard-
Dashboard will have a flow. From this a user will be able to go to three different pages. One is for
history to know who called. Second page is for the user to call, he will enter number and see whom
he is calling. And the third page is the update page where he will be able to update the name.

Storyboard for ‘You Are Called By’-
In this section you get the details of the people who called you. Currently this is empty. But, when
someone will call on this person, he will see the list in form of table. This can be seen practically in
application. We will be needing to accounts. Then first we need to make a call from one user to
other user number. As we proceed with the calling, we will get a message that you have called. Then
we can come to this screen of the user who was called and check if this is showing some information
or not.
Storyboard for ‘You Are Calling’ –
This layout contains the number to be entered whom user is going to call, after that, he will get the
information of whom he is calling. We will see that in developing the same application, that when he
dials a number, information comes of the user, if that user is there in database.

Storyboard for ‘Update’ –
This layout is addition layout given as a feature to update the name whenever the user wish to
change it. There is a text box containing the pre-set name. Now if the user will enter a different
name here and hit enter then we see the changed name. This can be seen practically in the
application we are going to build.
ADVANTAGE OF STORYBOARD IN USER-CENTERED DESIGN
Storyboarding is the technique that is used to provide an overview of what must be built. Storyboard
concept helps in making the user aware of what is going to be built according to the needs. It helps
user to understand the functionality of the upcoming application. If any functionality is not according
to the user, then it can be understood before the development of application. Storyboard reveals all
the functionality and layouts of the application. This approach enables us to minimize or remove the
hard work being done after the development in changing the functionality or layout.
The advantages of building the storyboard are:

1. The user will get the overview of the screen and functionality.
2. Based on these storyboards, the development team can easily develop, without any
confusion.
3. Maximum information can be compressed and summarized and be viewed before
application development.
USER EXPERIENCE FOR USER-CENTERED DESIGN
User centred designs the oriented on the needs of the user. It reflects how a user can act, and ask
different queries. In our system we have used user-centred design. This can seen when a user enter
in his account after signup/login, he can do one of the two thigs regarding the call, either make a
call, or see the calls received. Regarding the calls, these are the queries which a user can make,
which are very well presented, in the user account. By going to ‘You Are Calling’, he can check whom
he is calling, this is dynamic process, and by going to ‘you are Called By’, he can easily see the history
list. These are the two things which a user asks regarding calls. A user-centred design is based on
comfortability of user, and how fluently he can understand the system, and to maintain this
expectations of user to easily understand system, our system is made.

SECTION B
PROGRAMMING LANGUAGES, SCREENS
Programming languages used in implementing this system are-
1. HTML
2. CSS
3. JAVASCRIPT
4. PHP
5. MYSQL
HTML, CSS, and JAVASCRIPT are used for the user interface, These are the front-end languages, used
for the design and layouts of the screen. PHP is the backend language used to interact between
front-inputs and backend database. PHP interact with MYSQL and other services to store database
and retrieve information. MYSQL is used for database programming and XAMPP is used for local
server for implementing this system.
We have following screens-
Register Screen
Screen-
This screen represents the register form for the user. It also contains the login link. If a user is not
new and want to directly login into his account, he can press this link, and go to login page.
Its Backend Program screenshot is here

This is the screenshot of the backend program for the signup.
Login Screen
Screen-
This screen represents the login screen of the system. If a user is new then he can go to signup page
by the link given below in form.
Its Backend Program screenshot is here

This is the screenshot of the backend program for the login.
User Dashboard-
User dashboard contains, his/her name and email address. This will change according to the user.
Other options are
1. Dashboard- Home page for user.
2. You Are Called By- shows history, who called.
3. You Are Calling – Shows whom he is going to call.
4. Update- User to update his name.
5. Logout- To logout of the system.
Below is screen for the dashboard consisting of these fields.

Below screen shows the second option from given list, this shows the history, i.e. You are called by
page. In this you can see the list of people called you and tier information.
Below Screenshot shows the page, to whom we are going to make a call. On calling any number its
information should come.
Second screen attached above shows, we have called to number 9219568454, and related
information.
There is one more option, update. This updates the name, below screens shows the screen after
updation of name. The name ‘ramankumar’ has changed to ‘raman’.

These are the screens among which the user will go through. Last logout button will directly logout
to the login screen.
TESTING
White Box testing means to understand the code and then apply the testing for leakage or
replication. We will apply unit tests on the system. This system, should not have any number twice.
This means if some one has already logged in with mobile number, then some other person can not
register with that, number. This will be tested by repeatedly, entering same credentials to register.
This same case should happen with email id also. These are the main tests regarding this systems, as
they will expose if their exists any memory leakage regarding user information.
These unit test can be named as-
1. Number Duplication Test
2. Email Duplication Test
Number Duplication Test
Registration of number should only be once, we will do this by registering the same user twice and
check if error is produced. If number repeats in registration then it means the database will become
faulty and show wrong information, and sometimes it may get hang. This is a very strict condition for
the system to be correct. No number should repeat while register different users.