0% found this document useful (0 votes)
29 views55 pages

Sajal Intern Report Final

Uploaded by

testuser2549
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
29 views55 pages

Sajal Intern Report Final

Uploaded by

testuser2549
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

STUDENT DECLARATION

I hereby declare that this internship project entitled “UI/UX Design for Maulik”
submitted to the office of the Dean, Faculty of Management, Tribhuvan University, is
a result of my internship study carried out in the year 2022 at Spyder’s Lab Pvt. Ltd.,
Sorkhakhutte, Kathmandu for the partial fulfillment of the requirement of the Bachelor
of Information Management (BIM). It has not been previously submitted to any other
university or anywhere else.

Sajal Maharjan

TU Roll No.:

TU Regd. No.:

Asian School of Management and Technology


ACKNOWLEDGEMENT
This project is prepared in partial fulfillment of the requirement for the degree of
Bachelor in Information Management (BIM). As conceptual knowledge is not enough
for successful practice in Information Technology, it is necessary to gain more
knowledge and experience through real-world projects. I would like to extend my
appreciation to Tribhuvan University and the Asian School of Management and
Technology, for providing us the opportunity to take part in a real-world working
environment.

The satisfaction and success of completion of this task would be incomplete without
heartfelt thanks to people whose constant guidance, support, and encouragement made
this work successful. On doing this internship, I have been fortunate to have help,
support, and encouragement from many people we would like to acknowledge them
for their cooperation.

I would also like to extend my heartfelt thanks to Mr. Surya Bam, for the guidance he
has provided in the internship, without whom this endeavor would have never been
completed.

At last, I would like to thank my peer and colleagues who have helped me throughout
this internship through discussions of ideas, sharing their knowledge, and giving their
opinion about things that put me in a dilemma

i
ABSTRACT
I have chosen Spyders Lab Pvt. Ltd. for my internship. I worked in the field of UI/UX
Design. The main objective of this internship was to know about UI/UX Design and
use my theoretical knowledge in a practical field and also to gain practical knowledge
of the workplace. Through this internship, I gained knowledge and experience in all
aspects of UI design in an organization, including the process of how to design and
developing the UI of websites and apps needed by clients. UI helps in designing the
system and UX helps to make sure the system is easy to use and handle by the clients.

The software is a digital e-commerce app named ‘Maulik’ for users that enables them
to replace traditional shopping experience with digital shopping enabling them to make
all their shopping through their phone conveniently. Maulik is a mobile app, online e-
commerce & service provider in Nepal. It is an emerging online shopping solution in
Nepal. It allows users to shop for a range of services and products like basic utility,
food products, dairy products, meat products, fruits, and many more. The main aim of
this application is to digitize every shopping experience that encompasses fiat money
by providing an easy-to-use, convenient, intuitive application that is accessible to all
users anywhere. Maulik envisions creating a cashless economy by covering every part
of the payment sector (Big/Small, Retail/Wholesale, Public/Private), providing quality
service, and becoming the most preferred shopping e-commerce service provider in
the country.

ii
TABLE OF CONTENTS
ACKNOWLEDGEMENT..................................................................................... i

ABSTRACT ......................................................................................................... ii

LIST OF TABLE ................................................................................................. v

LIST OF FIGURE .............................................................................................. vi

LIST OF ABBREVIATIONS............................................................................. vii

CHAPTER ONE: INTRODUCTION .................................................................. 1

1.1 Background ............................................................................................ 1

1.2 Objectives of system ............................................................................... 1

1.3 Methodology .......................................................................................... 1

1.3.1 Organization Selection ........................................................................ 2

1.3.2 Placement and Duration ....................................................................... 2

1.3.3 Work Procedure .................................................................................. 2

1.3.4 Tools Used .......................................................................................... 4

1.3.5 Activities Performed............................................................................ 4

1.4 Roles and Responsibilities ....................................................................... 4

1.5 Limitations of the Study .......................................................................... 5

CHAPTER TWO: INTRODUCTION TO INDUSTRY ...................................... 6

2.1 Introduction to Information Technology................................................... 6

2.2 Introduction to Software Industry ............................................................ 7

2.3 Objectives of IT in Business .................................................................... 7

2.4 Opportunities in Nepali IT Sector ............................................................ 8

2.5 Challenges in Nepali IT Sector ................................................................ 9

CHAPTER THREE: INTRODUCTION TO ORGANIZATION...................... 10

3.1 Introduction to Organization .................................................................. 10

3.2 Services Offered ................................................................................... 10

iii
3.3 Contact Information .............................................................................. 12

3.4 Organization Structure .......................................................................... 12

CHAPTER FOUR: ANALYSIS OF ACTIVITIES ........................................... 14

4.1 Introduction to the System ..................................................................... 14

4.2 Functions of the System ........................................................................ 14

4.3 Requirement Specification..................................................................... 15

4.3.1 Functional Requirements ............................................................... 15

4.3.2 Non-Functional Requirement ............................................................. 16

4.4 Feasibility Analysis ............................................................................... 17

4.4.1 Economic Feasibility ......................................................................... 17

4.4.2 Operational Feasibility ...................................................................... 17

4.4.3 Technical Feasibility ......................................................................... 17

4.5 System UI/UX Design and Modeling ..................................................... 18

4.5.1 UI Design Process ............................................................................. 18

4.5.2 Information Architecture ................................................................... 20

4.5.3 Wireframing...................................................................................... 22

4.5.4 UI Design ......................................................................................... 25

4.5.5 Prototyping ....................................................................................... 31

4.5.6 Testing .............................................................................................. 37

4.6 Other Activities ..................................................................................... 40

4.6.1 Landing Page Design for an architect company .................................. 40

CHAPTER FIVE: CONCLUSION AND RECOMMENDATION .................... 41

5.1 Findings................................................................................................ 41

5.2 Conclusion............................................................................................ 42

5.3 Recommendation .................................................................................. 42

REFERENCES .................................................................................................. 43

iv
LIST OF TABLE

Table 1 Placement and Duration ............................................................................. 2


Table 2 UI Testing Scores .................................................................................... 38
Table 3 UX Testing Scores ................................................................................... 39

v
LIST OF FIGURE

Figure 1 Gantt Chart............................................................................................... 3


Figure 2 Tools Used ............................................................................................... 4
Figure 3 Organization Structure ............................................................................ 13
Figure 4 UI Design Process .................................................................................. 19
Figure 5 Information Architecture of Application .................................................. 20
Figure 6 Wire-frames for onboarding and Register page ........................................ 22
Figure 7 Wire-frames for login and notification screen .......................................... 23
Figure 8 Wireframes for user dash and accounts page ............................................ 24
Figure 9 Wireframes for Transactions and cart screen............................................ 24
Figure 10 UI Design for register screen ................................................................. 25
Figure 11 High Fidelity Design for on boarding screen .......................................... 25
Figure 12 UI Design for bank accounts screen ....................................................... 28
Figure 13 UI Design for dash................................................................................ 28
Figure 14 UI Design for notification ..................................................................... 28
Figure 15 UI Design for login ............................................................................... 28
Figure 16 UI Design for Menu ............................................................................. 29
Figure 17 UI Design for address book page ........................................................... 29
Figure 18 UI Design for checkout screen .............................................................. 29
Figure 19 UI Design for order screen .................................................................... 29
Figure 20 Modal Overlay for logout confirmation ................................................. 30
Figure 21: Modal overlay for failed purchase ........................................................ 30
Figure 22 Modal overlay for successful purchase .................................................. 30
Figure 23 Prototyping different states of footer nav bar ......................................... 33
Figure 24Prototyping different states of tabbed bar ................................................ 34
Figure 25 Prototyping user’s card ......................................................................... 34
Figure 26 All frames in artboard before prototyping .............................................. 35
Figure 27 Frames/Screens linked with each other via prototyping .......................... 36
Figure 28 Landing Page for architect company ...................................................... 40

vi
LIST OF ABBREVIATIONS

ASMT Asian School of Management and Technology

BIM Bachelor of Information Management

HTTP Hypertext Transfer Protocol

IA Information Architecture

IT Information Technology

NTA Nepal Telecommunications Authority

PM Project Manager

QA Quality Assurance

TU Tribhuvan University

UI User Interface

UX User Experience

vii
CHAPTER ONE: INTRODUCTION

1.1 Background

This report is based on a three-month internship at Spyder's Lab Pvt. Ltd. It has given
me real-world experience and understanding of how a workplace and work
environment function. The theoretical information I learned in college was put to use
in the real world, notably in the field of software development. This internship has
improved not only my software design and development abilities, but also my self-
confidence, motivation, and growth.

A UI Design for Maulik App is one of a project that I have accomplished during the
period of my internship in the Spyders Lab Pvt Ltd. It is an online eCommerce app
designed to shop for groceries and other household products that helps the public or
the consumer hassle-free to go and buy the groceries physically. This project helps the
consumer to order online groceries simply through their mobile phone.

1.2 Objectives of system

The objectives of the system are:

✓ To provide a convenient and easy-to-use platform.


✓ To allow users to shop for multiple groceries from a single application.
✓ To pay and receive products digitally.
✓ To help users hassle-free shopping
✓ To provide a unique customer expirence
✓ To make user easy to view and borwswer the products

1.3 Methodology

I gathered information regarding the e-commerce management system during my


internship program. Primary and secondary sources were used to compile the material.
Much data is gathered directly from the organization in the course of day-to-day
activities. This part also contains the knowledge collected from the experience. Much
of the material was acquired from the organization's web pages, manuals, and other
sources. Secondary data, often known as references, is information that is easily
available and affordable to collect.

1
1.3.1 Organization Selection
The choice of organization is a critical aspect of making the internship meaningful. It
is critical to finish entry-level employment. It is a medium through which we shall gain
knowledge and convey it to the rest of the world. The organization that we pick serves
as a conduit for exposing us to the actual world. Spyder's Lab Pvt. Ltd., which was
founded in 2018, is the organization I choose. I had to pick an IT firm based on my
interests to improve my abilities and knowledge in the practical industry. Spyder's Lab
Pvt. Ltd is one of the Nepalese institutions where I obtained important experience and
expertise.

1.3.2 Placement and Duration


The organization’s selection process placed me as an intern in the organization where
l got the opportunity to learn the real organization process and software development
process along with the importance of teamwork in achieving success. I was trained in
the organization's work process which led to an easy path for organizational culture
and process.

Table 1 Placement and Duration

Start Date March 09, 2022

End Date June 08, 2022

Working Days Sunday to Friday (6 days)

Office Hours 10:00 am to 6:00 pm (8 hours)

Mentor Sandesh Dawadi

Position UI/UX Intern

Internship Period 3 months

1.3.3 Work Procedure


For the initial week of joining the company, I was introduced to the working
environment, and my immediate supervisors made me comfortable. Planning as to

2
what had to be done was completed. At the time of my internship, the company was
still implementing remote working due to the covid situation. So, some of my tasks
during the internship were done from home. After a few weeks of working from home,
I was called to the office to stay and work in an office environment to get experience
and get used to with office environment. The following 2 weeks were spent designing
some promotional materials for the company. Then, I was assigned to a UI Design to
introduce me to the field of UI/UX Design. UI boot camp along with Front end boot
camp was quite an interesting and rewarding one. It took 5 weeks to complete. Then,
I was assigned to a project named ‘Maulik’ as a UI/UX designer. There was a web-
based e-commerce site being developed and the mobile app was not a real-time project
but was assigned to me to improve my design skills and UI/UX skills and teach how a
project is done in the real world. This took a month and a half with some design
assignments for the company such as banners, splash screens, and backdrops in
between. The whole internship was for 3 months or 12 weeks.

Observation and Planning

Promotional Design

UI Bootcamp

UI/UX Design for Maulik

UI Design for Sewaranyakeshari Samaj

Landing Page Design for Architect


company

Figure 1 Gantt Chart

3
1.3.4 Tools Used

Tools Used

UI/UX
Designing

Adobe
Figma
Photoshop

Adobe
Illustrator Adobe XD

Canva Balsamiq

Figure 2 Tools Used

1.3.5 Activities Performed


I was involved in different UI UX development activities during my internship period.
The main task that I carried out during my internship period are as follow:

• Designed UI Mockup for the system


• Multiples meeting with both mentors and clients.
• Review of the final design .
• Multipler revisions according to the feedbacks of the clients.
• Requirement analysis ad design according to them.
• Created multiple pages with all the function

1.4 Roles and Responsibilities

During their internship time, I had to do a number of tasks. The following list of jobs
and duties is provided:

• Finish the provided assignment, such as creating UI designs for web pages, by
the deadline.

4
• Coordinate the work review with the supervisor.
• Research and educate yourself on UI UX development.
• Develop your workplace competencies (communication, team working)
• Review customer feedback and make adjustments in light of it.
• Forward any potential issues that may develop when creating UI designs.
• Research and analyze the type of client, then create designs that meet their
needs.

1.5 Limitations of the Study

It was a great opportunity to be an intern in an IT Company. This report is prepared


based on the observations, experience of the internship, formal and informal interviews
with the staff, and the secondary data available on the internet. However, the internship
had some limitations. The main limitations of an internship are listed below:

▪ The study of every activity within the company was not possible due to time
constraints.
▪ The research was done at the surficial level, not in-depth due to security policy.
▪ Unavailability of complete information due to the privacy policy maintained in
the organization.
▪ The duration of internship period was limited and short so there was difficulty
to understand the functioning of the overall system.

5
CHAPTER TWO: INTRODUCTION TO INDUSTRY

2.1 Introduction to Information Technology

Information technology is one of Nepal's fastest-growing industries, with plenty of


room for expansion, investment, and profit. Users buy computers for home and
business usage, and they need something to do with them, thus software companies are
sprouting up like mushrooms. Computer hardware, software, electronics,
semiconductors, the internet, telecom equipment, e-commerce, and computer services
are all related to information technology. Everything from computer systems to the
design, implementation, analysis and development of IT and management systems is
included in the IT business, including both software development and hardware. The
demand for IT services has grown significantly over the years as a result of its easy
accessibility and the large range of IT goods offered. The IT sector has emerged as a
major global source of both growth and employment.

In the Nepal Trade Integration Strategy (NTIS) 2010, the government of Nepal
selected IT as one of the five priority potential export service industries. The IT
business has become an integral element of our economy since it aids in the
development of a more knowledge-based economy, human resource development,
effective management of other services, and a variety of other opportunities that aid in
a nation's development. Individuals and corporations may now view developments in
global markets in real-time, far faster than before, thanks to information technology.

Nepal is not immune to the worldwide trend of using information technology in a


variety of ways. When it comes to developing projects that are usually the result of
intensive coding, Nepalese youth, like their western counterparts, are equally excited.
Even small firms in Nepal have begun to implement IT systems, which opens up a
plethora of prospects for Nepalese students studying IT.

6
2.2 Introduction to Software Industry

As we all know, the world is transitioning from analog to digital, and IT is playing an
increasingly significant part in people's lives. Humans have made IT a part of their
daily lives. The effect of TT is growing as the world becomes smaller and smaller.
People are developing new strategies to better their abilities and talents with the help
of information technology in all places throughout the world. A software product is an
IT sector product that is marketed as a solution to real-world problems.

In today's world, information technology plays a critical role in all processes.


Information technology contributes to the nation's strength while also allowing for
economic progress. Information technology is continually evolving and changing the
way businesses operate in unexpected new ways. IT is a modern phrase that covers the
confluence of computer and telecommunication technologies. Its enormous ability to
influence change has propelled it to the forefront of all other businesses. IT is now the
world's fastest expanding economic activity, and the IT industry as a whole is the
largest. In Nepal, around 37.7% of the population has access to the internet in 2020.
This was a significant increase from 2011, in which nine percent of the population in
Nepal were using the internet.

Because it ensures quick access to information, the IT industry can serve as a medium
for e-governance. In the service sector, the application of information technology
promotes operational efficiency and transparency. It can also be used to learn new
skills. It is the major force in developing organizations, societies, and nations in this
modern era, based on the assumption that it is the key to today's progress. Finally,
information technologies are a developed-country product that must be adapted for
developing countries such as Nepal. A concerted effort should be made to develop the
ability to understand the value of adopting IT following development needs and
requirements. So, IT is the most vital component to building up the nation and helps
the economic growth.

2.3 Objectives of IT in Business

▪ To increase data and knowledge management approaches, ensure the


availability of and access to information that enables customers to make timely,
educated decisions

7
▪ To explore new horizons of challenges and opportunities that can help to
improve the country's technical, economic, and educational situation
▪ To manage the cost efficiencies
▪ To provide a stable and secure IT infrastructure that allows for on-demand
information access
▪ To thrive in the Face of Globalization
▪ promoting e-commerce and software export growth
▪ To improve customer and service provider openness and accountability from
beginning to end
▪ To increase the number of employees who take advantage of IT training
options.

2.4 Opportunities in Nepali IT Sector

Some of the services that ICT may give to the improvement of agriculture are smart
irrigation projects, digitalization of land records, e-Bazar, and digital wallets. Smart
classrooms, online learning platforms, biometric attendance systems, and rural mobile
learning centers can all help to improve our traditional educational system. Electronic
visas, augmented reality tours, visitor tracking systems, online tourism information,
websites, and mobile apps can all help to broaden the scope of tourism around the
world. Smart buildings, intelligent waste management, public transportation
management, municipality mobile applications, and other urban infrastructures could
lead to a more creative and successful Nepal. Better health care would be aided by
electronic health records, mobile health units, and centralized telemedicine facilities.
Smart grid initiatives and smart metering can help our energy system transition to the
digital age. Financial reform can be aided by a national payment gateway, an
information management system, and a mobile wallet system. Disaster prevention,
mitigation, response, and recovery all benefit from information and communication
technology.

Drones can be used to monitor security and distribute emergency supplies, which can
aid in disaster relief. ICT has a persistent beneficial impact on the creation of new jobs.
Infrastructure development, equipment production, distribution, and maintenance, as
well as websites, mobile apps, and information systems, all offer prospects.

8
2.5 Challenges in Nepali IT Sector

The successful use of ICT in these various sectors will require a high degree of
emphasis on implementation. The Government of Nepal needs to focus on the
following priority areas to create an enabling environment: Technology and
Infrastructure development, entrepreneurship/PPP so that private organizations would
involve in every sector, talent, and skills development so that country will get the
skilled technical workforce to implement the efficient use of ICT. Encouraging private
sector participation, improving professional education, facilitating the event of a robust
financial ecosystem, encouraging foreign direct investment in priority areas, and
making public servants digitally ready will be essential. Emerging business models
and disruptive technologies such as artificial intelligence (AI), robotics, the Internet of
things (IoT), and over-the-top (OTT) are transforming the way work is done. These
emerging technologies are allowing governments and enterprises globally to unlock
the potential to achieve exponential growth.

9
CHAPTER THREE: INTRODUCTION TO
ORGANIZATION

3.1 Introduction to Organization

Spyder Lab Pvt Ltd. is a creative digital agency based in Kathmandu, Nepal. We
mainly focus on Web Development, Mobile applications, and Desktop applications
providing complete IT solutions around the clock. Its services include digital
marketing, SEO Optimization, Mobile App Development, Software Development,
Web Design and Development, UI/UX Design, and many more. Currently, Spyders’
Lab team size comprises 15+ team members working closely with Development, HR,
Operations, Infra, and Finance teams. Spyders Lab is committed to understanding the
unique technological needs of our clients and providing them with the best solutions.
Spyders Lab team comprises experienced professionals with a specialization in
Software Development. Emphasizing what makes each client unique, Spyders Lab
strives to deliver a perfect software system, tailored to their competitive differentiators.

3.2 Services Offered

Spyder’s Lab PVT LTD specializes in a broad range of services like Digital Marketing,
SEO Optimization, Mobile App Development, Software Development, Web Design
and Development, and UI/UX Design, with a special focus on web-app development
and software development. Its main services offered are:

▪ Mobile App Development

Spyder's Lab has extensive expertise in designing, implementing, developing,


deploying, and keeping positive relationships with a variety of clients to alter
their business' economics by offering greater intelligence to make well-
informed decisions based on their data. Our services are available to a wide
range of businesses, from small regional stores to global retail giants.

▪ Web-app / Software development

We design and construct web-based applications for our clients in addition to


mobile app development. To help retailers get the most out of our services, we

10
provide installation skills, bundled and bespoke services, as well as reporting
and dashboarding expertise.

Spyders Lab's expertise lies in the implementation and customization of


software related to various fields. In addition to this Spyders Lab makes sure
that the clients get the required system they desired quickly with very low-
down time and problems. We have a team of highly experienced developers to
make sure the clients are satisfied with the services provided here.

▪ Software Solutions

An impressive pool of our great developers and experts in various technologies


and frameworks provide custom-designed software as and when required.
Following are some of the areas wherein we’ve proved our expertise.

• Web-based application design and development


• Legacy application re-engineering
• Application conversion & migration
• Application customization / feature enhancement
• Business process automation software
• Supply, delivery of IT hardware and other third-party software
supply & support
• IT support & maintenance solutions
• Mobile Application development

▪ SEO and Digital Marketing

Spyders Lab provides on delivering compelling, digital marketing solutions.


Their winning solutions and experiences help many of their clients interact and
engage with their customers in the best possible way.

11
3.3 Contact Information

Company: Spyders Lab Pvt Ltd

Address: Shorakhutte, Kathamndu

Telephone: +977 984-1906050

Website: https://www.spyderslab.com/

E-mail: spyderslab@gmail.com

Facebook: https://www.facebook.com/spyderslab

3.4 Organization Structure

Organization structure is a system that is used to define a hierarchy within an


organization. It helps for smoothly running the organization. Therefore, Spyders Lab
has a systematic structure consisting of a CEO, Technical Director, Developer, Senior
Programmer, and Junior Programmer who handle different fields of the organization.

12
Project Manager Intern

Software Developer

System Administrator

Managing Director
CEO/Founder

Web Designer

Senior QA

Graphic Designer

WordPress
Developer

IT and Digital
Marketing Consultant

Web Developer

Content strategist Content Writer

Figure 3 Organization Structure

13
CHAPTER FOUR: ANALYSIS OF ACTIVITIES

4.1 Introduction to the System

Maulik App is a mobile commence-based app providing the services of buying


groceries and other daily household items in Nepal. It is an emerging online e-
commerce solution in Nepal. It allows users to pay for a range of groceries like basic
food, drinks, fruits, vegetables, dairy products, and many more.

In this digital era, you do all your shopping standing in a queue outside a shop
physically is Nerve-wracking. To get you out of this situation, Maulik App came into
existence. Maulik App has been able to simplify the lives of various Nepalese assisting
the simple transaction done through an online medium hassle-free. Users of Maulik
App can make various shopping transactions easily from Maulik App’s mobile app or
website login. Now, buying foods like drinks, fruits, vegetables, dairy products, meat
beverages, and many more are all at your fingertip. The main aim of this application is
to digitize every transaction that encompasses fiat money by providing an easy-to-use,
convenient, intuitive application that is accessible to all users anywhere. This
application can load various items from a user’s account and provide a common
platform to shop for services from one single home screen. Users can select from a
multitude of services or categories of products offered. Users can also save their
commonly used products in the app for a further seamless and quick experience. Users
will have to verify their identity by doing an OPT check on the app for maximum use.

Maulik App aims to build a cashless economy by covering all aspects of the payment
industry (large/small, retail/wholesale, public/private), providing excellent shopping
services, and becoming the country's most favored service provider.

4.2 Functions of the System

✓ Merchant Payment
✓ Bank Account Link
✓ Online Wallet App Link
✓ Travel Payment
✓ Fund Transfer
✓ Report Generation

14
4.3 Requirement Specification

4.3.1 Functional Requirements


These are assertions about the services the system should deliver, how it should
respond to specific inputs, and how it should operate in specific scenarios. The Maulik
App should be able to carry out these tasks:

• Users should be able to register and create an account on the application.


• Users should be able to log in with /her credentials.
• Users should be able to load or link their mobile banking account from /her
preferred bank account.
• The user should be able to link /her bank mobile wallet for faster transaction
processing and payments shortly.
• Users should be able to view all the transactions of a time through the
application.
• The user should be able to update their/her information.
• Users should be able to view details and download digital receipts of every
transaction through the application.
• Users should be able to receive notifications and offers through the application.
• Users should be able to change the region according to their location.

4.3.1.1 Use Case Diagram


The use case diagram that shows the functional requirement of the project is shown
below:

15
4.3.2 Non-Functional Requirement
Non-functional needs are those that aren't immediately related to the system's specific
delivery to its users. They could have anything to do with emergent system attributes
like dependability, reaction time, or store occupancy. NFR might derive from the
software's needed qualities (product requirements) or other sources ("Non-functional
Requirements", 2021).

• Product Requirements
o Memory
The application must be taking up less memory for data manipulation.
o Accuracy
The results must be accurately displayed according to the user’s needs.
All programs are written must be tested properly with multiple possible
inputs.

16
o Speed
All unnecessary dependencies must be reduced as much as possible.
Limit the use of packages and create manageable modules for each
operation for smooth functioning.
• External Requirements
The system must comply with legal acts. It should maintain transparency but
should not disclose information to unrelated parties. The system should be
liable for providing ease of access for the users.

4.4 Feasibility Analysis

The fundamental goal of a feasibility study is to determine if something is technically,


operationally, economically, or logistically feasible. Only if given limitless resources
and time are all systems possible. It assists in determining the societal and
organizational advantages of the proposed system. It also affects if the system can be
effectively constructed in terms of cost, time, and effort.

4.4.1 Economic Feasibility


It includes the most basic financial operations functions, such as daily transactions,
report generating, and product administration. The necessary technology and resources
to create the program are currently available. This program may be accessed by
anybody who has access to the internet. As a result, this program is cost-effective and
capable of serving the user's needs.

4.4.2 Operational Feasibility


Although there are certain problems, such as users' aversion to change, this system has
high operational feasibility due to the consumers' easy user interface. Furthermore, all
of the features will be implemented utilizing the company's databases and API, and it
will be compatible with all devices. As a result, this system will suit the operational
needs of the company.

4.4.3 Technical Feasibility


The goal of the technical feasibility study is to acquire a better knowledge of the current
technological resources available and their relevance to the proposed system's
predicted needs. All of the required tools, such as Figma and Adobe XD, are already

17
in place. Other tools, such as a laptop and access to the internet, are also accessible.
This is a smartphone application. Running this program on any personal mobile phone
will not be an issue, making it technically possible.

4.5 System UI/UX Design and Modeling


4.5.1 UI Design Process
The following activities take place when designing a User Interface for an application:

• Context and user recognition


Determine how items may be used and how convenient they are for the target
audience. Know how to grade objectives and how to use the performance
option to gather specific viewer goals. The functionality is ranked based on
how well it aids in achieving the aim. Limitations in terms of business and
functionality are taken into account, as well as the Selection of the optimal
product interfaces that enable the assignment's principal business goal to be
met.
• Navigational and systemic interface design
To achieve the aim, plot designers draw out the "user-product" interaction. The
scheme's relevance, dependency on usage frequency, and the client's part are
all graded. The development of information architecture and navigation
interface design, resulting in the optimum functionality content and user
interaction plot.
• Distributional design of an interface
The page layout design must be seen on the screen. The navigation, aesthetics,
functional, and text elements of the screen compose the pages in such a design.
The requirements of the question are met by the advantages of a checklist.
• Visual interface design
We develop the creative visual components of the interface in the UI Design
Process to satisfy the company's brand standards and identities, such as style,
color, fonts, and graphics solutions. The creation of iconography and visual
symbols. The screen design is the most important screen in content design.
2020 (Keerti)

18
• Products prototype design
Creating a working model for its user and combining it with text arrangement
is a prototype testing of the products model in the engineering stage, which
provides additional demands for future product functionality and user interface.
• Testing usability of the prototype
The experimental way to detect the user elements of the product and to find the
problems which are faced by the users while the application is usability testing.
The main aim of usability testing is to evaluate the usability of the product.
The methods of testing usability:
o Observation of users
o View of users
o Measurement of benchmark
• Specification of UI
The "specification of user interface" record creation presents a visual
representation of the standards, structural composition, and design of the
product, taking into account the endorsement based on usability testing results.

Context and Navigational Distributional


user and systemic design of
recognition design interface

Products Visual
Testing
prototype interface
usuability
design design

Specification
of UI

Figure 4 UI Design Process

19
4.5.2 Information Architecture
Information Architecture is a design structure blueprint that can be translated into
project wireframes and sitemaps.

Figure 5 Information Architecture of Application

20
UX designers utilize them as a starting point for creating a navigation system. The
study of arranging and structuring material on websites, online and mobile
applications, and social networking software is known as information architecture.

Information architecture aims at organizing content so that users would easily adjust
to the functionality of the product and could find everything they need without big
effort. The content structure depends on various factors. Nowadays, when the user-
centered approach in design is a top trend, many designers learn the principles of
information architecture science which they believe is a foundation of efficient design.
IA forms a skeleton of any design project. Visual elements, functionality, interaction,
and navigation are built according to the information architecture principles. The thing
is that even compelling content elements and powerful UI design can fail without
appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the
users can easily get lost and feel annoyed. If the users face their first bad interactions,
they may not give them a second chance with your product. good information
architecture is a foundation of efficient user experience, so the IA skill is essential for
the designers. Effective IA makes the product easy to use but only when united with
design thinking, the product has a powerful user experience.

The above-shown IA for the Maulik App application shows the 6 main modules or
screens that the user will come across as soon as starting the app. From there, the
modules or screens are further divided down into more screens and sub-modules that
the user will come across. IA shows and organizes this content so that the user will
have no difficulty or feel cumbersome while using and navigating through the app. For
example, the login page should be the first thing the user should be after the onboarding
screen. Then, a link to the registration page should also be placed on the login page so
that users who are not yet registered on the app can make their respective accounts and
then proceed to log in. All this placement of content for user convenience falls under
UX. UI deals with how the content looks on screen. It is related to the overall looks,
layout, colors, typography, and white space used on the components. UX makes up a
homely feeling for the users and makes the user want to use and come back again to
the application. It makes the experience seamless.

21
4.5.3 Wireframing
A wireframe is a tool that helps designers visualize the basic structure of a future page,
including the key elements and how they fit together. A wireframe is a visual structure
that depicts the page hierarchy and the elements in the product. A wireframe is
considered 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. Wireframing acts as the backbone
of the product and is often used as a foundation for mockups and prototypes. These are
also called low-fidelity wireframes.

Figure 6 Wire-frames for onboarding and Register page

Low fidelity wire-frames include the most basic content and visuals and are usually
static (not interactive). They are often used to help map out the shell of the interface,
its screens, and basic information architecture. (Mind, 2020). Low-fidelity wire-frames
usually serve as a checkpoint for the product team and stakeholders at the beginning
of the design process. They help teams visualize and test early concepts, requirements,
and design assumptions at the beginning of a web design project. They make changes
easy to implement since they are made in the early stages.

Medium to high fidelity wire-frames or prototypes is more complete representations


of the end product than low fidelity wire-frames. Many are clickable and respond to

22
the user’s actions, mimicking authentic interface interaction. Their aesthetics and
content are more precise than lower down the fidelity spectrum, as designers
concentrate on refining the graphics, spacing, and UI layout. Information architecture
also plays a role in this phase. High-fidelity wire-frames are often built in the advanced
stages of the design process to communicate design decisions to the development team
before coding the final product.

Figure 7 Wire-frames for login and notification screen

Additionally, they help validate complex interactions during user testing. These wire-
frames provide test participants with realistic representations of what the product will
look and feel like, as well as how it will respond to them.

23
Figure 8 Wireframes for user dash and accounts page

Figure 9 Wireframes for Transactions and cart screen

24
4.5.4 UI Design
UI Design is concerned with predicting what users may need to accomplish and
ensuring that the interface has features that are simple to access, understand, and utilize
to assist those tasks. Interaction design, graphic design, and information architecture
are all combined in UI. Building interfaces with an emphasis on style and interaction
is what UI design is all about. The objective of a user interface designer is to develop
an interface that is both easy to use and pleasant to the eye.

The low-fidelity wireframes are transformed into high-fidelity, detailed, pixel-perfect


designs that are aesthetically beautiful.

Figure 4.7:
Figure HighFidelity
11 High Fidelity Design
Design for
foron
on Figure 10 UI Design for register screen
boarding
boarding screen screen

25
One of the most important tasks involved in UI Design is the selection of elements.
Users have become familiar with interface elements acting in a certain way, so we
should try to be consistent and predictable in our choices and their layout. Doing so
will help with task completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

• Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists,
list boxes, toggles, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider,
tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message
boxes, modal windows
• Containers: accordion

There are times when multiple elements might be appropriate for displaying content.
When this happens, it’s important to consider the trade-offs. For example, sometimes
elements that can help save you space, put more of a burden on the user mentally by
forcing them to guess what is within the dropdown or what the element might be.

Creating a successful user interface requires applying a set of design guidelines and
principles. There are various well-known principles to keep in mind, like the eight
golden rules of UI design from Ben Schneiderman. (Kreimer, 2021)

The 10 UI design guidelines from Nielsen and Molich, are an updated version of
Schneiderman’s principles and are the gold standard when it comes to ensuring your
designs fulfill all requirements. They are:

• Visibility of system status: Systems should offer appropriate feedback within


a reasonable time. For example: when a user clicks on a button, it changes its
background color as well as its font.
• Match between system and the real world: Use familiar language your target
audience can understand. Design your UI using symbols and objects that relate
to the real world. For example: add a magnifying glass icon to a search bar.
• User control and freedom: Give users space to go back and undo or redo
previous actions.

26
• Consistency and standards: Standardize every UI element to guarantee
consistency throughout your system.
• Error prevention: Reduce any potential errors in your system, and flag them
when they happen so the user can fix the issue right away.
• Recognition rather than recall: Minimize the amount of information a user
needs to remember by offering help within the specific context in which a user
is. Avoid giving them long tutorials upfront.
• Flexibility and efficiency of use: Let users customize or tailor their interface
to suit their needs so that frequent actions can be achieved through shortcuts
and touch gestures.
• Aesthetic and minimalist design: Keep both your content and visual design
simple. The user shouldn't get distracted or confused by unnecessary elements
that get in their way.
• Help users recognize, diagnose and recover from errors: Highlight your
error messages and use plain language that gives specific solutions to your
user's problems.
• Help and documentation: Ensure your documentation is easy to find and
understand. Present the documentation in context right at the moment that the
user requires it and make it actionable.

When we talk about UX and UI, we refer to two separate concepts that meet different
objectives. Although they are related—and soon you will see how—you need to
understand their differences to use them properly. According to Maze CEO, Jonathan
Widawski, UI design “is the process of transforming wireframes into a polished
graphical user interface.” In contrast, UX design requires “understanding the overall
journey of your users and turning it into a product.”

27
Figure 15 UI Design for login Figure 14 UI Design for notification

Figure 13 UI Design for dash Figure 12 UI Design for bank accounts screen

28
Figure 19 UI Design for order screen Figure 17 UI Design for address book page

Figure 18 UI Design for checkout Figure 16 UI Design for Menu


screen

29
These are only some of the main screens used in the applications. The full application
will have more than 100 screens designed. Some more of them will be included at the
end of this report. Many elements and components were used in the design process of
these screens. Figma also allowed the reusability of components and many other
features such as Auto Layout, Variants, and Interactive Components which made the
design process easier and helped in achieving a minimal and clean look as well as
integrating interactivity into the application.

Apart from these screens, overlays had to be designed too to give information about
the success or failure of the application’s activity. These overlays would pop up on the
screen to give users critical information. Some of the overlays designed are:

Figure 22 Modal overlay for Figure 21: Modal overlay for failed Figure 20 Modal Overlay for logout
successful purchase purchase confirmation

30
4.5.5 Prototyping
A prototype is a simulation or sample version of a final product, which UX teams use
for testing before launch. The goal of a prototype is to test and validate ideas before
sharing them with stakeholders and eventually passing the final designs to engineering
teams for the development process. (UXPin, 2021). It is a primitive representation or
version of a product that a design team or front-end-development team typically creates
during the design process. It is used to test the flow of a design solution and gather
feedback on it—from both internal and external parties before constructing the final
product. The state of a prototype is fluid as the team revises the design iteratively based
on user feedback.

Prototypes are essential for identifying and solving user pain points with participants
during usability testing. Testing prototypes with end-users enables UX teams to
visualize and optimize the user experience during the design process. Engineering is
expensive, and making changes to a final product is often not as straightforward as
teams anticipate. So, finding and fixing errors during the design process is critical.

Prototypes have four main qualities:

• Representation: The prototype itself, i.e., paper and mobile, or HTML and
desktop.
• Precision: The fidelity of the prototype, meaning its level of detail—low-
fidelity or high-fidelity.
• Interactivity: The functionality open to the user, e.g., fully functional, partially
functional, or view-only.
• Evolution: The lifecycle of the prototype. Some are built quickly, tested,
thrown away, and then replaced with an improved version (known as “rapid
prototyping”). Others may be created and improved upon, ultimately evolving
into the final product.

Another common misconception about prototyping is that it only needs to be done


once or twice at the end of the design process which is not true. Prototyping should be
done early in the design phase and should be done often.

There are mainly 3 types of prototypes:

31
• Paper Prototyping
Paper prototyping works best during the early design stages when UX teams
collaborate to explore many concepts fast. Team members sketch ideas by hand
using simple lines, shapes, and text. The emphasis is on lots of ideas and speed,
not aesthetics. UX Teams lay paper screens on the floor, table, or pinned to a
board to simulate user flows. A common practice for testing these prototypes
is to have one person play “the product,” switching the sketches according to
how the real user behaves.
• Digital Prototyping
Digital prototyping is an exciting part of the design process. Prototypes start to
resemble the final product allowing teams to test and validate ideas.
There are two types of digital prototypes:
o Low-fidelity prototypes: a user flow using wireframes
o High-fidelity prototypes: a user flow using mockups
Low-fidelity prototypes allow research teams to outline basic user flows and
information architecture. High-fidelity prototypes go into more detail, testing
user interfaces, interactions, and how usability participants interact with a
product. Designers build prototypes using design tools like Figma, Adobe XD,
and others. Sometimes non-designers, from product teams use PowerPoint or
Google Slides to simulate user flows. (UXPin, 2021)
• HTML Prototyping
On rare occasions, teams might build HTML & JavaScript prototypes to get
more accurate results. The downside to this approach is that coding comes with
considerable time and technical costs.
For my case in the Maulik App application, I have used the digital prototyping
methodology for simulation purposes and to test and validate the overall look,
feel, and experience of the app. The UI elements were tested to make sure they
are in the correct place and the right layout. The interactivity of the components
was tested and overall user flow through the app was also shown.

32
Initially, prototyping was done within individual components. Since, individual
components such as the navigation bar, tab bar, and buttons should also interact
with the users. For example, the nav bar must highlight certain icons or tabs
when the user is on a certain page. It must highlight the home icon and
differentiate it from other icons and tabs when the user is on the home screen.
Similarly, the menu icon and label must be highlighted when the user is on the
menu screen. This shows the user what s/he is currently interacting with. UX
deals with these interactions and makes the user have a pleasant experience
when using the app.
Figure 23 Prototyping different states of footer nav bar

33
Figure 24Prototyping different states of
tabbed bar

Figure 25 Prototyping user’s


card

After prototyping individual components, the individual screens and frames


had to be linked to each other. The transition from one frame to another as per
the user’s action had to be done. To do this, I linked certain components of a
screen or a frame to another screen or frame that provided the required service.
For example, when the user taps on the menu icon in the nav bar, he will be
redirected to the menu screen. Similarly, when the user taps on the ‘Account’
icon s/he will be redirected to the screen where s/he can see his account section
from where h/she can look at all of the information of that user. Similarly, s/he
can see the payment methods where s/he can link his/her banking information
to pay for the bills hassle-free. Prototyping was done with many screens. The
whole application will have many screens probably more than 100. But this
report has shown only a portion of that. Prototyping helps to view the
application from the user’s perspective and shows how the application looks
and feels before the development phase starts. If any changes are needed, they
can be done in prototypes.

34
Figure 26 All frames in artboard before prototyping

35
Figure 27 Frames/Screens linked with each other via prototyping

36
4.5.6 Testing
UI testing focuses on testing the user interface of a website or other product to make
sure everything functions as it should and those users understand how to use the UI.
Simply put, with the help of UI testing software we see how an application, website,
or software will interact with the end-user.

UX testing, on the other hand, focuses on the user's whole experience and how the
product or website makes them feel. It is a method of determining the optimum way
for a project and its components to engage with its audience by evaluating various parts
of the user experience.

4.5.6.1 UI Testing
UI Testing is a type of testing in which testers need to make sure that all buttons, fields,
labels, and other items on the screen work as specified. UI testing involves checking
screens with controls, such as toolbars, colors, fonts, sizes, buttons, icons, etc., and
how they respond to the user input.

Essentially, User Interface testing checks how the tested product performs based on
the following criteria:

• Ease of use
• Consistency and logic
• Accessibility
• Compatibility

To achieve effective results during UI testing, the tester must answer at least two
important questions:

• Are all features of the tested software clear and easy to use?
• Can a user navigate through the app without experiencing system errors or
malfunctions?

For this purpose, a group of friends and colleagues were presented with the UI of the
Maulik App application and were asked to rate the UI out of 10 based on different
parameters such as type and font size, colors, icon style, etc.

37
The following table shows the result of the UI testing with scores on various
parameters of the application design:

Test Parameters Score (Out of 10)

Type and font size 9

Colors 9

Icon Styles 8

Visual Consistency 10

Required fields 7

Confirmation of action 8

Error messages 7

Table 2 UI Testing Scores

The average score received was 8.3 out of 10.

4.5.6.2 Usability Testing


Usability testing, commonly referred to as User Experience (UX) testing, is a way of
determining how simple and user-friendly a software product is. To uncover usability
flaws, a small group of intended end-users uses a software program. Usability testing
focuses on a user's ease of use, the application's flexibility in handling controls, and
the application's ability to accomplish its goals.

The purpose of this testing is to satisfy users, and it focuses on the following system
parameters:

• Effectiveness of the System


• Efficiency
• Accuracy
• User Friendliness

38
A group of friends and coworkers were shown the prototype flow of the Maulik App
application and asked to score the UX out of 10 based on several characteristics such
as ease of navigation, aesthetics, consistency, adequate information, and so on, similar
to UI Testing.

The following table shows the result of the UI testing with scores on various
parameters of the application design:

Test Parameters Test Case Score (Out of 10)

Ease of use 8
Effectiveness
Aesthetics 9

Ease to Navigate 8

Efficiency Uniformity in format 8

Search option 7

Accuracy Updated Data 7

Self-Explanatory Controls 8

Access to help and tutorials 6


User Friendliness
Performance 8

Animations 9

Table 3 UX Testing Scores

The average score received was 7.8 out of 10.

39
4.6 Other Activities

4.6.1 Landing Page Design for an architect company

Figure 28 Landing Page for architect company

40
CHAPTER FIVE: CONCLUSION AND
RECOMMENDATION

5.1 Findings

After three months of internship, I've learned a lot of new and previously
unknown concepts and topics. This internship provided students with valuable
practical experience in an organizational context. I discovered the importance
of time, research, and possibilities. The internship program not only exposed
me to a real-world working environment but also presented me with an
opportunity to advance professionally. In the last three months, I've learned a
lot of new things that will come in handy in the future. During my internship, I
discovered the following:
• Theoretical and practical knowledge are not the same thing.
• Understanding of the real-world workplace and interactions.
• I learned how to interact with team members and operate as one of a team.
• Recognized the value of collaboration and coordination in the workplace.
• Learned the working procedures in an IT Company.
• I learned about various tools and how to use them to create solid applications.
• I learned about various tools and how to use them to create solid applications.
• I've learned to accept constructive criticism, recommendations, and comments
with a positive attitude.

Overall, the whole internship program was very fruitful and rewarding and a great
opportunity to gain insight and shape my career for the future.

41
5.2 Conclusion

An internship is a fantastic way to obtain practical experience, forge lasting


connections, and position oneself for a fulfilling future. Near the end of the internship,
I compiled a list of the things I had learned from these three months with the business.
Here are some of the things I gained from that experience period:

• Collaborating with others as a team and making adjustments as needed.


• Better design techniques.
• The application of theoretical knowledge in practice.
• Social and communication abilities concerning company culture, values, and
rules.

5.3 Recommendation

The Maulik App application's UI/UX design was created in a short amount of time.
There is still a lot of work to be done and a lot of new features to be implemented. The
user interface design isn't finished yet. There are still a lot more screens and frames to
design, as well as interactions to add. This may be done soon. Additionally, a PC-based
similar website is being created. This makes it possible for PC users to utilize the
system as well. It is also necessary to develop a promotional website. This will help
the app reach more users in the future and encourage them to use it.

My internship experience was entirely wonderful. Interns, on the other hand, have
communicated with their mentors. Every communication was beneficial because the
internship was performed in person. Mentors may be out of touch from time to time.
Furthermore, the guidelines might be perplexing at times. The instructions might have
been more precise. Everything went down without a hitch except for these minor snags.

42
REFERENCES

Ganbold, S. (2022, February 14). The Internet penetration rate in Nepal from 2011-
2020. The Internet Penetration rate in Nepal from 2011 to 2020.

Hamilton, T. (2022, April 30). What is Usability Testing? UX(User Experience)


Testing Example. Retrieved from www.guru99.com:
https://www.guru99.com/usability-testing-tutorial.html

Igor. (2020, January 23). UI/UX Testing: Why It’s Important for Your Project.
Retrieved from www.testfort.com: https://testfort.com/blog/why-your-project-
needs-ui-ux-testing

International Center for Academics. (2019, 03 22). Importance of IT in Nepal.


Retrieved 05 10, 2022, from https://ica.edu.np/blogs/importance-of-it-in-nepal

Keerti. (2020). A Complete Guide for UI Design Process (User Interface). Retrieved
from www.cronj.com: https://www.cronj.com/blog/user-interface-ui-design-
process-in-graphic-design/

Kreimer, I. (2021, May 20). User interface design: Definition, guidelines, and process.
Retrieved from www. maze.co: https://maze.co/collections/ux-ui-design/ui-
design/

Mind, J. i. (2020, January 16). Low fidelity vs high fidelity wireframes: what’s the
difference? Retrieved from www.justinmind.com:
https://www.justinmind.com/wireframe/low-fidelity-vs-high-fidelity-
wireframing-is-paper-dead

Tableau. (2020). Business Intelligence: What It Is, How It Works, Its Importance,
Examples, & Tools. Retrieved from www.tableau.com:
https://www.tableau.com/learn/articles/business-intelligence

Tubik. (2017, May 25). Information Architecture, Basics for Designers. Retrieved
from Uxplanet.org: https://uxplanet.org/information-architecture-basics-for-
designers-b5d43df62e20

43
UXPin. (2021). What Is a Prototype: A Guide to Functional UX. Retrieved from
www.uxpin.com: https://www.uxpin.com/studio/blog/what-is-a-prototype-a-
guide-to-functional-ux/

44
APPENDIX

45
46
47

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy