Project Proposal

Introduction

UTMSPACE E-Learning System is deployed mainly for UTMSpace to manage the information of the part-time student with lecturer and to make the operation is more efficient, easily to find data, submission assignment, course note and for record keeping more efficient and receive data faster.

This system will be managed by the staff of UTM who is responsible to maintain the systematic of data keeping in the system. To keep data in order and securely by using this system, only authorize person can login and do the process with specific task only.

Normally lecturer itself will contact their student to inform about class, examination or anything related to their study lessons. So I’m proposing for the UTMSpace using notification that include in this system. This online system should included others extra feature which help to the UTMSpace E-Learning management.

Objectives

• To improve UTMSpace E-Learning System by adding notification system that implement web-based and mobile application for multi-platform user interface.
• To setting and configure a web-based system that is more practical.
• To integrate between web-based system and mobile device through Internet connection and enable communication among student and lecturer.

SCOPE

For this UTMSpace E-Learning System, I separated it into three categories of user:

·         Student

UTMSpace student, can access his or her own data. Only registered student can have access to the database through the website and mobile application system.

·         Lecturer

UTMSpace lecturer can access to the students lesson record, details courses lesson, marking, adding note and some special privileges as instructor.

• Student(other persona)
  UTMSpace part time student often use e-learning to submit and download slide. 

Current Issue

Students and lecturers of UTM SPACE are well known the learning portal named E-learning. Current issue of E-learning is the mobile web interfaces of UTM SPACE SMP portal.

Nowadays, user often use mobile phone to browse a website. People do not carry their big laptop everywhere. They just bring their Smart Phone or Tablet as it light and easy to use. E-learning does not provide mobile user friendly type interfaces. It’s look alike an unfinished web system.

Below is the issue of current E-learning portal:

·         Hard to use it when using mobile phone. E.g. small button to tap.

·         Hard to navigate web pages.

·         Web portal designs become messy when browsing using a smartphone.

·         Notification is not interactive enough. User does not notice there is new notification.

·         Need to scroll down to get information because have long page while using Smartphone.

·         E-learning portal this is important thing for communication between lecture and student to do assignment have been given. Student need to find link elearning to access the portal. It should have mobile apps to help student access easy and fast. 

Proposed Solution

A Multi-platform website that can support either Desktop PC/PDA/tablet/smartphone such as Bootstrap.

ü  The website can transform the interfaces between multiple devices.
ü  The website has breadcrumb trail interface for user navigation.
ü  Notification bar on top of the website. The notification will pop out if new notification exists.
ü  Supporting complex information such as student carry mark with graphic and charts.
ü  Create label and reference for student as a clue that they almost done for the course and prepare for next quiz, midterm exam and final exam.

Target User

1) Student

2) Student(other persona)

3) Lecturer

Gathering Requirements: Users

PERSONA

Persona 1 from User Group 1: Student

 Leha is 24 years old student from UTM SPACE. She is taking Computer Science course and currently in 3rd year. She is a very good worker and a smart student. She is a hardworking person where she always busy with her project and managing the project . Leha likes to use gadget a lot. She always brings her smartphone and iPad everywhere to do her jobs and going to class.

Leha is using e-learning portal to browse task and notes. She feel the portal does not have a good user interface and she always late submitting her project to the portal. She told the portal does not have notification to tell her that she have pending task. She want the notification to be send to her smartphone nor by email. Leha is not expert in using the portal. She find it's difficult in finding the submit location. She hope the portal have a good user interface for mobile devices too.




Persona 2 from User Group 2: Lecturer

Zarina is 35 years old and work as Lecturer at UTM. She performs a wide range of Information Technology related tasks mainly teaches Object Oriented Analysis and Design.  She regularly develops guidelines and recommendations for her student and also write books and articles for UTM. She also responsible for the management of the Students UTM Space.

As a lecturer in UTM, Zarina always using E-Learning portal to interact with her student. To monitoring performance and status student, she need to accesses the e-learning portal from anywhere if needed because she always busy with her lecture and researcher schedule.

She feels a little stuck in the lecturer role in e-learning. She’s like to engage more in the functional area of the student background and status, carry marks, notes and etc. The system for getting the student list is un structured and highly imperfect.

From her point of view, a more systematic ready to go mobile system for screening information of student would be good for her. The system must have clearly shows student assessment details such as quizzes, submission assignment and notification for any news would be great.






Persona 3 from User Group 3: Student

Zamri is 32 years old and he is taking part time study in course mechanical engineering at UTMSPACE. He is now employer at one the biggest organization in Malaysia as technical Assistant. He is often use in e-learning submit assignment and download slide note and assignment. user like zamri is busy people don't have much time to surfing e-learning website to check his task from the lecture.
                     
He needs to mobile  to easy to perform his task everywhere if he get urgent task to be update. He also hope the system can be more efficient and fast respond enhance like to add live chat channel to give easy to communicate with lecture.




SCENARIO

TASK 1 - SUBMIT ASSIGNMENT

Task Scenario 1 for persona 1: Student

1. Identify herself
2. Select the course
3. Search for the submit link in the course page
4. Click "Add submission"
5. Select File to Upload
6. Click "Save Changes"
7. Logoff from portal.

Task in narrative language:

        It's Friday afternoon and Leha is about finishing her work. She check the E-learning portal about study material tomorrow. She found that she have assignment to submit tomorrow. After she finished the assignment, she login back to the E-learning portal and identifies herself. Then she select course where the assignment need to be submitted. She Search for the links to submit the files. After she found the links, she click "Add Submission". Then she select file to upload to the portal. Then She select "Save Changes" to submit. Then she logout from the portal.


Task scenario 2 for personas 2:  Lecturer

1. login account
2. Select Course Learning Information
3. Click Edit Information
4. Click Insert Information
5. Verify Changes
6. Logout account

Task in narrative language:

       During do her work, Zarina as usual want to check her student assessment to marking and gift marks for them. She login to E-learning portal and identify herself by login as lecturer. By inserting Staff Id and password now she select the right learning course information. She select the column student submitted assignment and review one by one until finish. After Zarina satisfied she’s going to give mark by click at button “Edit/Insert” to give mark and then “Save”. Before Logout she make sure the changes is at the right place and logout.

Task scenario 3 for personas 3:  Student 

1. login account
2. choose course subject
3. find date timeline
4. check task/upload/note
5. submit task
6. Logout account

Task in narrative language

          It’s Saturday morning and Zamri is do their work like usual. During doing work he get one call from another student is a Zamri's friend have problem with his account e-learning and zamri need to help his friends to upload the assignment group to the e-learning. zamri login his account like usual to e-learning then he upload the assignment at the enroll course. sometime in daily at his work he check e-learning if lecture upload new task assignment to be do or read slide note. after that, he is logout from e-learning and then sometime not logout his e-learning.

Gathering Requirements: HTA

Hierarchical Task Analysis

PERSONA 1: Student

Task 1 - Submit Assignment

Task 2 - Download Slides

Task 3 - Comment on Uploaded Assignment

Refined HTA: Student

Task 1 - Submit Assignment

Task 2 - Download Slides



Task 3 - Comment on Uploaded Assignment






Persona 2: Lecturer

Refined HTA: Lecturer



Persona 3: Student

Refined HTA

Conceptual and Physical Design

Metaphors

• The bell symbol shows the notification that the user need to pay attention. It is symbolic as a bell notifying people that there is something happening and need to take action.
• The mail symbol shows there is new incoming messages or comment from any user or comment from assignment uploaded.
• Both symbol is easy for user to understand its function. It is also used in facebook and other social media that the user use every day.
• The power symbol function is for logoff from the system. User experience this when they want to turn off TV or other electronic devices. This mimic the function “turn off” and easy for user to understand the meaning of the logo.

Task 1 – Submit assignment (from notification)

• User identified from the notification and click it to go to the assignment pages
• In the assignment pages, there is bread crumb trail on top where the user knows their current location on the web system.
• The drag and drop files resembles a person pick up a file and drop it to the assignment area.

Task 2 – Comment (from notification)

• When the user knows there is a message from the notification, the user click the message and open it. It’s like opening a mail or message.
• After the user submit the comment, the system will pop out message saying “comment posted”, resembles the user posting a reply.

Task 3 – Download slides and notes

• In the download pages, there is down arrow. It resembles the “Download” function and the user can understand the meaning of the symbol.

Storyboard

Task 1 – Submit assignment (from notification)

1) User click on the notification icon

2) The icon will draw the notification. User click on the selected notification. 

3) Then, user click add submission

4) User have to drag and drop file. Then user click Save changes.

5) A pop out will appear. Click anywhere to dismiss the message.

Task 2 – Comment (from notification)

1) User click on message icon

2) The message will draw from the icon

3) User type comment and press add comment button

4) A pop out will appear. Click anywhere to dismiss the message.

Task 3 – Download slides and notes

1) Click on the Notes & Slides

Click on down arrow icon to download

Low Fidelity Prototyping

Briefing

Hi, we’re the FAZ team and we’re working on a modified UTMSPACE e-learning website that provide user friendly and easy to use. You will stay up-to-date and never miss your assignment due.

Consent

This study is to learn about what does and does not work with our current design. Your name will not be published. This study is for a project in Dr. Masitah’s Human-Computer Interaction course at UTM SPACE. Your participation in this study is completely voluntary and you may stop at any time and request that your data be omitted from the study. We value your time and only ask for about 20 minutes.

e-learning is the web based system that allows students and lecturer interact. Lecturer can upload assignment and notes and students can download slides and submit assignment. The is a lot of other functions such as messaging in the web system. Before you test, you should know this prototype is built by using PowerPoint Show. You will interact using mouse and keyboard for this test.

We will be giving you three task only to complete on the site that we think are representative of task people upload assignment to the e-learning. All we ask of you is to let us know when you’re confused or think something isn’t clear. Let us know if you get stuck or have any feedback regarding the site. We still have some rough edges so we’d like some feedback from you before we move towards the final design.

I’ll be sitting here by your side if you need help and the rest of the team will quietly be taking notes.

Do you have any questions before we start?

Here’s your first task.

Scenario Task

• ·         Login to your account, click on the notification, drag and drop your assignment file, submit.
• ·         Click on the message icon, reply Dr. Masitah comment, add comment.
• ·         Click on the “Notes and slides” links, click on download icon to download assignment.

Demographics

Observation

User 1: Task 1,2,3

Result:

• User tell that the new interface is easier than old design.
• User look quite not use to the new interface but yet managed to get used to the functions.
• User feel it easy when the download function is located in the left navigation panel.

User 2: Task 1,2,3

User 2 testing:

User 2 comment:

Result:

• User comment that the notification is not interactive enough.
• Need to add something interactive enough to attract user.
• Time of user to do all task takes 5 minutes to do all task while after improvement, it only takes 2 minutes.

Improved design