Ui and Ux Development: Visvesvaraya Technological University

Download as pdf or txt
Download as pdf or txt
You are on page 1of 20

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Belagavi-590 018, KARNATAKA.

AN INTERNSHIP REPORT ON
“UI AND UX DEVELOPMENT”
Submitted in partial fulfilment of the requirements for the
Internship/Professional Practice(17CS84) course of 8th semester
BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE AND ENGINEERING
Submitted by
Pujit Y G (1JS17CS073)
Under the guidance of
Mr. Renuka Rajendra B, B.E., M. Tech.
Assistant Professor
Department of Computer Science and Engineering
JSSATE, Bengaluru

JSS ACADEMY OF TECHNICAL EDUCATION-BENGALURU


Department of Computer Science and Engineering
2020 – 2021
JSS MAHAVIDYAPEETHA, MYSURU
JSS ACADEMY OF TECHNICAL EDUCATION
JSS Campus, Uttarahalli-Kengeri Main Road, Bengaluru - 560060
Department of Computer Science and Engineering

CERTIFICATE
This is to certify that Internship work entitled “UI AND UX DEVELOPMENT” has been
successfully completed by Mr. Pujit YG, USN: 1JS17IS073, a bonafide student of JSS
ACADEMY OF TECHNICAL EDUCATION, BENGALURU in partial fulfilment of
the requirements of the 8th semester for award of degree in Bachelor of Engineering in
Computer Science and Engineering of Visvesvaraya Technological University,
Belagavi during academic year 2020-2021. The Internship report has been approved as it
satisfies the academic requirements in respect of internship work for the said degree.

Mr. Renuka Rajendra B Dr. Naveen N C


Assistant Professor Professor and Head
Department of CSE Department of CSE
JSSATE, Bengaluru JSSATE, Bengaluru

Name of the Examiners Signature with date

1)…………………………. …………………………

2)…………………………. …………………………
COMPANY CERTIFICATE
COMPANY PROFILE
Company: Pulsetone Industries.

Industries: Telecommunication Industry.

Location: Rajajinagar, Bengaluru - 560010.

Position: UI and UX developer.

Team Size: 16 members.

Headquarters: Bengaluru, Karnataka.

Type: Privately held.

Joining date: 3rd August, 2020.

Products: Pulse/tone switchable push button, Software Testing, Network Training.

Founder & Chairman: Mr. D. Samynathan

Team Lead: Tejas Prakash

About the company: Pulsetone Industries was incorporated in the year 1985 by an ex-NRI
Post Graduate electronic engineer. Ever since the inception, Pulsetone has been in the
business of telecom equipment manufacturing. In the year 1999, the Centre for Telecom
Studies was started principally to cater to the INHOUSE demands. Some of the clients for
this company are Nokia Siemens Networks P Ltd, Ericsson India P Ltd, ALUMS, Huawei,
ZTE, Idea Cellular, Sasken Networks Engineering Ltd, Wipro Infotech, Cellcomm
Solutions, AIRCOM International, TVS Interconnect Systems, METROTEL, Arya
Communications P Ltd, ICOMMTELE, O to F, REECOMP, Zeppelin, Zephyr Systems, R.
B Comptec, etc.

Vision and Mission: All training needs of the ICT Industry under one Roof. Upcoming
world class ultra modern residential training center on 6 acres of Land in Bangalore and in
Mysore . Proposed facilities at new center. High Tech Class Rooms. 24 X7 Labs, Library,
Recreation etc. MOU with BSNL RTTC (Regional Telecom Training Centre), Mysore, to
share their equipment and faculty resources.

i
ABSTRACT
Internship is one of the ways to get practical experience of the theoretical knowledge that
we gain during the course in college. I interned at a company named Pulsetone Industries,
Bengaluru. It has been a great exposure in the company. Having an opportunity definitely
helps us understand how the corporate world really works. Working on new technologies,
new concepts always help us get better at what we do. Working as an intern not only adds
value to the knowledge but also adds value to the life experience. It makes us get ready for
the real-world experience. The company has supported and helped throughout the whole
internship period. Having a good start is important to believe in oneself and this opportunity
definitely helped me do that. The college has a great hand in making this happen to all the
students. The duration of time that I interned in the company not just helped me get better
at the subject knowledge but also helped me get better at coordinating with the colleagues
and also learn ways to understand every role in the company better. Having interned at a
start-up helped me know the end-to-end working.

ii
ACKNOWLEDGEMENT
I express my humble pranamas to His Holiness Jagadguru Sri Sri Sri Shivarathri

Deshikendra Mahaswamiji who has showered their blessings on us for framing our career

successfully.

The fulfilment and rapture that go with the fruitful finishing of any assignment
would be inadequate without the specifying the people who made it conceivable, whose
steady direction and support delegated the endeavours with success.

I would like to profoundly thank Management of JSS ACADEMY OF


TECHNICAL EDUCATION-BENGALURU for providing such a healthy environment
to carry out this Seminar work.

I take immense pleasure in thanking Dr. Mrityunjaya V Latte, Principal, JSSATE,


Bengaluru, for being kind enough to provide us with an opportunity in this institution.

I’m also thankful to Dr Naveen N C, Professor and Head of Department of


Computer Science and Engineering, for his co-operation and encouragement at all moments
of approach.

I’m also thankful to our internship guide Mr. Renuka Rajendra B, Assistant
Professor, for his constant support and encouragement.

I’m also thankful to the Internship coordinators Dr Prasad M R and Mr Niranjan


C Kundur, for their cooperation and support.

I wish to thank every teaching and non-teaching faculty of out department for always
being there to support and guide us.

Pujit Y G

1JS17CS073

iii
TABLE OF CONTENTS
Chapter title Page No
Company Profile i

Abstract ii

Acknowledgement iii

Table of contents iv

Chapter 1: Introduction 1

1.1 About the Company 1

1.2 Services Provided 2

1.3 Promoters Introduction 2

Chapter 2: Internship 4

2.1 Task Performed 4

2.2 Technologies used 5

2.2.1 Adobe XD 5

2.2.2 MockFlow 5

2.2.3 HTML 5

2.2.4 CSS 6

2.2.5 Bootstrap 6

2.2.6 JavaScript 6

2.2.7 jQuery 7

2.3 Communication and Collaboration VC Platform 8

2.3.1 Jira 8

2.3.2 Flack 8

2.3.3 GitHub 9
2.4 Personal role and Observation 9

2.5 Activity 10

Chapter 3: Conclusion 11

References 12
UI AND UX DEVELOPMENT

Chapter 1

INTRODUCTION
1.1 About the Company
Pulsetone Industries was incorporated in the year 1985 by an ex-NRI Post Graduate
electronic engineer. Ever since the inception, Pulsetone has been in the business of telecom
equipment manufacturing. In the year 1999, the Centre for Telecom Studies was started
principally to cater to the INHOUSE demands.

However, due to increased popularity & demand for these courses, this training center now
caters to everyone. This center for Telecom studies has completed 62 successful batches as
on 15th August 2005. Students from all over India and from overseas countries like Kuwait,
Saudi Arabia, Malaysia and Tanzania have benefited from these training programs. The
center is run by D. Samynathan, our MD, who has massive experience in the field. We
specialize in offering chip level servicing courses for mobile phones. On a national and
global scale, the Telecom Industry has grown like a wildfire. The communication and
information sector of our economy leads all other areas in job growth and the development
of new products and services. India is among the few countries which have realized the
potential of Telecom & IT in the process of economic growth.

These activities in India as well as worldwide will bring a massive boost to the employment
opportunities and in the process strengthen the economy. In the year 2006, the annual
revenue in the Indian Telecom Industry is expected to exceed Rs. 1,25,000 crores. With all
these developments the tele density in India still stands at nine phones/100 persons as
compared to 55/100 in China, 95/100 in Europe and 110/100 in the USA. Therefore, one
can imagine the quantum of equipment, finances and the massive number of trained telecom
engineers and technicians that are required. Undoubtedly the telecom sector is slated to
undergo unprecedented growth in the years to come.

Pulsetone Industries has the best Telecom Trainers who have over 30 years’ experience and
5+ years in the field of Drive Test and Optimization. With respect to Software Testing, they
have 4+ years industry experience in Software Manual Testing and Protocol Testing. They
also have 10+ years’ experience in IT Industry Technical Architect with respect to the IT
and Software field. This company employs highly skilled professionals, with a good
number of experiences in Human Resource management, who provide various soft skills
training like Business English, Professional Writing, etc.

Dept of CSE, JSSATEB 2020-2021 1


UI AND UX DEVELOPMENT

1.2 Services Provided


The equipment sector comprises companies that manufacture products that are used by both
customers and other companies in the same sector. Customers use these products to access
telecommunications services, whereas other companies use these products to create and
maintain telecommunications infrastructure and deliver telecom services. The equipment
sector includes satellite and broadcast network equipment, wireless and wireline
equipment, as well as computer networking equipment. This is also composed of wired,
wireless services and internet and other broadband services.

This industry is highly sensitive to the slightest change in regulatory, technological, and
economic factors and has its own share of challenges largely stemming from these factors.
With wireless and broadband providing the needed momentum to their growth, the industry
players adopt unique strategies to overcome these challenges and move forward to connect
people to people and organizations.

This company also manufactures various telephone, and wireless gadgets. They provide
world class training to engineers, the course is about 8 to 10 weeks of contact classes which
consist of telecom, testing, IT and soft skills sessions. They also refer the trainees to various
companies. The company also provides various materials for the trainees. Currently the
company admits only male candidates due to various limitations.

Some of the technologies this company is currently working on is Signaling, Switching,


transmission and datacom. They also have experience in advanced concepts like 3G, GSM,
GPRS, EDGE and COMA. The company also does site visits for installation,
commissioning and OAM field work. Some of the well-known clients for Pulsetone
industries are BSNL, Ericsson, Wipro, Idea cellular.

1.3 Promoters Introduction


Pulsetone Industries was established by Mr. D. Samynathan. He has completed M.Tech in
Electronics & Communication and also MBA in Telecom Management. He played a key
role in establishing the Department of Computer Science and Engineering in a well-known
institute named Bangalore Institute of Technology (BIT) situated in Bengaluru, Karnataka.

He had a global career span of 17 years with companies like HCL, IBM and Intel before
floating Pulsetone Industries. He started out in the business world at a very young age. He’s
come a long way since then and has achieved a lot within his lifetime. Currently he is the
chairman of the company, Pulsetone Industries who plans courses and also manages the
organization.

Dept of CSE, JSSATEB 2020-2021 2


UI AND UX DEVELOPMENT

A Social Entrepreneur with a vision of creating employment opportunities for educated and
deserving youth by rendering specialized training. Highly passionate about teaching &
mentoring the generation Y on their career path. He derives a lot of satisfaction by
successfully placing the student in their first job. All faculty from this organization are from
the Telecom industry with practical industry expertise. This organization has world class
industry experts’ trainers with over 30 years of experience.

Dept of CSE, JSSATEB 2020-2021 3


UI AND UX DEVELOPMENT

Chapter 2

INTERNSHIP
2. 1 Task Performed
● The Company introduced the product and the whole process of product
development in the company.

● It ensured that daily stand-ups or team meeting to get familiar with the proceedings
of the company. Knowing what the others do is also a part of the learning as
interaction with them is required to collaborate

● There were a number of activities held to make familiar with the people around in
the company.

● Agile methodology of developing software products was introduced.

● The interns with different roles were given different lists of technologies which they
would be working on shortly.

● For a certain period of time, the interns were asked to design various wireframes
and workflows which would render useful during development of the project.

● Eventually our team were put into the front-end development, where we designed
various parts of the webpages.

● The development process is a long process that requires coordination to complete


it, hence our team got together virtually twice a day to discuss the work.

● Our team attended daily stand-ups to give updates on the progress of the work and
to discuss the various difficulties we faced during development.

● Each of the tasks assigned to our team were broken down into many parts, each
subtask was given a deadline.

● Our team were asked to share and collaborate our work using GitHub.

● The situation with COVID-19 had made all the IT companies to work from home
and this made all the company employees as well as the interns to work from home.

Dept of CSE, JSSATEB 2020-2021 4


UI AND UX DEVELOPMENT

2.1 Technologies used


This company is well equipped with Software engineers who are very much aware of
modern technologies.

2.1.1 Adobe XD

Adobe XD (also known as Adobe Experience Design) is a vector-based user experience


design tool for web apps and mobile apps, developed and published by Adobe Inc. It is
available for macOS and Windows, although there are versions for iOS and Android to help
preview the result of work directly on mobile devices. Adobe XD supports website
wireframing and creating click-through prototypes. Adobe XD creates user interfaces for
mobile and web apps. Many features in XD were previously either hard to use or nonexistent
in other Adobe applications like Illustrator or Photoshop. XD supports and can open files
from Illustrator, Photoshop, Photoshop Sketch, and After Effects. In addition to the Adobe
Creative Cloud, XD can also connect to other tools and services such as Slack and
Microsoft Teams to collaborate. XD is also able to auto-adjust and move from macOS to
Windows. For security, prototypes can be sent with password protection to ensure full
disclosure

2.1.2 MockFlow

MockFlow is a powerful tool for drawing UI wireframes that also extends as a full planning
suite for product design. Full featured and intuitive editor that brings your concepts to life.
Thousands of pre-built components and layouts to draw any UI, Play, review or present
your UI drawings in preview mode. Draw UI collaboratively in MockFlow with its
powerful cloud features such as role-based permissions, real time editing, annotated
comments and design approvals to name a few.

2.1.3 HTML

The Hypertext Markup Language, or HTML is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by technologies
such as Cascading Style Sheets and scripting languages such as JavaScript. HTML
elements are the building blocks of HTML pages. With HTML constructs, images and other
objects such as interactive forms may be embedded into the rendered page. HTML provides
a means to create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated
by tags, written using angle brackets.

Dept of CSE, JSSATEB 2020-2021 5


UI AND UX DEVELOPMENT

2.1.4 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language such as HTML CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout,
colors, and fonts. This separation can improve content accessibility, provide more
flexibility and control in the specification of presentation characteristics, enable multiple
web pages to share formatting by specifying the relevant CSS in a separate .css file which
reduces complexity and repetition in the structural content as well as enabling the .css file
to be cached to improve the page load speed between the pages that share the file and its
formatting.

2.1.5 Bootstrap

Bootstrap is a HTML, CSS & JS Library that focuses on simplifying the development of
informative web pages (as opposed to web apps). The primary purpose of adding it to a
web project is to apply Bootstrap's choices of color, size, font and layout to that project. As
such, the primary factor is whether the developers in charge find those choices to their
liking. Once added to a project, Bootstrap provides basic style definitions for all HTML
elements. The result is a uniform appearance for prose, tables and form elements across
web browsers. In addition, developers can take advantage of CSS classes defined in
Bootstrap to further customize the appearance of their contents. For example, Bootstrap has
provisioned for light- and dark-colored tables, page headings, more prominent pull quotes,
and text with a highlight.

Bootstrap also comes with several JavaScript components in the form of jQuery plugins.
They provide additional user interface elements such as dialog boxes, tooltips, and
carousels. Each Bootstrap component consists of an HTML structure, CSS declarations,
and in some cases accompanying JavaScript code. They also extend the functionality of
some existing interface elements, including for example an auto-complete function for
input fields.

2.2.6 JavaScript

JavaScript, often abbreviated as JS, is a programming language that conforms to the


ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-
paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation,
and first-class functions. Alongside HTML and CSS, JavaScript is one of the core

Dept of CSE, JSSATEB 2020-2021 6


UI AND UX DEVELOPMENT

technologies of the World Wide Web. Over 97% of websites use it client-side for web page
behavior, often incorporating third-party libraries. All major web browsers have a dedicated
JavaScript engine to execute the code on the user's device. As a multi-paradigm language,
JavaScript supports event-driven, functional, and imperative programming styles. It has
application programming interfaces (APIs) for working with text, dates, regular
expressions, standard data structures, and the Document Object Model (DOM). The
ECMAScript standard does not include any input/output (I/O), such as networking, storage,
or graphics facilities. In practice, the web browser or other runtime system provides
JavaScript APIs for I/O. JavaScript engines were originally used only in web browsers, but
they are now core components of other software systems, most notably servers and a variety
of applications. Although there are similarities between JavaScript and Java, including
language name, syntax, and respective standard libraries, the two languages are distinct and
differ greatly in design.

2.1.7 jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and
manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source
software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the
10 million most popular websites. Web analysis indicates that it is the most widely
deployed JavaScript library by a large margin, having at least 3 to 4 times more usage than
any other JavaScript library. jQuery’s syntax is designed to make it easier to navigate a
document, select DOM elements, create animations, handle events, and develop Ajax
applications. jQuery also provides capabilities for developers to create plug-ins on top of
the JavaScript library. This enables developers to create abstractions for low-level
interaction and animation, advanced effects and high-level, theme able widgets.

The modular approach to the jQuery library allows the creation of powerful dynamic web
pages and Web applications. jQuery also provides a paradigm for event handling that goes
beyond basic DOM element selection and manipulation. The event assignment and the
event callback function definition are done in a single step in a single location in the code.
jQuery also aims to incorporate other highly used JavaScript functionality (e.g., fade ins
and fade outs when hiding elements, animations by manipulating CSS properties). jQuery
was originally created in January 2006 at BarCamp NYC by John Resig, influenced by
Dean Edwards' earlier cssQuery library. It is currently maintained by a team of developers
led by Timmy Willison (with the jQuery selector engine, Sizzle, being led by Richard
Gibson).

Dept of CSE, JSSATEB 2020-2021 7


UI AND UX DEVELOPMENT

2.2 Communication and Collaborative VC Platform


2.2.1 Jira

Jira is primarily designed for software development, workflow management systems. It has
been utilized as a project management solution by many project teams. This application is
a proprietary issue tracking product developed by Atlassian that allows bug tracking and
agile project management. According to Atlassian, Jira is used for issue tracking and project
management by over 180,000 customers in 190 countries. Some of the organizations that
have used Jira at some point in time for bug-tracking and project management include
Fedora Commons, Hibernate, and the Apache Software Foundation, which uses both Jira
and Bugzilla. Jira includes tools allowing migration from competitor Bugzilla. Jira is
offered in four packages:

1. Jira Work Management is intended as generic project management.

2. Jira Software includes the base software, including agile project management
features (previously a separate product: Jira Agile).

3. Jira Service Management is intended for use by IT operations or business service


desks.

4. Jira Align is intended for strategic product and portfolio management.

2.2.2 Slack

Slack is a proprietary business communication platform developed by American software


company Slack Technologies. Slack offers many IRC-style features, including persistent
chat rooms (channels) organized by topic, private groups, and direct messaging. Slack
offers many IRC-style features, including persistent chat rooms (channels) organized by
topic, private groups, and direct messaging. Content, including files, conversations, and
people, is all searchable within Slack. Users can add emoji buttons to their messages, on
which other users can then click to express their reactions to messages.

Slack brings team communication and collaboration into one place so you can get more
work done, whether you belong to a large enterprise or a small business. Tick off your to-
do list and make progress on your projects by bringing the right people, conversations, tools
and information you need together. Slack is available on any device, so you can find and
access your team and your work whether you’re at your desk or on the go.

Dept of CSE, JSSATEB 2020-2021 8


UI AND UX DEVELOPMENT

2.2.3 GitHub

GitHub, Inc. is a provider of Internet hosting for software development and version control
using Git. It offers the distributed version control and source code management (SCM)
functionality of Git, plus its own features. It provides access control and several
collaboration features such as bug tracking, feature requests, task management, continuous
integration and wikis for every project. At the heart of GitHub is Git, an open source project
started by Linux creator Linus Torvalds. Matthew McCullough, a trainer at GitHub,
explains that Git, like other version control systems, manages and stores revisions of
projects. Although it’s mostly used for code, McCullough says Git could be used to manage
any other type of file, such as Word documents or Final Cut projects. Think of it as a filing
system for every draft of a document.

GitHub is a Git repository hosting service, but it adds many of its own features. While Git
is a command line tool, GitHub provides a Web-based graphical interface. It also provides
access control and several collaboration features, such as a wikis and basic task
management tools for every project.

2.4 Personal Role and Observation


Role: UI & UX Developer

As an UI-UX Developer , I was responsible for delivering the best online user experience,
which makes my role extremely important for the success and ensuring customer
satisfaction and loyalty.

I was designing graphic user interface elements, like menus, tabs, forms, and widgets using
various methods and the latest technology.

My duties and responsibilities were planning and implementing new designs, optimizing
existing user interface designs, testing for intuitivity and experience, communicating with
clients to understand their business goals and objectives, developing technical and business
requirements and always strive to deliver intuitive and user-centered solutions, combining
creativity with an awareness of the design elements, creating prototypes for new product
ideas, testing new ideas before implementing and conducting an ongoing user research.

The observations made were with respect to the working of the corporate world. The way
responsibilities are distributed and also the way time tracking is done with respect to
completion of the tasks and their estimates. The company policies, its working and the
coordination definitely adds to the observation.

Dept of CSE, JSSATEB 2020-2021 9


UI AND UX DEVELOPMENT

2.5 Activity
Due to current Covid-19 pandemic, the company Pulsetone Industries decided to shift
major part of the operations virtual. The company planned to build an ERP for easy
management of business. Enterprise resource planning (ERP) refers to a type
of software that organizations use to manage day-to-day business activities such as
accounting, procurement, project management, risk management and compliance, and
supply chain operations.

Some of the tasks included in the project were Trainer-Trainee interaction platform,
Inventory Management System, Payment Portal, Mobile service registration portal. Our
team was assigned to Trainee-Trainer engagement portal. We first gathered and evaluated
user requirements, in collaboration with product managers and engineers. Some of the other
tasks our team succeeded in presenting design ideas using storyboards, process flows and
sitemaps and designing graphic user interface elements, like menus, tabs and widgets using
Adobe XD and MockFlow.

Later our team translated creative software design concepts such as wireframes, workflow
and ideas into reality using front end technologies such as Bootstrap, CSS, JavaScript and
jQuery. The task of a user experience designer is to design and create a software interfaces
by prioritizing Users and business requirements over technology limitations and
constraints. Our team participated in the design process as a consultant on possibilities,
takes the design that is created by the UX Designer as an input, understands it, knows
enough to appreciate it, work through the constraints and execute the design vision into
engineered reality.

In conclusion, our team succeeded in delivering the expected outcome in under forty days.

Dept of CSE, JSSATEB 2020-2021 10


UI AND UX DEVELOPMENT

Chapter 3

CONCLUSION
The internship experience so far has really been useful as it helps us get a better
understanding of how the corporate world works. It has really added value to whatever we
have learnt in college. I have learnt many new things after interning. Having the experience
gives a good edge for learning as that is the best experience in one's life. Having interned
at a startup truly adds value to the knowledge that one has. I truly am thankful for all the
coordination that I have received from college, company and everyone that supported me
throughout. This is one of the cherished experiences.

In a nutshell, this internship has been an excellent and rewarding experience. I can conclude
that there have been a lot I’ve learnt from my work at Chemosis. Needless to say, the
technical aspects of the work I’ve done are not flawless and could be improved provided
enough time. As someone with no prior experience with Node.js whatsoever I believe my
time spent in research and discovering it was well worth it and contributed to finding an
acceptable solution to build a fully functional web service. Two main things that I’ve
learned the importance of our time-management skills and self-motivation.

Dept of CSE, JSSATEB 2020-2021 11


UI AND UX DEVELOPMENT

REFERENCES

1. https://www.pulsetoneindustries.com
2. https://en.wikipedia.org/wiki/Main_Page
3. https://fb.watch/v/15oY7takL/

Dept of CSE, JSSATEB 2020-2021 12

You might also like