This document summarizes the design process of a mobile application called 4SELF, which allows users to track lost items. It describes how the designers conducted user testing at various stages of prototyping in Justinmind software. Based on user feedback, the designers made several improvements to the interface design, such as changing login options, adding instructions to buttons, and modifying colors and layouts. The final evaluation involved testing the prototype with students and collecting their feedback to further enhance usability.

1. 4SELF
NADHRAH ASMA BINTI MOHD NAJIB
UNIVERSITY TECHNOLOGY MALAYSIA
A13CS0084
SECTION 04
KATRIGESAN CHANDRAN
UNIVERSITY TECHNOLOGY MALAYSIA
A13CS0040
SECTION 04
ABSTRACT
In this paper, we will describe the process of
designing a mobile application named 4SELF.
This is an overview of how we made design,
implemented those design in various stages of
prototyping, and evaluated the usability of the
application at each step in the process.
Author Keywords
HCI; Human-Computer interaction; 4SELF;
mobile applications
ACM Classification Keywords
C.5.3:iPhone
INTRODUCTION
4SELF application was designed
to make the task of finding lost items or track
the items becomes the easier one. Most people
tend to misplace or forgotten their own
items, so it ends up taking up a large portion of
their time, especially when done inefficiently.
We wanted to tackle the most important
NOOR AIESAH BINTI MOHAMAD
UNIVERSITY TECHNOLOGY MALAYSIA
A13CS0089
SECTION 04
SITI AISHAH BINTI SAMUD
UNIVERSITY TECHNOLOGY MALAYSIA
A13CS0149
SECTION 04
challenges that arise when this kind of situation
happend, such as finding items in a
sound mode or map mode. This process was
concerned with the user interface design of the
mobile application as opposed to the back-end
programming aspect of application.
PROBLEM
At the beginning of the project, we had done
some observation on what kind of problem
people usually faced.During the observation,we
discovered that people tend to misplace or forget
their things like keys, handbag and much
more.So, we made discussion and come out with
an idea of creating a mobile application that
detect the lost item either by sound or maps.We
named the apps 4SELF.
USER
Our user is anyone who faced the problem we
mentioned above.Specifically, the target user
would be teenagers,middle aged and old people.
Our personas ranged from age 20 to age 50, but
our most accessible audience was college
students, since we have plenty of those on our
University Technology Malaysia campus that
available for user testing at any time.

2. TASK
In the apps, user need to:
a) Sign up for first time user or log in
for already registered user.
b) Setting up security pass of the apps
c) Adding category
d) Adding items
e) Edit items
f) Search item by sound or maps
g) Log out
DESIGN
The interface of the apps have a few parts that
has been modified according to the feedback of
user testing which have been done before.After
the user testing is done, we received many
comments neither good or bad.From the test,
most of our user are satisfied with the interface
of our apps but there are still a few things that
need improvement in the design.Our advisor,
Madam Nor Anita Fairos gives us some ideas on
how the design should be in order to increase the
userbility of our apps.Below, we have provide
the design of our apps before and after user
testing.We use Justinmind as tools in developing
the apps.
To start out the design, we have to sketch it out
first to ensure the flow of the design is correct
and can reduce errors. This is what we called as
paper prototyping. Paper prototyping is very
important because this way we can know what
our application’s flows are.
Our logo application colours are blue, white and
pink. Thus, the application theme colours are
based on our logo.
Before and after user testing:
a) Sign up for first time user or log
in for already registered user.
before Figure 1 after
Log in
Before: For user that already have account in
this apps, they just need to log in via social
media either facebook, google+ or tweeter.By
login into their social media account,they are
automatically connect to the apps.
After : In our first design, we include the log in
with social networks such as Facebook and
Twitter. After some discussion, we decided to
remove them because it will make more
difficulties in terms of security because
nowadays crackers can easily break into the
user’s social network accounts..So we change
the way to login into manual where user need to
fill up some form and then the application will
remembered the username.When the user want
to use this application again, they just need to
enter the passcode and the application is ready to
operate.
b) Setting up security pass ofthe
apps

3. before Figure 2 after
Before : After the user has successfully log in to
the apps,next, they need to set the passcode to
ensure that they are the owner of the
account.The earlier design was a bit dull because
of the colour choosen.
After : We change a little bit the interface to
make it more attractive and easy to use.We
change the colour of numbering button to white
so that it can be clearly see by user.
Sign up
Before : For first time user, they need to register
first before using this application.Refer to Figure
1 in which the sign up button is there for user to
start registering.When the sign up button is
choose, Figure 1.3 below will appear.
before Figure 3 after
User is needed to fill the spaces as shown above
,the username, password and email.After fill in
the requirements, the user need to set up the
passcode as shown in Figure 3.
The design was just black and white so it lessen
the attractiveness in the page.
After : After the user testing, we just change the
background of the page to make it attractive but
still maintain the requirement that needed for
sign up.
c) Adding category
Before Figure 4 after
Before : The home page is shown after the
passcode is done.There are severalcategory that
have been provided to user.If the user want to
add their own category they just need to press
the green icon as shown in the Figure 4
.Feedback that we get from user is that they
doesn’t understand the icon we provided.They
do not know what is the function of the green
icon.
After : So we made the interface more simpler
by showimg the icon as in the Figure 4 so that
the user more understand to use.Words” Add
Category” is put below the icon as guidance to
user about the meaning of the icon.If user enter
the icon, they will see the interface as in Figure
5 .

4. Before Figure 5 After
Before : When the green icon is choose, the
user need to fill the requirement as shown in the
Figure 5,the category’s name and the icon of the
category.The icon is listed and the user just need
to choose suitable icon according to the items.
After : We changed the interface to more
simpler design that is the icon of the category
and the name of the category.The interaction
between user and the application becomes more
attractive because the interface is easy to use and
interesting.
Basically,when the icon “Add Icon” in the circle
button is enter,Figure 6 will appear listing all
category that might be in this application.
Figure 6
Then the interface when the category is added
becomes as in Figure 7
Figure 7
d) Adding items
Before Figure 8 After
Before : After the category has been added, next,
the user need to insert the lost item in the
category. Figure 8 shows some of the item that
have been added.User need to enter the green
button if they want to add items.The user also
have the difficulties to recognized the add button
which is the green button.Other problem is the
user confused about the edit and search
button.The search button initially functioned to
search for the lost item but some of the user
misunderstand it as search the items listed in the
application.Meanwhile most of the user does not
understand the edit button.They thought that the
edit button was the button to add new item but
the fact that it is not for adding new item,it just
for edit the selected item such as changed the
icon for the item.
After : We improved the design by just put the
“Add Icon” first.When the icon is
selected,Figure 9 is shown.

5. Before Figure 9 After
Figure 1.9 : is the interface for userto scan the
accessories that comes with the apps.The userneed to
scan the accessories first so that the apps will
recognized it and can find the lost item through it.
We changed the QR code icon so that it is more
readable and user can understand the meaning of
the icon.
When the accessories have been scan,interface is
as shown in Figure 10
Before Figure 10 After
Before : We provided the button for changing
the icon and spaces for name of the item.
After : The design does not change.This part can
be use well by the user duringt he test. Once the
addition of the item is done, theinterface is as
shown in Figure 11.
Figure 11
e) Edit items
Before Figure 12 After
Before : The interface that can be edit is the icon
picture, name of the item and category of the
item.User can edit it or delete it from the list.
After : The design does not change too much.We
just delete the category space because the item
was already in their own category.

6. f) Search item by sound
or maps
Sound
Before Figure 13 After
Before : when user used sound in search the
item, the speaker icon will indicate the search is
still on going.We have comment that it is not
really suitable because the user may have
difficulties in finding the direction of the lost
item.
After : Our advisor sugggest to us instead of the
speaker we can use the compass to show the
direction of the item. Compass was a good idea
since it can direct user to the specific area where
the item located, thus searching can be done
faster.
Map
Before Figure 14 After
Before : We use map in finding the lost item.The
map will show the direction to the lost item and
show the distance between user and the lost
item.
After : The design does not change much.We
still maintain the design as before because
during the test,the user is satisfied with it.
g) Log out
Before Figure 15 After
Before ; We put the log out button at the bottom
of the page.User sometimes does not realize the
existence of the log out button.
After : We put the log out button at some other
place that is profile.With this new position, the
interface is more organized and user know
where to log out because the instruction is more
clear.
Additional features
1) Feedback
Figure 16
We provide feedback page in case user want to
give comment about these application.With this
features,we can improve any lackness of the

7. application so that it can be more useful in the
future.
2) About us
Figure 17
This features contain the information about this
application.What version is this application and
some other information.
3) Search
Figure 18
This search button functioned to search the item
in application.For example,when user lost the
car key they can go to the search button which is
the magnifier icon and enter the key word “car
key”.Instantly the list of car key will appear and
user just need to choose the correct key that is
lost.
Implementation
We use a software prototyping tool called
JustinmindPrototyper.JustinmindPrototyper can
be used to create prototypes and simulations of
software without any coding, thus allowing non-
programmers to be involved in the
project.Justinmind allow to built the prototype
faster and better with default built-in-widget.
These widget have been specifically designed to
fit the iOS or android apps.
Figure 19: Workspace on
JustinmindPrototyper
After pulling the images, Justinmind let the
static design into clickable interactive
wireframes by setting up hotspots and linking
screens.
There is a lot of collection of fonts available in
JustinmindPrototyper. The font type drop-down
allows to choose from the hundreds of fonts
options available in Google’s font directory.For
the type of font we used, we try to search on the
website what is the suitable font to use on apps.
Therefore we choose Ubuntu font and it also
available on the Justinmind.
Smart guides such as rulers and grid that help to
place and align every element drag into canvas.
So the content of the design will be consistent
throughout the entire design with help from grid
and ruler. This feature really help to know the
exactly size of the canvas and to make sure the
shape or image that drag to the screen in a
correct place. So the widget that drag to screen
will be the same place as other screen.
Justinmind also allow to customize and control
widget borders,one by one or all at once. The

8. adjusted image on Justinmind also can be done
easily because all images inserted on wireframes
can be modified to fit the dimension and style of
the design.The other thing feature in Justinmind
that we really like when we click at the objects
in a screen so it’s automatically will show the
properties of the objects. We can change the size
the objects using the scale. It really help to make
the other objects in a same size too. It also can
change the border easily. Justinmind’s editing
features allow to crop images,rotate or flip
images across axes and resize them.
Figure 20:The grid and rule that really help
in prototyping
To change the image also easy because we have
to double click then it will open on our folder on
the computer. The duplicate task also help
because it can duplicate the screen because lot of
our screen is the same thing so we do not need to
create the screen again. It is easy to choose the
other screen because it has a list of screen on the
right side of the software.
The simulation and testing can be done using the
mobile device and also using the web. So that
easily can simulate and doing the user testing.
Major drawback of JustinmindPrototyper is
when stimulate the projects, it is difficult to click
on the action given. Our testing user sometimes
look frustrated because they have to click twice
or more. So the result of thatproblem make the
time interval of certain task become long and it
is effect on our evaluation reports.
The design make easy because every single
things on the content of Justinmind can be link
to other screen. Images,shape , dialog box, can
be easily connected. We try to make the icon
can be functionality. The prototyper that we
used only Pro in 30 days only and after that it is
free edition. So some of the features are not
available in free edition. So that is the restraint
that we facing. We try to make the screen have
some time interval so that after the time given it
will proceed to the next screen but due to free
edition we cannot to do that. We don’t want to
click to proceed to the next screen.
EVALUATION
As we finished the computer prototyping, we
conduct user testing and evaluations with our
own classmates because of the time limitation.
The user testers are students who take Software
Engineering in UniversitiTeknologi Malaysia.
Before they start using our prototype, we
provide some guidelines in a piece of paper to
ensure the user click the right button to complete
the task. We let them go through the guideline
and working it out on their own without giving
any instructions. Once they finished, we gave
them questionnaires and interview them on what
are their though of the design, whether it is good
or vice versa. These feedbacks are very
important to improve 4SELF to be a user-
friendly application.
USERS
To test out the prototype, we take six people as
our user testers. Our user testers are second year
students who take Software Engineering in
UniversitiTeknologi Malaysia. They are all 20
years old.

9. Since our target users are teenagers,adult and
elderly, we only take adult users for survey
because of the time limitation. A university
student may really need to use this application
because most of them frequently lost their items.
Especially during presentation week,the
percentage that they tend to lose their pendrive
is very high. Another situation is before going to
class, they have to search all over the room just
to find the room key. The searching of the lost
item took long time and they might be late for
class. Thus, this application is much
recommended for university students. Therefore,
we design the prototype based on the suitable of
users form different ages.
EARLYSTAGE TESTING
We wanted to show some result on paper
prototyping which we did earlier before conduct
user testing.
The paper prototype was a brilliant way to
identify issues that our applications facing
with.As part of the designer team, we did not
know whether our prototype was acceptable by
outsiders. At this stage,we have to take full
notes and consider on what other users preferred
to keep upgrade our design.
Computer prototyping came with Heuristic
Evaluation from our peers. These evaluations
lead us to develop application with new fresh
ideas. We decide to change the theme colour
because the present was too simple and boring.
We add some font under the icon to make user
more understandable on what the function are.
And there are so many features for you to see.
USER TESTING TASKS
We started every user off with a brief statement
on what our application about and how this
application can benefit in our daily life. All user
testers are not forced to do these tasks and they
even participate voluntarily. Once they agree to
be our user testing, we set a computer in front
them and asked them to do these four tasks :
1. Sign Up
2. Add Category
3. Add Item
4. Search Item by Maps
We already write the order of the tasks on a
piece of paper. As team members, we let them
explore on their own without giving any hints.
By this way,we could see how long they take
time to complete each task and ask them what to
improve to make the task simpler.
As they completed all thefour tasks, we give a
questionnaire for them to fill in and a packet of
biscuits as gift to thank them for spending their
time for us. After they finish fill in the
questionnaire, we thanks them once again and
take our leave.
FIXING
With all the comments from the questionnaires
obtained, we conclude that there is nothing to be
changed on the prototype and the most of the
comments are about the less instruction given to
user.
SURVEYING
The survey is based on questionnaires that were
written by six user testers with different
backgrounds. To make more accurate result,we
need to do some calculations on measuring
tools. Measuring tools have two type which are
performance measures and subjective measures.
The difference between these two measurement
is that the performance measurement can
determine how usable our application is but
subjective measurement is to determine what the
user feels when using our application.

10. Below is the graph for performance measures for
each task.
Based on the graph above, there are some
conclusion that can be made. First, the task that
seems to be the easiest is Task 1 : Sign Up.The
time taken for user 1 and user 2 were
surprisingly faster than the actualdesigner of
this application. Next, Task 2 : Add Category
took user a longer time to complete this task.
After asked the users, we determine that the user
may be thinking those button was to add item.
They did not know there would be a category
before adding the item. For Task 3, the users
seem to be faster on working this tasks because
it is easy and understanable. The task that
difficult for user is Task 4 : Search by Maps.
The users seems to be confused with the
provided guidelines which have to click 'Search'
because there are two same search button but
both have different functionality.
By referring to user performance score,users
seem to take more time at part where they are
not usual with. For Task 1, users commonly sign
up in other application, that is why it is easy for
them to sign up. For Task 4 , users find it
difficult because users are not approachable with
this kind of task. Plus, these kind of application
was not popular in Malaysia.
Here is the graph on subjective measures.
Based from the measurements result above, the
result was really unexpected. We never expect
the confusing experience would be too high
because we expect the mean would be below 3.
Plus the attractive experience was above our
expectation which was 4.00.
By referring to mean and standard deviation, this
concludes that users find this application very
attractive and helpful for features generation.
Moreover, the application are not challenging
and annoying because it was easy to use.
REFLECTION
Through our entire project, we ran into various
issues. Upon reflection, it became evident that
some of these issues could have been foreseen.
While others were as a result of limitations of
our prototyping tools. These are the following
issues we ran into, and what we would do
differently in future projects in order to make
the design process easier and more successful.
0
50
100
150
1 2 3 4 5 6
Task 1
Task 2
Task 3
Task 4
User

11. ISSUES
Our first problem we were tasked with was
deciding upon a prototyping tool to utilize to
best represent our application. We tested many
and they had various limitations, mainly we
couldn’t find a freeware to do our prototyping.
There are couple of expensive software to do
better high level prototyping, we couldn’t effort
to buy one of the software to better prototyping,
than we decide to use trial version of Just in
mind, where this software gave only 30 days of
trial days, this indirectly limit our time to 30
days. So we have to move faster in order to
complete the high level prototyping. Since we
are very new to this software we took time to
learn and master it. We face a lot of problems
while doing prototyping. We encountered
problem when inserting image and to create link
next process. We study by trial and error
method, we tried dozens of ways and finally got
it right, we also browse internet to learn more
about this software. We also use Adobe
Photoshop to design over images, logos, and
buttons. Design using adobe Photoshop was
much easier than using any other software to
design logos and buttons, e.g. like adobe
illustrator. Even though adobe Photoshop easier
to use but there was problem in import images
and logos to Just in mind, we able to fix it by
changing the format of images and logos and
made it compatible with Just in mind. The next
issues we had were related to font and colour
scheme. The fonts were deemed to be too small.
And illegible, and the colour scheme we used
utilized green and red. This was an issue because
people who are colour-blind would not be able
to differentiate the colours. Finally, we have
only have design for IOS user, we never
design for android or for a windows OS
user.
WHAT WE WOULD DO
DIFFERENTLY
For our next revolutionary prototype, we would
utilize a more common, or even paid prototyping
tool. 30 Days trial really limit our time to use the
software efficiently. It could also be a
prototyping tool that has more options in
creating other interfaces such as windows, which
wasn't really an option in this prototyping tool.
Android was in option but this not easy as
design to IOS. There are a lot of features are
missing. We may use better software to create
buttons, Photoshop only help to create an image
that looks like a button only, but actually it’s an
image. Where there will not have an effect after
a user click it.
CONCLUSION
The design process was incredibly informative
and the experience was a excellent one. We
learned a lot, not only technically related, but
also in regards to time management and
teamwork. We learned about Usability and how
important it is in the design process,as well as
imagining ourselves in the place of the users.
Through our project we found that what we
necessarily thought was important and needed in
an application wasn't exactly what the user
wanted and needed. We have tried with many
type of users,this gave new ideas, to upgrade
and able to fix mistakes. This showed us how
important prototyping is because a company that
dives into a project without actually taking the
time to make a prototype may end up with
catastrophic sales if there is a certain feature that
either is inconvenient to use, doesn't do what it
is intended to, or isn't included at all.
ACKNOWLEDGEMENTS
All in all, it was a pleasure to be in this class,
and we learned a great deal of information
regarding HCI. It is extremely valuable because

12. many of us will be applying these concepts to
our future lives and our technical fields.
Noor Aiesah& Kartigesan
They have contribute a lot to our team, she lead
designer for out prototyping assignment, they
have come out with limitless ideas.
SitiAishah&NadhrahAsma
They very supportive members of our team, they
have handle all the documentation of this
assignment.