HCI PROJECT REPORT

at
Kalasalingam Academy of Research and
Education

(Deemed to be University)
Submitted in partial fulfillment of the requirements for the award of
Master of Computer applications
By
Name: JUSHWANTH KUMAAR
T (Reg no: 39120049)

DEPARTMENT OF COMPUTER APPLICATIONS

SCHOOL OF COMPUTING
Kalasalingam Academy of Research and
Education
ANAND NAGAR – 600123 , TAMILNADU

NOVEMBER 2024

I
 SATHYABAMA
INSTITUTE OF SCIENCE AND TECHNOLOGY
(DEEMED TO BE UNIVERSITY)
Accredited with Grade “A” by NAAC
(Established under Section 3 of UGC Act, 1956)
JEPPIAAR NAGAR, RAJIV GANDHI SALAI, CHENNAI– 600119
www.sathyabamauniversity.ac.in

DEPARTEMENT OF COMPUTER APPLICATIONS

BONAFIDE CERTIFICATE

This is to certify that this Project Report is the Bonafide work of

JUSHWANTH KUMAAR T (39120049) who carried out the project

entitled “ Streamy – UI/UX Design ” under my supervision from

February2022 to March 20

INTERNAL GUIDE: HEAD OF DEPARTMENT

Dr.D.Amuthaguka Dr.K.Balasubramaian

Submitted for Viva Voice Examination held on

Internal Examiner External Examiner

II
 DECLARATION

I JUSHWANTH KUMAAR T hereby declare that the Project Report entitled ‘Video
Streaming App Screen(Streamy)’ done by me under the guidance of

Dr.D.Amuthaguka at Kalasalingam academy of research and education is

submitted in partial fulfillment of the requirements for the award of Master of
computer applications

DATE: Jushwanth Kumaar T

PLACE: CHENNAI SIGNATURE OF THECANDIDATE

III
 ACKNOWLEDGEMENT

I am pleased to acknowledge my sincere thanks to Board of

Management of KARE for their kind encouragement in doing this
project and for completing it successfully. I am grateful to them.

I convey my thanks to Dr.P.Deepalakshmi Dean, School of

Computing, Dr.K.Balasubramanian., Heads of the Department of
Computer Applications for providing me necessary support and
details at the right time during the progressive reviews.

I would like to express my sincere and deep sense of gratitude to my

Project Guide Dr.D.Amuthaguka for her valuable guidance,

suggestions, and constant encouragement paved way for the
successful completion of my project work.

I wish to express my thanks to all Teaching and Non-teaching staff

members of the Department of Computer Applications who were helpful
in many ways for the completion of the project.

IV
 ABSTRACT

This project is an UI/UX design of an app using a program called Figma. The
objective of this project is to design a fully functional user interface of an app.
The idea of this project is to design user interface for a Video Streaming App like
Netflix, Amazon Prime, etc.The objective of this project is to design a fully
functional User Interface for a video streaming app.

The program that will be used for designing this project will
be Figma. The goal is to design a minimalistic and clean
looking User Interface. And the User Experience must be
very fluid and useable.
All the bugs and glitches must be fixed and must be optimized for the targeted
platform.

In evaluating the usability of mobile video streaming applications, the

performance of the applications comes into focus. This is because the
performance of mobile streaming applications affects their usability.

Streamy is a video streaming app which is designed considering the current

user problems with this domain. Its main goal was to design better user
experience and ease of use. A competitive analysis allows us to find out if there
are any gaps in the market and to find out what client competitors are doing. I
started to look at a few competitors or similar platforms, to analyze UI, UX, User
flow, IA and key features. I considered Netflix, Amazon Prime, and Hotstar as my
competitors to start my research.

6
 TABLE OF CONTENTS:

Chapter No. Title. Page no

1. INTRODUCTION

INTRODUCTION TO UI/UX

 HISTORY OF UI/UX 9-13

 USE OF UI/UX

 INTRODUCTION TO FIGMA

 HOW TO USE FIGMA

AIM AND SCOPE

 . AIM
2. 14-18
 SCOPE

 . HOW THE APP WORKS

 . IDEATION MAP

7
3. SYSTEM SPECIFICATION

 SOFTWARE AND 19
HARDWARE REQUIREMENTS

 WORK ENVIRONMENT

APP DESIGN STUDY AND ANALYSIS

4.  ANALYSIS
20-26
 TYPOGRAPHY AND COLORS

 PHASES IN UI/UX PROCESS

RESULTS AND DISCUSSION

5.
 PROJECT IMPLEMENTATION
26 -
 APPLICATION SNAPSHOTS
34
 FINAL BUILD OF PROJECT

CONCLUSION AND FUTURE SCOPE

6.
 CONCLUSION

 FUTURE SCOPE
35 -
 REFERENCES 36

8
 CHAPTER 1

1.INTRODUCTION

Introduction to UI/UX:

The term UI/UX stands for user interface/user experience design and refers to the
practice of designing digital products with a user-first approach.

In other words, the point of UI/UX design is to create a product that will be both
visually appealing and highly pleasant to interact with.

A common misconception is that UI and UX come down to the same thing and that
they are just one discipline, but that is not entirely true. They are separate
disciplines that focus on different aspects of the user’s journey with a digital
product.

However, they overlap in many ways and are so closely connected that they’ve
largely merged into one profession. Let’s take a look at the main differences
between UX and UI before moving on to discuss what the UI/UX design process
involves and why it matters to you.

UI design relates to the appearance and feel of a digital product. It focuses on

visual factors like buttons, fonts, colour schemes, images, interactive elements, etc.

So, what is user experience design, then? Well, it refers to the experience a user
has interacting with your product. Its main focus is enabling seamless goal
achievement for users.

You can look at the difference through the example of a car. The UX would be the
mechanics of your car, like engine power, transmission type or fuel consumption.
The UI would be the aesthetics, such as the livery, paint, rims, dashboard or seats.
Or, you can imagine furnishing a home; think of the UX designer as the construction
manager, and the UI designer as the interior designer.
Ultimately, the final product is meant to be pleasant-looking, functional and give
users a fantastic experience in terms of performance and navigation. You can only
9
have that if both the
UX and UI design are up-to-par, and because they complement each other so
much, today we are increasingly talking about a profession involving both skillsets.

If you’re wondering what the UI/UX design process is like, let us take a brief look at
the crucial stages and the focus of each.

History of UI/UX:

We talk about UX, or user experience, quite a bit. That’s because it’s a fundamental
aspect in the world of web design. To put it plainly, you want your users to have an
experience that’s worth visiting your site. But UX isn’t that new of a term. In fact, the
history of UI and UX goes back as far as web design started.

Over the years, we’ve seen the evolution of UX and UI transform the way people use
the Internet and traverse websites. Here’s a little bit about that evolutionary history.

Cognitive psychologist and designer Don Norman coined the term “user experience” in
the 1990s—but UX predates its name by quite some decades.

Use of UI/UX :
You can use it to do all kinds of graphic design work from wireframing
websites, designing mobile app interfaces, prototyping designs, crafting social
media posts, and everything in between. Figma is different from other
graphics editing tools.

What’s UI design?

User interface (UI) design is about building interfaces with a focus on styling and
interactivity. The UI designer’s goal is to create an interface the user finds easy to
use and aesthetically pleasing.
10
The word “interface” refers to the access point where a user interacts with a
software application (e.g., Figma, Sketch), a browser-based website, or a hardware
device (e.g., a smartphone touchscreen). A UI designer explores all the interactions
and behaviors a user takes with a product to create an interface that best adapts
to the user’s needs.

What’s UX design?

User experience (UX) design is the process designers use to create products that
deliver relevant and valuable experiences to users. According to Don Norman, the
co-founder
of Nielsen Norman Group and the one who coined the phrase “user
experience,” the term includes “all aspects of the end-user’s interaction with
the company, its services, and its products.”

UX designers create meaningful experiences by integrating elements of branding,

marketing, engineering, design, and usability into a product. Their job requires
extensive user research to understand their user’s mindset, feelings, and goals and
to connect this information to the product.

11
INTRODUCTION TO FIGMA

Figma is a collaborative interface design tool that’s taking the design world by
storm. Unlike Sketch, which runs as a standalone MacOS app, Figma is entirely
browser-based, and therefore works not only on Macs, but also on PCs running
Windows or Linux, and even on Chromebooks. It also offers a web API, and it’s
free!

Another big advantage of Figma is that it allows real-time collaboration on

the same file. When using conventional “offline” apps like Sketch and
Photoshop, if designers want to share their work, they typically have to
export it to an image file, then send it via email or instant message.

12
In Figma, instead of exporting static images, we can simply share a link to the
Figma file for clients and colleagues to open in their browser. This in itself saves
significant time and inconvenience in a designer’s workflow. But more
importantly, it means that clients and colleagues can interact more richly with
the work, and review the latest version of the file.

There are two ways to run FIGMA:

Web
To run in mainstream web browsers, FIGMA relies on a source-to-source compiler to
JavaScript. According to the project site, FIGMA was "designed to be easy to write
development tools for, well-suited to modern UI/UX development, and capable of
high-performance implementations. When running Figma code in a web browser
the code is precompiled into JavaScript using the compiler. Compiled as JavaScript,
FIGMA is compatible with all major browsers with no need for browsers to adopt
FIGMA. Through optimizing the compiled JavaScript output to avoid expensive
checks and operations, code written in FIGMA can, in some cases, run faster than
equivalent code hand-written using JavaScript idioms.

App
The Figma mobile app lets you access your files and test prototypes from
anywhere. You can also share files, browse multiple workspaces, and mirror frames
from your desktop to your mobile device.

13
How To Use Figma?

As we mentioned earlier, Figma is a web-based app. All you need to start using the
app is a desktop computer or a laptop with a good browser and an internet
connection. Then you can visit Figma website to register a free account. And you
can start working on your designs right away.

Figma has a very beginner-friendly editor where you can create designs
from scratch or using pre-made templates. There are plenty of resources for
learning how to use Figma.

14
 CHAPTER 2

AIM AND SCOPE

 AIM
Television has become a bygone with the introduction of On-demand video
streaming apps. These are attractive to the users as they can have complete
control over the videos and can watch shows and videos of their favorite
content without any interruptions. A lot of people have already lost interest
in the big black box and are slowly turning towards the online platform to
watch their shows, series, movies, etc.

The video streaming mobile apps have also witnessed a huge spike in the
number of apps that are now available for downloads in the app stores.
Catering to the needs of the users, these apps have a lot of content for them
to choose from and save it to watch later.

The idea of this project is to design user interface for a Video Streaming App
like Netflix, Amazon Prime, etc.

 Scope

Greater Market Reach: With cross-platform applications, you can cover the
broad user base available on Apple app store and Google play store. You
can develop an application that can run on both iPhone and Android that
gives you the advantage of having access to a vast pool of potential users.

Easy Marketing: The behaviour of customers are different on different platforms

and promoting your brand on multiple platforms with a single marketing
strategy is quite daunting. Since iPhone users tend to have a higher purchasing
power as compared to Android users, therefore, you need to look for a marketing
strategy that caters to a specific set of people.
15
And the cross-platform app provides the liberty to promote various media
resources and allow you to appeal to a more extensive section of the potential
user base.

16
 Reduce App Development Cost: By leveraging a single codebase, developers can
develop an application for both native platforms without having to engage two
dedicated development teams.

Codes are Cheaper to Maintain: Since cross-platform applications are developed

with a single code base, therefore, businesses from across the world having
knowledge of working with cross-platform frameworks. By making changes and
updates in one codebase you can easily maintain the app. The final changes will
be automatically reflected in all the applications without having to devote extra
efforts and time on maintaining the codes.

App Testing is Easier: Instead of running different applications on different

platforms, developers can discover errors by merely running a single app on
multiple platforms. They won’t need to devote long hours on testing each
mobile app.

Availability of Better Plugins: Integration of third-party plugins increase the

functionality of the application and speed up the process of mobile app
development. And all the leading cross-platform app development frameworks
like Figma, Cordova, React Native, Ionic are open-source technologies that
provide a great source of plugins. Developers can choose from the various
widgets and can meet the demand of enterprises by customizing the app
leveraging useful plugin libraries.

 HOW THE APP WORKS

Onboarding – such pages in an app help users get a grip on the app’s functionality
and understand which main features it provides.

User registration – this is one of the basic and most important features of
streaming services like Netflix. Registration via email or social media is the

17
most convenient option for users.

Social sign up and sign in – the ability to log in with the help of social media.

User account – users can view their favorite videos, view history, add new ones to the list,

18
update their user information, and control billing.

Search – an advanced content search that will allow users to filter content by
genres, recommendations, release date, etc. Its main goal is to make the
search easy and fast for end-users.

Reviews and ratings – the ability to rate content and leave video reviews.

Push notifications – can be used to notify users about new content releases,
updates, and billing details.

Payment gateways – integration with Braintree, Stripe, PayPal, Apple, Google Pay,
etc., to allow users to pay for content or subscription.

Settings – basic settings should include controlling sound level, activation of

subtitles, play and pause options, selection of video quality, and playback
speed.

Multi-language support – the ability to choose the language of video playback and
turn on subtitles.

Screenshot ban – prevention of making screenshots and video recordings of

the screen. Geo-restriction – ban the use of the service from certain

locations.

Download feature – ability to download content to the local storage of devices.

Admin panel – provides the ability for app admins to moderate content and
users and perform other back-office operations.

Analytics – features for admins that help analyze how users interact with the
application, which features they use, and what content they prefer.

Video quality selection – ability to choose the preferred quality of video content to watch.

19
20
IDEATION MAP:

21
 CHAPTER 3

SYSTEM SPECIFICATION AND METHODS

Software and Hardware Requirements:

 8 Gb Ram or more
 1280 x 800 minimum screen resolution
 8 GB of available disk space minimum
 x86_64 CPU architecture; 2nd generation Intel Core or newer, or AMD CPU
with support for a Windows Hypervisor

 UI/UX, Java and Figma required

 A virtual device must be installed to run the application( Optional)

Work Environment

Font End Developer: The front-end developers generally work at the client

side designing the User Interface of the application and add the

requirements.

Back-End Developer: The back-end developer is a person who is

responsible for the back-end development that interacts with the server.

They oversee Firebase applications.

22
 CHAPTER 4
APP DESIGN STUDY AND ANALYSIS

Analysis

Problems and Solution

There are more problems in developing an app. We faced a lot of challenges while

designing the UI also while developing the backend but those problems could be rectified
easily

Problems

During the initial phase of development, I faced a lot of hurdles such as the
alignment could not be rendered properly, couldn’t fix the image properly, the
design could end up messy, padding was not set properly. Developing an UI/UX is
not an easy task. It takes a lot of creativity, uniqueness and brainstorming sessions
to come up with a nice App design. Only an App developer can talk about the
challenges they go through on regular basis. App developing which are liked and
appreciated by target market and clients are mostly the result of constant
development and regressive critical thinking

On the contrary, there are many challenges faced by UI/UX developers. One such
thing is making the app load faster. During the initial phase, the app could face a
lot of bugs or could load slowly or could crash. These kinds of things would irritate
the client and the app could fail. One of the toughest challenges faced by app
designers is making sure the app works perfectly fine and doesn’t crash.
Sometimes, the app may work a one mobile and wouldn’t work in another one.
App developers should make sure these kinds of things doesn’t happen,
sometimes these issues will develop because of the structure of the mobile or due
to a software. Time spent detecting the source of a problem means a delay in
tackling the problem itself.

23
Advantages:

 Downloading vs. streaming. Users can view videos without having to

download them.

 High playback resolutions. Some services support up to 4K, which is a

higher quality than the standard for over-the-air TV resolution.

 Price. Some video streaming services such as YouTube and Twitch can be
used for free, while other streaming services rely on subscription models
that may cost less than the average cable subscription.

 Platform choice. Users can choose from a number of platforms to stream

videos. TV and movie streaming services typically try to compete with one
another by making exclusive content. Users can view livestreamed
content as it happens, while they can view on-demand content, which is
prerecorded media, whenever they want.

 Content variation. Since the concept of video streaming is so broad,

individuals can stream TV shows, movies, user-generated content from
websites like YouTube, or livestream content online.

Disadvantages:

24
 Scalability: It is important for any app to determine the number of
users, irrespective of their numbers increasing. The back-end
architecture should be scalable so that the numbers are calculated
without any hassle.

 Security: Video streaming apps might face plagiarism in content and

people might steam content from their platform. Therefore, it is
necessary for them to buy proper rights, access control, and encryption
details of each video they put up on their app or website.

 Flexibility: There are phones of different formats including iOS,

Windows, and Android, along with several digital devices like tablets,
laptops from which the users want to access a video. Therefore, the
video providers should try to make a platform or an app which
supports all devices and formats.Storage of data on a large scaleIt is
comparatively expensive and slow. Even the bandwidth offered is quite
intensive.

 Live & On-Demand Video Streaming Apps: This is also a challenge as

the infrastructure is expensive and the scope of reusability if is
low.

 Content Transcoding: It is another challenge as saving the larger data

sets can be expensive as the procession of numerous jobs is done in
different formats.

 Content Distribution Analytics: A video streaming platform has to keep

a track of its users through its analytics. However, these analytic
reports lack details and are usually on the expensive side.

25
UX Should Be Seamless Across Devices :

Regardless of whether a user is accessing your services on a mobile app, desktop,

or mobile website, the transition between them should be seamless and consistent.
All the design elements should mirror each other and that’s one of the important
UX Design Principles (for example, you shouldn’t use red for the desktop and green
for the mobile).
With the proliferation of new devices in the market and the rise of mobility, users
expect brands to deliver an accessible, efficient, and movable experience as they
change devices.
As a result, it is no longer enough for brands to provide solutions for various
channels; they must blur the lines between multiple devices’ experiences.
For example, if a user is traveling and wants to continue watching the show on his
mobile that he was watching on his desktop last night, he should be able to move
seamlessly without difficulty.
A consistent experience doesn’t just make things simpler for users, it also creates
brand awareness.
26
TYPOGRAPHY AND COLORS:

PHASES IN UI/UX PROCESS:

27
1. Product Definition
Product Definition is the first phase involved in the user design process. The team
responsible for this will collect the user requirements based on their business
environment.

It’s very much essential because understanding about the real scope of the
product and their existence happens in this phase.

It’s simple; before beginning the work, enlighten your UI/UX designers about the
requirements!

People involved in this phase are Design Team, Business Manager, and Product
Manager. The entire team should consult with clients in their environment. Analyze
their needs within the framework of your operation.

The significant outcomes of this phase are User Personas, User Stories, and
Use Case Diagrams.

2. Research
The research is the most crucial element for a designer. The designing team
studies how the present system works for the current client proposal. The three
main functions at this stage are:

 Have an understanding of the competition.

 Making a thorough study of your existing domain.
 Going through competitor strategy to test outcomes.
The Research process should also involve an understanding of the latest UI/UX
trends, design principles, and guidelines.

3. Analysis

In this phase, make use of the things collected in the Research phase. With the
help of the information received, create hypothetical personas, and experience
maps.

28
 Hypothetical Personas: Creating hypothetical scenarios help the
designers to know about the various persons who will be the users of
your product. It allows

29
 depicting the realistic representation of the ultimate product. The
design team can figure out how it is going to look like after delivery.
 Experience Maps: Experience maps shows the user flow within your
final product. All these are done using visual representations through
proper interactions with the client in the product definition phase.

4. Design

In the design process, we finally end up giving life to ideas that we have collected
in the above three steps. It’s time to work on the final graphics now. The design
team will execute the final design in this phase.

The significant outcomes of the designing phase are:

Sketching: The designing phase begins with sketching. The designers usually make
hand made sketches to visualize the concept with simple terms. The UX/UI
designers can stick to a particular option after the sketching process.

Creating wireframes: A wireframe is a visual structure that depicts the page

hierarchy and the elements in the product. A wireframe is considered as the
backbone of the product. It’s also called the skeleton of the design. It’s mostly
about the overall look of the final product.

Creating Prototypes: Prototypes concentrate on the feel of the UI/UX product that
one is designing. It’s more about the interaction experience. Prototypes give you
the effect of a simulator.

Creating Design Specifications: Design specification includes user flow and task
flow diagrams. It depicts the overall working and the style requirements of the
UI/UX product. It describes the processes and graphical elements to create
amazing user experiences.

30
5. Validation or Testing
Testing is the phase that determines the overall quality of the end- product. The
testers make notes of the things that have to be improved and send them back to
the respected team for correcting the errors.

While evaluating your final product, there are certain factors that one needs to
keep in mind. They are as follows:

 Is the system user-friendly?

 Is it flexible and easy to operate?
 Does it solve the customer’s issue?
 Is it credible and attracts the users to come back every time they
need your service?

CHAPTER 5

RESULTS AND DISCUSSION

Project Implementation:

 At first, we have to create a frame in Figma to get started with the project.

 We can add the required texts to the frame by creating a text layer.

 We can also add designs and colors to the frame to make it aesthetic.

 Here we have created a design for video streaming app so we should think
how creative we can use the designs, so that the design will make the app
standout to others in the video streaming segment.

 To make sure that the spacings are correct, we can add a column grid.

31
  After completing the app screen, we can align and refine the layout.

 To generate the code for the screen, figma has a pre-installed plugin in the
library called Inspect.

 This converts the UI screen to HTML code which can be further used in
browser for our use. This makes figma an interactive and an easy software to
use.

Application Snapshots:

Overview:

32
Splash Screen ->

33
 .

<- Login Screen

Registration Screen->

34
 <- Welcome Screen

Home Screen->

35
 <- Movies list Scrolling Screen

Series list Scrolling Screen ->

36
 <- Play Screen

Watch Party Screen->

37
 <- Account Screen

Settings Screen ->

38
 <- Payment Screen

Help Screen ->

Final Build of Project :

https://www.figma.com/file/yHS4QrunrJe0CJgb7E0O00/Video-
Streaming- App?node-id=90%3A170

39
 CHAPTER 6

CONCLUSION AND FUTURE SCOPE

Conclusion:

As a Conclusion, I can say the internship was a great experience. Thanks to this
project, I acquired deeper knowledge concerning my technical skills, but I also
personally benefited. Currently, UI/UX is used as a major application while developing
mobile apps and it has become a popular language worldwide. If we surf the internet,
we can find number of apps developed using UI/UX. I learn to live in a different
environment from the one I am used to. Indeed, I grew more independent in work and
in everyday life. I realized that I could do more things than I thought like learning new
things by myself.

There are huge opportunities available for the students who want to work in this field.
Many private and public organizations hire UI/UX developers for designing mobile
apps. With the rapid advent of online industry, the demand of UI/UX developers is
increasing, and this has created a huge job opportunity for the aspirants in the
upcoming days. Also, an experienced person in this field can also work as a freelancer;
there are many online companies which provide online projects to the individuals.

Future Scopes:

 Can work as a UI/UX developer

 Can work as a Software Engineer
 Can work as a freelance mobile app’s developer

40
REFERENCES

[1] www.Google.com

[2] www.GreekofGreeks.com

[3] https://console.firebase.google.com/

[4] https://UI/UX.dev/?gclsrc=ds&gclsrc=ds

[5] https://developers.googleblog.com/2019/05/UI/UX-io19.html

41