User Interface Design Project and Report

Process Visualizer in HRMS ePAR system

Rob Morgan

James Madison University

For my user interface project I chose to look at the interface for a system that we are
rolling out on campus. The new system is called HRMS: ePar and it is an electronic replacement
for the paper PAR forms that are currently being used. At James Madison University a PAR
form is used for a multitude of reasons. Par forms are submitted when a new employee is hired,
when an employee is terminated, goes on a leave of absence, or has another employment status
change, or when an employee is transferring positions. Currently, the PAR form is filled out by
hand and signed by a multitude of approvers before being submitted to Human Resources and
Payroll. The electronic PAR form (ePAR) will replace the paper form and allow a department to
submit the form electronically rather than on paper. The goal is to reduce the time spent tracking
down signatures and allow the process to run quicker and more smoothly.

In regards to this project I wanted to look at one screen in particular that deals with
ePARs. The screen is called the Process Visualizer and it is designed to allow a person to see
the approval flow for an ePAR that they have submitted. A screenshot of the Process Visualizer
is seen here:

The process visualizer shows everyone from the initiator to the department approvers to
other University to approvers and finally the human resources and payroll approvers. After each
person has approved the ePAR they receive a green checkmark and the ePAR travels to the next
approver. When a department is initially setup for access to ePARs they determine how many
approval stamps there will be and who has access to be an approver. Dependant upon the
position that is being hired the ePAR may or may not need approval from VPs, Deans, or the
President. If an ePAR does not need approval from a particular position it skips over that spot
and moves on to the next position. The trouble that is being addressed with this particular
interface though is that the designation for a position that does not need to offer approval is a
green arrow whereas the designation for a position that does need to approve the ePAR is a
greyed outline. In the example shown in the screenshot the ePAR is currently waiting I the Dept
Approver 3, it will then move to Dept Approver 4, and then skip down to the SWEC approver. It
seems counter intuitive to me that the areas that the ePAR will skip are in full color with a green
arrow and the areas that it will need to seek approval are greyed out. The situation is complicated
further in the fact that when an approver approves the ePAR they are given a green checkmark
across their icon. The color green here is used both to show that it is skipping a person and that a
person has already approved the ePAR. The green arrow meaning the ePAR will skip that person
and the green check meaning that person has approved it. While the greyed out icons means that
the person is next in line to approve.

Since the ePAR class is in the process of being rolled out to the academic side of James
Madison University I have had more training classes than usual which has provided me ample
opportunity to observe participants who were interacting with the system and this screen. In the
past few weeks I have taught the class four times with an average class size of eight participants.

Providing me with approximately 30 participants to observe. The research was done within my
normal training setting and I did not do anything above or beyond what a typical class would
entail. For that reason the participants were not made aware that they were participating in a
survey.

To conduct my usability testing in an environment that did not interfere with the normal
training session I created a list of questions that I would ask during each training session and
then jotted down the notes as I trained. I created the list of questions to ensure that all of my
training sessions were provided with the same information and that the data was equal. The
questions I asked were as follows:

1. (While showing the Process Visualizer screen the first time I said) This screen
will show you who has approved the ePAR. Looking at this screen who do you
think the next person is that will need to approve this ePAR?
2. What do you think this green arrow means?
3. What does the greyed out icon mean?

Do the informal atmosphere of the class full participation was not required or expected. The
results that I got back from all four classes are below.

Q1

Q2

Class 1
3 students all
responded that it
would be the
person with the
green arrow.
2 people thought
it meant that
they needed to
approve.

Class 2
2 students all
responded that it
would be the
person with the
green arrow.
1 person thought
it meant that
they had
approval
authority. 1

Class 3
4 students all
responded that it
would be the
person with the
green arrow.
2 responded that
the person with
the arrow was
the next
approver.

Class 4
3 students all
responded that it
would be the
person with the
green arrow.
1 person said
that they have
approver
authority.

Q3

2 people said
that they were
inactive or not
needed.

person thought
that person may
have been out of
the office. 1
person thought
that they were
the approver
1 person said
that they were
no longer
employed by the
university.

1 person said
that they were
not needed for
this approval. 1
person said that
it was a position
that was not
filled.

2 people said
that they were
not needing to
approve this
ePAR.

The informal survey showed me that not one person correctly identified that the greyed out icons
were for the people that would need to approve and that the icons with green arrows on them
were positions that did not need to approve. After I asked the questions I would explain to the
class what the icons actually meant. While I did not record the responses I was usually met with
bewilderment or comments about how that doesnt make sense.

I believe that the data shows that way the screen is currently setup is not intuitive to the
user. The user seems to expect that a greyed out icon means it is invalid and a full color icon
means that it is active. I think the system would have benefited from reversing the color scheme
that was chosen to show who is an active approver and who is not. However, at this point, with
the majority of the administrative and finance side of the university being trained and a portion
of the academic side I think switching the colors would cause initial confusion.