INTERACTION

DESIGN REPORT

Group – 08

SE/2019/001 Seyon S.
SE/2019/010 R.K.B.M Saman Kumara
SE/2019/012 T. Vidhush
SE/2019/041 R.K.S Dayarathna
SE/2019/044 Y.S. Edirisinghe

SENG 21263 – Interactive Application Development

 Table of Content

1. Executive Summary………………………………………………………………………………………………….

2. Introduction…………………………………………………………………………………………………………….
2.1 Overview of the Product and Design………………………………………………………
2.2 Objectives of the Design…………………………………………………………………………
2.3 Target audience

3. Requirement Gathering………………………………………………………………………………………….
3.1 Requirement Gathering Process……………………………………………………………
3.2 Requirement Analysis Process………………………………………………………………

4. Design Principles……………………………………………………………………………………………………
4.1 Conceptual principles…………………………………………………………………………...
4.2 Behavioral principles……………………………………………………………………………
4.3 Interface-level principles……………………………………………………………………...

5. Design Values……………………………………………………………………………………………………….
5.1 Ethical (considerate, helpful) …………………………………………………………………
5.2 Purposeful (useful, usable) ……………………………………………………………………
5.3 Pragmatic (viable, feasible) ……………………………………………………………………
5.4 Elegant (efficient, artful, affective) ………………………………………………………...

6. Main UI Components……………………………………………………………………………………………...

7. User Flow……………………………………………………………………………………………………………….

8. Finalized UI…………………………………………………………………………………………………………….

9. Design Evaluation…………………………………………………………………………………………………...

01. EXECUTIVE SUMMARY

1|Page
 We have chosen the case study about “ProLearner” learning platform. This online platform
provides e-learning service along with live classes and other study materials. In this platform
learners can attend online classes and they can also access recorded class videos. Teachers will
be provided options to take classes and carry-on online exams and quizzes. And the teachers
will be able to get the progress of each student in the form of a report. This platform is mainly
developed to enhance distance learning method with an all-in-one software module.

Our team has come up with the UI designing process for this software module. We have
included each step we followed to create the UI. And the UI has been evaluated according to
the interactive design principles. UI samples and user flow diagrams have been provided to
elaborate the workflow of the interface.

02.INTRODUCTION
2.1 Overview of the product and Design
This report is being written based on our novel idea about creating an online learning
platform, which provides all types of support for distance learning. This platform
offers e-learning services in addition to live classes and other study resources.
Learners may watch recorded class footage and take online courses using this portal.
Teachers would have the ability to attend courses and conduct tests and quizzes
online. Additionally, instructors will have access to reports that detail each student's
development. This platform was primarily created as an all-in-one software module to
improve remote learning.
2.2 Objectives of the Design

 Provides a platform for the students to learn.

 Provides a platform for teachers to conduct online classes.
 Provides the platform for the teachers who conduct classes to upload recordings
through same application.
2.3 The target audience
 Audience 01

According to our new product we target the audience that are eager to learn on any
field of area. Most probably the school students, and University students belongs to this
audience. They can have online classes as well as they are able to follow various courses.

 Audience 02

This is the audience that already has knowledge on various subject areas. They can
conduct online classes, and upload recordings on this platform.

03.REQUIREMENT GATHERING

2|Page
 3.1 Requirement Gathering Process
To obtain accurate requirements, the analyst must ask the right kind of questions and
listen carefully to the answers given by the audience. To get an accurate knowledge on
people’s perspective regarding this new product we decided to do a quick qualitative
test during the design process. After an effective evaluation we were able to open the
user’s mind and see how the target audience responds to the given questionnaire to
accomplish the task.

The survey was conducted as a physical survey because it allows faster better results
and more opportunities to take the advantage of our target audience. The relevant
questionnaire was distributed among random people of the target audience without
any classification of ages.

3.2 Requirement Analysis Process

We expect this online platform to help learners with live and recorded classes. Learners
can join in live classes for their respective courses and, they will be provided with the
recorded video of the class according to the teacher’s preference.

And teachers can conduct online exams and quizzes through this platform in order to
assess the students. Students will be awarded with points and badges as achievements
when they score marks in the exams and quizzes. And we are expecting to provide
valuable certificates to the learners at the completion of the course.

04.DESIGN PRINCIPLES

3|Page
 It was necessary to translate user needs into the structure of a design after clearly
comprehending and defining user requirements. A brainstorm was done to decide on
how to apply design patterns, and principles to circumstances on the website. Listed
below are some design principles used for our website.

4.1 Conceptual principles

Optimize for intermediate users
Beginners of this app may be unwilling to be familiar with the interface. Even though there
are some people who are experts on using these kinds of platforms, with considering the
beginners we thought of optimizing the app for intermediate users.

Less is more
At the beginning of our design process, we used 3D models as graphics for the application.
By considering the simplicity is the best, we thought of optimizing our website and the app
with simple graphics.

4.2 Behavioral principles

All information can be easily found
This application allows users to maintain their own profile. For the audience who carry out
online sessions or the audience who learn through uploaded videos are able to update their
information in their profiles. And others can see others profile according to the restrictions
given by the user.

Contextual help and assistive interfaces

The platform easily provides when and where needed in the interface, without the need to
break the user’s flow.

4.3 Interface-level principles

Using persistent headers to maintain context
The application consists of simple page navigation. The ability to see which page the user is
now on is provided by a consistent header. Search boxes are strategically positioned to assist
users as needed.

Using paging and a footer

Without scrolling the page to the infinity, users can scroll to the end of the list quickly or
return to a particular list item by navigating elsewhere. Paging is incorporated into the
application.

With the help of the above-mentioned guidelines, we were able to improve the user’s
interaction with the web application. Getting reliable information is one of the most aspects
to develop this kind of application.

4|Page
05.DESIGN VALUES
5.1 Ethical (considerate, helpful)
When creating our design, we were careful to eliminate any form of discrimination against
minorities and encourage diversity among users. People from various backgrounds and races
are welcomed to use this website without any prejudge. Furthermore, there is no age
restrictions, all are welcome to use this website. This product help to increase the efficiency
and effectiveness of individuals and groups when learning and teaching. All the people are
treated in equity.

5.2 Purposeful (useful, usable)

According to our survey most of the people showed their preference to download the
recordings through same platform without using different applications for each task.
Furthermore, it is developed to take online classes or self-learn with the uploaded videos
and conduct classes like same as Zoom. Since, it helps users to achieve their goals we
implement those features to our website while minimizing unnecessary design materials and
patterns.

5.3 Pragmatic (viable, feasible)

When developing our design, we considered that our website would be used by many local
users as well as the global users. But, at the beginning we thought of making the web
application famous among the local users. Therefore, we were careful to include only Sri
Lankan currency as a currency for the premium users. As well as instructions on how to
proceed some actions were clearly described and included in the web page. So that users
are well informed about how to use the functionalities effectively. And this is the way we
achieve the pragmatic design value in our design.

5.4 Elegant (efficient, artful, affective)

We tried to keep the user interface simple so that the users can have a well experience in
using the web application. Same colors, fonts, and logos were used throughout all the pages
to avoid the confusion among the users. And same UIs were used in all pages to make the
ser experience efficient and seamless.

5|Page
06.MAIN UI COMPONENTS
Here we are going to consider about 4 main user interface options.

1. Login page
2. User Dashboard
3. Online class interface
4. Class recording access interface

These are the main basic interfaces that the user might interact while accessing the platform.

07.USER FLOW

Sign Up / Sign In

Welcome Page

Live Class Recorded Class

6|Page
08.FINALIZED UI

7|Page
8|Page
09.DESIGN EVALUATION
 Optimize for intermediate users. According to this design principle the UI is designed for all
the users who uses this kind of platform for the first time and for the experts who have
been familiar with these kinds of platforms.
 Less is more- under this principle we have use simple icons that every user can easily
understand the app. When someone sign up and log into the web application, he/she can
easily identify what they must do to achieve their goals. To start a meeting, join a meeting
and schedule a meeting can be easily done.
 All information can be easily found- when users get log in for the first time they have to sign
up, if they are log in for the second time or more, they have to log in. after that under the
user profile all the information of the user can be seen.
 Using persistent headers to maintain context – we have used a simple page navigation.
Search boxes are included in each page. So that users can easily find what they want
without any hesitation.
 Scroll bars used in pages help users to go to a particular list without scrolling the whole
page infinity. For example: in the UI design the scroll bar is used to see all the listed
meetings.

9|Page