Currently we are having a project of Human Computer Interaction (HCI) course in which we are developing a mobile app named "Announcer". This is a project report of our "Announcer" mobile app. Click on our blogspot here to know more: yujinnohikari.blogspot.com prototyping software credit to: justinmind.com

1. ANNOUNCER MOBILE
APPLICATION
WAI PAI LEE
Faculty of Computing
In Software Engineering
pailee.wai@gmail.com
NORHAYATI BT
SAAD
Faculty of Computing
In Software Engineering
nhsyaya94@gmail.com
TAN WEI LONG
Faculty of Computing
In Software Engineering
wltan8@live.utm.my
NURUL WAHYUNI
BT WAHID
RAHAYU
Faculty of Computing
In Software Engineering
ryu_rikuo17@yahoo.com
ABSTRACT
In this paper, we are going to describe the
process of designing the Announcer
system project that can receive the
announcement and take it noted in a
calendar. By taking note in calendar, it will
be set to pop out notification when that
event is near. The order of notification
depends of the priority of that
announcement that were set earlier.
INTRODUCTION
We want to design a mobile application
that will receive the announcement and
take it noted in a calendar. By taking note
in calendar, it will be set to pop out
notification when that event is near. The
number of notification depends of the
priority of that announcement. There are
two category in this system, one of it
is only one person is able to give
announcement and set the priority such as
lecturer and student. Lecturer has the
permission to set the priority of that
announcement. Another one is for
community, all member are able to set the
priority. If event time crashed, it will
notify users and suggest the most
important event. If the event time changed,
it will automatically notify users and
change the event time in calendar. Besides,

2. it will be able to generate a report for
events in the time period given. We also
can set the event manually in that
application and let others see those
important events like class time so that
others will not crash your time.
PROBLEM
Nowadays, when people want to announce
something, they will use Facebook,
Whatsapp, or anything else to send the
information. But social messaging function
widely used for unofficial announcement
so the announcement probably not rigid
and not always be kept. Moreover, people
also may forget the announcement after
they saw it once. If there is an important
announcement like additional class or
exam date, they will be troubled if they do
not take any note. Of course, calendar
system can be used to avoid this from
happen but it is needed to set it manually.
Moreover, people need to change the time
manually if the event time changed by
using calendar system and the information
of the event is also not centralized.
USER
Our target users are students, lecturers,
company workers, supervisors and normal
users. Lecturers will use this system for
informing students about the latest
announcement or information and students
will use it to receive announcement from
lecturer. Supervisors can inform their
workers if there are changes on meeting
time or something else by using this
system. Normal users can use it to inform
their community’s member.
TASK
The tasks that we asked user to complete
in the user testing were:
Task 1 – ‘Create Group’
This task required the user to click on the
‘create group’ icon, write new group name
and then add members into the new group.
Task 2 – ‘Set Event’
This task asked user to click on the ‘set
event’ icon, set new event name, set the
date, set the time and remainder, then save
the event that had been create.
Task 3 – ‘Search’
This search task required the user to search
for a certain group and join the group.
Task 4 – ‘Set priority’
This is the task that can help user set
priority of the event according to their own
preferences. This task asked the user to
drag the task and drop it to set its priority.

3. DESIGN
Now, after lots of stages and evaluations to
improve our application design, we have
come with the final design. Thus, produce
the high fidelity of Announcer application.
At first, we used icon and letters to
indicate the links. However most of the
users found this very confusing when
testing it, so we replaced all the letter into
icon. Make it more organize. We replaced
the create group button, ‘+’ into a people
with ‘+’ icon to make user more
understand. Next, we also replaced the add
alarm and add event icons into a clock and
square text icons respectively. After
changed it, most users understand it easier
and thankfully they become clearer on
which icons will link to which destination.
Figure 1.the main screen of application
Next is the set alarm function which is not
much different. We did not change anything as
it is simpler to understand by user. Based on
feedbacks, user found it very easy to use. Also,
the system is much more similar to their
phone’s application alarm.
Figure 2.set alarm
Furthermore, for the set event function.
There is also no different from the
previous prototype. When user click the
Date, a calendar will pop out and user just
have to choose which date they want to set
the event for. Also when user click the
Time, numbers will pop out to indicate
which time they want to set the event. This
is very practical and easier to user.

4. Figure 3.set event
The speciality of our application is Create
Group as it involves many users. For the create
group screen, we did not change anything.
Based on the user feedbacks, none of them is
getting confused or having any problem with
this part. So, we keep it same.
Figure 4.create group main screen
The search part is one of the important
function inside our application. In here, most
users confused and cannot find the Search icon
because at first, we used pencil icon for search.
Thus, we changed it to lens icon as it was
usually used for Search icon in any website.
Thankfully after changed it, most users
understand and can find the icon Search
instantly.
Figure 5.search main screen
The search processes also stay close to our
initial design. User found it easy to use it and
understand.

5. Figure 6.after searching name
In the announcement, user will receive alert
from any activities of the application. It is a
very simple system. It will display any request
to join group from other user or display
confirmation of joining other group or more.
We keep the design as similar to paper
prototyping. We only changed the round boxes
into a long rectangle.
At the announcement icon on top of the
screen, there will be numbers to indicate how
many alert that the user have. To make it more
relevant, we replaced the round shape into
rectangular shape. The alert also can be
deleted by clicking the ‘X’ button.
Figure 7.Alerts of Announcement
Finally is the set priority task. Most users are
very confused on how to use and what to do in
this task as it does not show any instructions.
Therefore for improvement, we include an
instruction at above the icons. The instruction
is in italic and smaller size so that user now it
is a guide to help them.
In here, to set priority, user just have to drag
and drop which is the most important on top of
the list. Some user found it interesting to drag
and drop. It is very convenient and great to
organize their event.

6. Figure 8.drag-and-drop of set Priority.
IMPLEMENTATION
For the high level fidelity, we use
Justinmind software which is an offline
software. The reason we use this tool is
because it offers the capabilities that
typically found in diagramming tools like
drag and drop placement, re-sizing,
formatting and export/import of widgets.
In addition, it has features for annotating
widgets and defining interactions such as
linking, animations, conditional linking,
calculations, simulating tab controls,
show/hide elements and database
simulation. However, we cannot create
animation by using Justinmind because of
its inability to do so. We also cannot attach
any sound to it as for making the prototype
more attractive or interesting. We argued
that the prototype needs to use a phone,
not a tab. We also decided to not use bright
and too much colour into it as it will cause
distraction. We decided to make it simple
with just using boxes and word and also a
little bit icons in it.
Another problem that occurred is that,
when we were recording the screen during
user testing, the Camstudio software had
gave a little disturbance to our prototype as
it made it more difficult to click on the
button or boxes. Whereas when we were
using the Camtasia software to record the
screen, it did not gave any disturbance at
all to us and the prototype system can just
be run smoothly.
EVALUATION
For the user testing of our prototype, we
had search the user among our friend and
family. The two of them represented the
normal user, two other users as
representatives of student, whereas the
other two represented the working adult.
At the time of the testing, one of us that
acted as the consultant gave briefing about
the prototype of the system that we built to
the user. The user also had been giving a
consent form by us before the test was
proceed and we also able to have their sign
that acted as an agreement with them. The
task that we asked them to perform were
create group, set new event, search group
and join, and set priority of the event or
notification.

7. The critical incidents that we observed
while doing the testing were inability of
the user to differentiate between set event
icon and the set alarm icon. Some of them
need to return backward because of that
error while other able to click the correct
icon easily.
The usability problems that we didn’t
solve in our final design is that the icon
problem and the flow of this system. We
have to overcome it by replacing the icon
that easy to be recognized and suitable as
well as for the flow of the system that need
to be put in order and organized.
SURVEYING
First, we calculate the result’s performance
measurement for knowing how usable our
product by every four tasks that we asked
user to test it. The formula that was given:
RESULT
These are the performance score that
resulted from the test that we had
conducted. These result were based to
every task that we asked the users to do.
Subjective Measurements:
0
20
40
60
80
100
User 1 User 2 User 3 User 4 User 5 User 6
Task 1 – “Create Group”
Performance Score
0
20
40
60
80
100
User 1 User 2 User 3 User 4 User 5 User 6
Task 2 – “Set Event”
Performance Score
0
20
40
60
80
100
User 1 User 2 User 3 User 4 User 5 User 6
Task 3 – “Search”
Performance Score
0
50
100
User 1 User 2 User 3 User 4 User 5 User 6
Task 4 – “Set Priority”
Performance Score

8. Attr
acti
ve
Conf
usin
g
Conv
enien
t
Ann
oyin
g
Hel
pfu
l
Chall
engin
g
U
se
r 1
4 1 4 1 4 1
U
se
r 2
4 2 5 1 5 1
U
se
r 3
5 1 4 1 5 3
U
se
r 4
4 2 5 1 5 3
U
se
r 5
3 1 4 1 4 2
U
se
r 6
2 2 5 3 5 1
T
ot
al
22 9 27 8 28 11
Next, we calculate the subjective
measurement that consists of mean and
standard deviation for every choice of the
user. From the questionnaire that were
filled by the user, we had gotten the result
from each of the experience goals given.
Mean Standard
Deviation
Attractive 3.67 0.93
Confusing 1.50 0.50
Convenient 4.50 0.50
Annoying 1.33 0.75
Helpful 4.67 0.44
Challenging 1.83 0.90
So, this is the bar chart for the mean that
we calculated. For overall, our mean result
shows that average choice that the user
chose is basically still much in our
expectation.
Then the mean result contributed to the
calculation of the standard deviation that
shows whether our result that based on
users experience is stable or not.
REFLECTION
By doing this project through this
semester, we had gathered many
knowledge about the good user interface
that need to be included in every system
and web or mobile application. Moreover,
we also learnt the how the way of
evaluation and performance measurement.
When building this prototype, we had
learnt the use of prototyper tool like
0
1
2
3
4
5
Mean
Experiences
0
0.2
0.4
0.6
0.8
1
Standard Deviation
Experiences

9. Justinmind software and also the process
of user testing and evaluation as well as
the skills of the communication on guiding
and coaching.
If we were able to do this project once
more, we would like to use online
prototype so that we can edit the content
and do the user testing anywhere and
anytime we like without having to have the
software itself. Not only for the testing, but
also for the prototype itself that might be
succeed to be build to a mobile
application, we want to make it as online.
We also want to recreate the label and icon
to make it more attractive and decrease the
size of the phone. Besides, we also want to
use random people and user for the testing
so that it will vary the testing result and its
evaluation.
CONCLUSION
The design process was incredibly
informative and the experience was an
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.
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 design decisions.
ACKNOWLEDGEMENT
All in all, it was a pleasure to be in this
lass, and we learned a great deal of
information regarding HCI. It is extremely
valuable because many of us will be
applying these concepts to our future lives
and our technical fields. Thank you to our
lecturer Madam Nor Anita Fairus bt Ismail
for the valuable experience of the HCI
lessons, and to our classmates who helped
us along in this iterative process by
providing feedback and input along the
way. We hope that we can always
remember the knowledge involving the
HCI and use it when we are in our real
working life soon.