PROJECT

HCI

All in one E- Learning solution for Business Students

By
Abdullah Irfan & Seehum Rizwan

Phase 3

Abstract
Our idea is related building an online video archive focused on business
students based on searching via topics or simple terms. Currently there is no

online video archive that focusses on specific topic and terminology but
rather focuses on a generic topic with lengthy video. After talking to a
business student here at IBA. We were able to jot-down the lapse in such a
facility and come down with a solution.
Field studies:
Currently most of the business students go on Google, type a terminology
and open the first 5 links that come in different tabs. If no solution is
available immediately they will go YouTube and still open first 5 links with no
review system and long videos which might cover the terminology in depth
or not. They visit other university websites and find curriculum and look at
their learning material and then search for the books name on amazon to see
its review, and finally understand it.
While viewing the videos they have to manually look through all the videos
to find their terminology, and once if they do find their videos and
terminology there are no notes and query resolving system in place to
answer their further questions on the topic.
There is no consolidated easy to use solution for notes, videos and query
resolving from authentic sources in place.

The prototype is live at:

https://live.uxpin.com/eb18112bc5f1858e967df9a8
ea955da1958bf04f#/pages/32216225

Phase 3
Part of the third phase was to submit a high fidelity report. Our design deals
with all the lapse with the current learning hurdles faced by business
students today
In order to make the prototype I used the software UxPin which is an online,
web based prototyping application. The best feature it has is that this
application involves the user as part of the prototyping phase, where they
can monitor the live prototypes being made and add comments there and
then. As you can see below theres a small red notification over sign-up where
the end user has commented that he needs check how the button would if
its of different color.
Main Page:

We will be describing page and interfaces screen wise along with the
complete work flow. The front page contains a simple page with a login and

sign-up option. Theres a single search box option. The search box has an
option to select the terminology and then search the terminology or keyword.
This search box is specifically for business students because it develops the
habit of working with InteliSense and keywords which is what they will be
working on after graduation on the famous Bloomberg Terminal.

Screen

Upon clicking the sign-up page, the background fades and a sign up box
appears in the middle. The background stays consistent with the main. Once
the user signs up he/she is redirected to the Screen 1 and instead of the
login/signup option their name is going to be shown.

Screen 3
The screen shows

the redirected version to the main page.

Screen 4
The above screen shows the search result, lecture by and contains a small
description of the topics contained in the video. It also has a usefulness
meter which shows how useful or informative is that video with respect to
the keywords that have been entered. Upon clicking the particular video or
view now or the term button they are forwarded to Screen 6 where the
video content related to that term starts playing
As you can see the notifications in circles 1 and 2, which contains comment
by end user to remove the greyish background and have the original white
background

Screen 5
This is the main page of the application which we will be using. The main
area contains the video for play and the right panel contains all the topics
included in that complete video. Upon clicking any topic which also contains
the search topic, the video will play that content related to the content and
upon double clicking the term the notes specific to the term are opened.

The notes arent visible at first but on double clicking any topic [on the right
panel] a complete explanation [or excerpt] will be shown below the
description box from the most highly rated book from amazon on that very
topic, with an option to buy it from amazon. You can click the show less
option once you are done reading it.
There is also a comment section below which only professors and students
[both verified by signing up using university email address] can use. This
ensures diversity with a community based learning system. The reply feature
allows the commenter to keep track of their own comments and answers

Evaluation:
After I made the initial prototype I had given the live links to Murtaza and co,
along with a few of my cousins in UK and Canada to look at it and identify
any features that they are not able to understand and add tags to whatever
they are.
Initially I had missed out on the review based system where I didnt add the
stars to show how relevant the video is specific to the term that was
searched [Screen 4]. I simple mistake I missed out but thanks to UxPins live
commenting feature I was able to get hold of it.
The initial reviews were that the content placement made the website very
much self-explanatory although a use of metaphors would have made the
section for the notes much more easier to understand [currently a single
click on the right panel terms skips the video and a double click opens the
relevant notes specific to that term]. If a symbolic buttons were created
beside the terms one with play button and other with notes would be easy
for the user to understand.
The above procedure used for testing are known as user tests where the
tests are user centric are directly part of it. Among the methods used in
user tests are observation, ethnography, usability tests & controlled
experiments. The units of measurement used here was time and satisfaction,
where I asked the user to time himself as to how much time it took him to
reach the required video related to the specific term [assumption of
database optimization has been eliminated and is based on number of hops
from start point where each hop is a page]. Another measure used for
usability testing is the overall success satisfaction, which tells us how
satisfied the user was and did he actually get the required result and answer
to the query. To implement this I had no specific system but to ask the user
right at the end if they got what they needed in the workflow that the
website support.
Besides the user centric are the 10 Usability Heuristics for User
Interface Design given by JAKOB NIELSEN. They are called "heuristics"
because they are broad rules of thumb and not specific usability guidelines.
Visibility of system status
The current system uses color to differentiate the different steps, like at the
point of sign up the background screen becomes grey and the pop-up signup
box is colored indicating that the system is waiting for the user to enter his
credentials and details
Match between system and the real world

Currently the video name and details are directly available right at the top
left and above the video, just like a real word document where the details are
available at the beginning of the document

User control and freedom

The back and forward key work with which it also saves the selections the
user made earlier. Along with the visible search box at every page which is
basically the primary section of this website
Consistency and standards
All the pages are consistent with the layout with the header and footer being
where they are. The design is consistent with every search and at every
sorting done on search.
Error prevention
The signout button gives a pop up box asking if they really want to sign out
or they pressed it by mistake. Rest of the items like commenting are also
done with a popup box because its a professional website, and the student
might want to add the relevant details.
Recognition rather than recall
The users interface is very simple and just because most of the layout is
related to YouTube most of the users are already familiar with the setup
including the comments sections
Flexibility and efficiency of use
Once the user is signed up he need not be involved with singing in every
time and also the only place where the user is going to be using his
credentials when he has to comment or view his already watched videos or
when he has to thumbs up or thumbs down a video.
Aesthetic and minimalist design
The webpage incorporates a very simple and sober color scheme. All the
sections and buttons are clearly visible.
Help users recognize, diagnose, and recover from errors
The possible areas where errors could have been there is when there is no
specific video for the search available at which it simply says We are sorry
we dont have any videos related to your term available! We are working to
get videos here at E- Learners

Help and documentation

Theres just a help section which tells how to use this application, along with
a simple FAQ along with the policies of use