FEDERAL UNIVERSITY OF TECHNOLOGY OWERRI,

P.M.B 1526 0WERRI, IMO STATE.

A REPORT ON THE STUDENT INDUSTRIAL WORK EXPERIENCE SCHEME (SIWES)

300 LEVEL

CARRIED OUT AT

ICTC HALL 2 FUTO

UNDER
CENTRE FOR SOCIAL AWARENESS ADVOCACY AND ETHICS (CSAAE) TRAINING
AND SUPERVISION

FROM 8TH TO 19TH OF AUGUST 2023

BY

ALUMUKO, MARIA ONYINYECHI

REG. NUMBER: 20191156853

SUBMITTED TO

THE SIWES CORDINATOR

DEPARTMENT OF ELECTRICAL AND ELECTRONICS ENGINEERING

SCHOOL OF ELECTRICAL SYSTEMS AND ENGINEERING TECHNOLOGY

IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE AWARD OF BACHELOR

IN ENGINEERING (B.ENG)

AUGUST 2023
Contents
DEDICATION.................................................................................................................................................ii

ACKNOWLEDGEMENT.................................................................................................................................iii

CHAPTER 1...................................................................................................................................................1

1.0 INTRODUCTION.................................................................................................................................1

1.1 PURPOSE OF TRAINING......................................................................................................................1

1.11 SIWES: (Student Industrial Work Experience Scheme)....................................................................2

1.13 NATURE AND SCOPE OF SIWES........................................................................................................3

1.14 AIMS AND OBJECTIVES OF SIWES....................................................................................................3

1.15 BENEFITS OF INDUSTRIAL TRAINING................................................................................................4

1.2 THE CENTRE FOR SOCIAL AWARENESS, ADVOCACY AND ETHICS -CSAAE..........................................5

1.21 COMPANY PROFILE..........................................................................................................................5

1.22 THE HISTORY OF CSAAE...................................................................................................................5

1.23 VISION..............................................................................................................................................7

1.24 MISSION...........................................................................................................................................8

1.25 MOTTO............................................................................................................................................8

1.26 PROGRAMMES OFFERED BY COMPANY..........................................................................................8

1.3 ABOUT THE UNIVERSITY COMPUTER CENTER (UCC) FUTO................................................................9

1.31 PROFILE............................................................................................................................................9

1.32 VISION..............................................................................................................................................9

1.33 MISSION.........................................................................................................................................10

1.34 CORE VALUES.................................................................................................................................10

1.35 PROGRAMMES OFFERED...............................................................................................................10

CHAPTER TWO...........................................................................................................................................11

2.0 TRAININGS AND PROJECTS..............................................................................................................11

i
 2.1 TRAININGS.......................................................................................................................................11

2.11 Introduction to UI/UX Design:...................................................................................................11

2.1.2 The Synergy between UI and UX:..............................................................................................12

2.1.3 Terms Used in UI/UX:................................................................................................................12

2.1.4 Laws and Principles of UI/UX:...................................................................................................13

2.1.5 User Research and Its Processes:..............................................................................................13

2.1.6 The Figma Interface..................................................................................................................14

2.1.7 Adding Standard Grids:.............................................................................................................16

2.1.8 Setting Up a Style Guide:..........................................................................................................16

2.1.9 Prototyping in Figma.................................................................................................................18

2.2 PROJECTS.........................................................................................................................................19

2.21 Designing a user flow in Figma..................................................................................................19

2.2.2 Creating a Wireframe for an App Design..................................................................................21

2.2.3 Designing an App Page or website page on Figma....................................................................24

CHAPTER 3.................................................................................................................................................27

3.0 CONCLUSION...................................................................................................................................27

3.1 SUMMARY OF THINGS LEARNT........................................................................................................27

3.2 SUMMARY OF PROJECTS EXECUTED................................................................................................27

3.3 RECOMMENDATION........................................................................................................................28

REFERENCES..........................................................................................................................................29

ii
 DEDICATION
This report is dedicated to God almighty for his favour, mercy and grace upon my
life especially during the SIWES programme.
I would also like to dedicate this report to my parents and friends for their
unending love and support, and to everyone else that has contributed towards
my SIWES programme a success.

iii
 ACKNOWLEDGEMENT
I wish to register my profound gratitude to God Almighty, the fountain of wisdom,
knowledge and understanding for his guidance, whom I would have achieved
nothing at all.
I am grateful to Rev. Fr. Godswill Agbagwa and the entire Staff of Centre for Social
Awareness Advocacy and Ethics (CSAAE) for providing me with the necessary skills
relevant to my field of study in an interesting, educative and worthwhile way.
My special gratitude goes to the Vice Chancellor and University board of Directors
for seeing the need to let us acquire such skills which would broaden our horizon
and prepare us for the world ahead. Then, to my HOD, Engr. Prof. E. C.
Nkwachukwu and Engr. Prof. Damian O. Dike for their efforts to see that this
training program saw the light of the day. I would also like to show my
appreciation to my Class Adviser Engr. Dr. S. O. Okozi, for his support and
motivations.
I appreciate all my amazing course mates who were my study/practice partners
and contributed to the best of their abilities. God bless you all.
My regards to my amazing parents who financially supported my educational
pursuit, I say, remain blessed by God Almighty.

iv
 CHAPTER 1
1.0 INTRODUCTION
1.1 PURPOSE OF TRAINING
The student industrial work experience scheme (SIWES) popularly called
Industrial Training (IT) by Nigerian students is a yearly program designed by the
institution in collaboration with the industries to give students the opportunity to
gain practical working experience in their various field of study or area of
specialization. It is an effort to bridge the existing gap between classroom theories
and practicals in engineering, management and other professional programs in
the Nigerian tertiary institutions.
Training is a key factor in changing expertise of a workforce. The world is
passing through one of the worst economic crises in recent time. Both the
developed and developing economies are experiencing serious economic
downturns.
Globalization has turned the world into one big village and whatever
happens in one economy will have effects in the other economies, and the
growing concern among our industrialist is that graduates of our institutions of
higher learning, lack adequate practical background studies, so as to help in the
industries led to the formation of student industrial work Experience Scheme
(SIWES) by ITF 1993/1994.
It is through this Industrial Training that the educational systems aim at
helping students acquire appropriate skills, abilities and competencies, both
mental and physical as well as equip the individuals to live in the society. The
focus of the Industrial Training Fund (ITF) is for the industries of our countries to
succeed in the face of the current economic meltdown.
No society can achieve meaningful progress without encouraging the
youths to acquire necessary practical skills. Such skills enable them to harness
available resources to meet the needs of the society. It was against this
background that SIWES, otherwise referred to as Industrial Training (IT), was
introduced in Nigerian tertiary institution.

1
1.11 SIWES: (Student Industrial Work Experience Scheme)
Since the aim of our national policy in the education is to build a strong and
self-reliant nation, from the government’s decree No.47 of 8th October, 1971 as
amended in 1990, which led to the establishment of Industrial Training Fund (ITF)
in 1973/1974 and through the formation of this body (ITF), in the year 1993/1994
SIWES was formed. In Nigeria, the current form of Cooperative Education is
known as the Students Industrial Work Experience Scheme (SIWES).
The Students Industrial Work Experience Scheme (SIWES) is a planned and
supervised training intervention based on stated and specific learning and career
objectives and geared towards developing the occupational competencies of the
participants. The aim is to make education more relevant and also to bridge the
science- related disciplines in tertiary institutions in Nigeria.
SIWES forms part of the approved minimum academic standards in the
institutions, and is a core academic requirement carrying fifteen (15) credit units.
This requirement must be met by all students in various disciplines before
graduation.

1.12 BODIES INVOLVED IN SIWES

The main bodies involved in Student Industrial Work Experience Scheme
are;
The tertiary institution and the Federal Government through the Industrial
Training Fund (ITF)
Other supervising agencies include:
 National University Commission (NUC)
 National Board for Technical Education (NBTE)
 National Council for Colleges for Education (NCCE)
 Tertiary Institutions (Universities, Polytechnics, Colleges of Education)
 Student Trainees (Engineering, Science, Technology, NCE Technical)
 Industry Employers (NECA, NACCIMA, MAN, Government Establishment)

2
  The functions of these agencies above are to:
 Ensure adequate funding of the scheme
 Establish SIWES and accredit SIWES unit in the approved institutions
 Formulate policies and guideline for participating bodies and institutions as
well as appointing
 Supervising students at their places of attachment and sign their log book
and ITF forms
 Vet and process students log books and forward same to ITF area office
 Ensure payment of all allowances for students and supervisors

1.13 NATURE AND SCOPE OF SIWES

This is based on the number of weeks or months that student is expected
to stay for its attachment. The minimum duration for SIWES should normally be
six months, twenty-four weeks (24) weeks for university engineers and
technologist. The cumulative total duration of attachment over the entire period
of the course should preferably be not shorter than 240 hours full time which will
take place during term-time or long vacation.
Induction sessions which are conducted by teaching departments to instill
the concepts of key skills (skills for learning, employment and life), work place
safety and professional expectations, legalities and ethics.

1.14 AIMS AND OBJECTIVES OF SIWES

The specific objectives of SIWES were summarized by the federal
government as follows:
 To provide students with an opportunity to apply their knowledge in real
work and actual practice.
 To make the transition from school to the world of work easier and to
enhance students contacts for later job placement.

3
  Advanced countries, with over 100 years of sustained industrial
development and requisite technical and human infrastructure, have been
able to adequately implement industrial training for their students.
 Applications, management and hands-on experience for students to apply
knowledge acquired.
 It also aids students to acquire practical skill in order to strengthen their
work value.
 Moreover, it helps them to gain interpersonal and entrepreneurial skills
and also instill in them the right kind of work attitudes and professionalism
through interactions with people in the organizations and observations of
their future role in the tertiary.

1.15 BENEFITS OF INDUSTRIAL TRAINING

 Experts identified industrial experience as necessity for proper job
preparation. This is because productivity is enhanced by experience
graduate or new entrance into the world of work really needs and early
exposure to the value and skills of the industry. Therefore, without
appropriate skills and experiences young graduates are not properly trained
on work, norms and role behaviour among others, these components will
ensure success at the job place.
 Today Information and Communication Technology (ICT) is changing the
way many jobs are performed, thus altering the knowledge and skills
required of workers. Consequently, a new level of competency is required
of our students. This cannot be sufficiently met by training facilities in our
education institution hence, the need for collaborative effort between
institutions and industrial sector.
 The major benefits accruing to students who participate conscientiously in
industrial training are the skills and competencies they acquire. These
relevant production skills (RPSs) remain a part of the recipients of industrial
training as lifelong assets which cannot be taken away from them. This is
because the knowledge and skills acquired through training are internalized
and become relevant when required to perform jobs or functions. Several
other benefits can accrue to students who participate in industrial training.
4
  Provision of an enabling environment where students can develop and
enhance personal attributes such as critical thinking, creativity, initiative,
resourcefulness, leadership, time management, presentation skills and
interpersonal skills, amongst others.

1.2 THE CENTRE FOR SOCIAL AWARENESS, ADVOCACY AND

ETHICS -CSAAE
1.21 COMPANY PROFILE
The founder, Dr. Godswill Agbagwa – priest and ethicist – grew up in Nigeria. His
experience with poverty as a teenager led him to dedicate his priestly ministry to
integral social and human development. In 2010, while studying abroad as a
graduate student, he decided to establish CSAAE as a platform to advance integral
social and human development in Africa and across the world. The five core
values at the foundation of his work at CSAAE include: Punctuality, Integrity,
Creativity, Accountability and Solidarity (PICAS)CSAAE is a registered nonprofit in
Nigeria; a 501(c3) nonprofit in the United Staes; an organization in special
consultative status with the United Nations’ ECOSOC and former representative
of African civil societies at the World Bank and IMF civil societies working group.
The Centre carries out its operations from its head office in Owerri, Nigeria, with
technical support from its U.S. office in Maryland.

1.22 THE HISTORY OF CSAAE

CSAAE was founded by Dr. Godswill Uchenna Agbagwa, a Catholic priest and
social ethicist. He was born in Umueze, a small village in Ikeduru Local
Government Areaof Imo State, Nigeria. As a child, he had a comfortable life,
thanks to his hardworking parents, Mr. Charles and Mrs. Evelyn Agbagwa. Things
took a bad turn in 1990 when his father, an educationist, businessman and
community leader, passed away leaving his mother, a trader and women leader,
to fend for their seven children. Poverty quickly set in and for many years little
Uchenna and his siblings managed to feed, obtain medical care and pay tuition. It
was then that he started dreaming of a better Nigeria where all can find support
and encouragement to work hard, live with dignity and feel proud to belong. His
dream was deceptively kept alive by a corrupt military junta that kept assuring
Nigerians of an imminent coming of a better Nigeria where there would be free
education, sufficient food, reliable electric power supply and clean drinking water.
5
Every night, Uchenna dreamt of this kind of Nigeria. Morning came followed by
night, but they remained poor, hungry and helpless. He still had to trek several
miles to fetch drinking water, burn nightly candles to study for exams and prayed
that he did not fall sick because there was no good health care facility. By the
time he was ordained a priest for the Catholic Archdiocese of Owerri, Nigeria, in
December 2003, his dreams of a better Nigeria had faded away. But his
experience with poverty as a teenager led him to dedicate his priestly ministry to
social and human development. Although as a parochial vicar, he did a lot social
and human development work in the various places he served, it was not until
2008, while on study leave in the United States that his interest in social and
human development turned into a desire. As he toured Europe and North
America during vacations, he wondered why basic amenities such as clean
drinking water, uninterrupted electricity supply, paved roads, and good
healthcare are considered luxuries in his native land. He wondered why he was
treated with contempt at the airports and wept at Toronto international airport in
2008 when an immigration officer inquired how much he gave in bribes for his
Nigerian passport. It was then that his dream of a better Nigeria turned into
passion. As a graduate student of social ethics and Catholic social teaching, he
struggled day and night, to unravel the root causes of poverty and
underdevelopment in Africa. He read books and articles on poverty and
underdevelopment in Africa. He attended conferences and seminars and engaged
anybody that cared to listen. He then took a trip back home to re-assess the
situation of things. Nigeria was still a sorry state. After prayerful reflections, he
became convinced that poverty and underdevelopment in Nigeria are caused by a
combination of failure of leadership, loss of social and moral sense, as well as loss
of entrepreneurial spirit. He then came to the conclusion that Nigeria can indeed
become a better place for all if we can start helping young people build great
careers, cultivate a spirit of entrepreneurship, become leaders of character and
embrace their roles as critical actors in building a better Africa. Thus, he decided
to establish CSAAE for the purpose of working towards this dream. CSAAE focuses
on young people because Reverend Agbagwa strongly believes that with youths
comprising 62 percent of Africa’s population, much of Africa’s future lies in its
young people who have the potentials to shape a more positive future for
themselves and others. Although CSAAE was registered as a non-profit
organization in Nigeria in 2010 and as a 501(c3) entity in the United States in
August 2013, he did not commence activities at the Centre until December 2013,
just one year after his mother’s death. It is interesting to note that the first person
that Fr. Godswill shared his dream with was his mother. She was very supportive
6
and strongly encouraged him to establish the Centre but did not live to see it as
she died in 2012. After her death, Reverend Agbagwa became depressed and
decided not to pursue the dream any longer, but his mother told him in a dream
not to give up on his dream. He woke up immediately, picked up the phone and
called his best friend, Fr. Vincent Arisukwu who helped him back home in Nigeria
to prepare for the initial Emerging Leaders Foundation Conference in 2013.The
Centre started out with the Emerging Leaders Program (ELP) which later became
the Effective Leaders Program (ELP). Initially, ELP was designed to nurture future
leaders. Today, ELP is not only nurturing future leaders it is promoting effective
leadership, training and supporting effective leaders. ELP focuses on leaders
critical to development including political, media, business, judicial, educational
and religious leaders. As the initial emerging leaders graduated from the
university and gained experiences from the various trainings offered at the
Centre, the Centre launched two more programs – The Career Building and
Entrepreneurship Program (CBEP) and the Students Ethics and Anticorruption
Network (SEACON) – led by these young leaders. While CBEP focuses on helping
young people get the education they need, launched enterprises and secured
jobs, SEACON focuses on training and empowering young people to fight
corruption, abuse of law, abuse of human rights and bad governance. With
interest generated in SEACON, the Centre changed its name to Youth Ethics and
Anticorruption Program (YEAP) to allow more young people be part of the
program. Like SEACON, YEAP continued to raise awareness of the consciousness
of youths towards the role of good governance, rule of law, anticorruption and
human rights towards development. To ensure that the program name is actually
reflecting the amazing work that the Centre is doing and intends to do in this
program, the Centre decided to just use a name that would not leave people
speculating about the focus of the program area. Thus, YEAP was changed to
GRAHP which means: Good Governance, Rule of Law, Anticorruption, and Human
Rights Program. The focus is still the same though the reach has been expanded
to work with not just youths but the rest of the citizens.7

1.23 VISION
A better Africa where all can find support and encouragement to work hard, live
with dignity and feel proud to belong

7
1.24 MISSION
Helping young people build the capacities necessary to build a better Africa

1.25 MOTTO
Together we can make Africa a better place

1.26 PROGRAMMES OFFERED BY COMPANY

CSAAE envisions a better Africa where all can find support and encouragement to
work hard, live with dignity and feel proud to belong. The Centre pursues this
vision through three programs.
A socioeconomic program that enables:
• Entrepreneurship
• Quality primary health care
• Youth empowerment
• Quality primary education
• Women empowerment
• Sustainable environment

An advocacy program that advocates for:

• Human rights
• Good governance
• Rule of law
• Anticorruption

8
An ethics program that promotes:
• Business ethics
• Professional Ethics
• Ethical Leadership

1.3 ABOUT THE UNIVERSITY COMPUTER CENTER (UCC) FUTO

1.31 PROFILE
The FUTO University computer center (UCC) was established in 1982 with Prof.
Amah Nduka as director is a central computing facility that supports teaching,
research, consultancy/ commercial services and administrative activities of all
units in the university. The center started then as a computer laboratory attached
to the then school of natural and applied Sciences. Following the progressive
growth of the university, the laboratory was transformed into a central unit called
computer center in 1989, with Prof. E. Umez-Eronini as its first director. But
presently, it is pioneered by it's current Director, Engr. Prof. D. O. Dike with it's
name as the University Computer Center.
The University Computer Centre is shouldered with the responsibility of
conducting regular cutting-edge in Information Technology (IT) training and
workshops, it also provides hands-on practical support for the departments on
Technology related courses as well as renders services to students of FUTO
International Staff School Owerri (FISO) on computer-related subjects.
It provides self-empowerment and self-enhancement executive training on all
aspect of information technology to industries and corporate bodies.

1.32 VISION
The vision of University Computer Centre (UCC) FUTO is to use Information
Technology (IT) innovations to empower both staff and students of FUTO through
human capacity building.

9
1.33 MISSION
The mission of University Computer Centre (UCC) FUTO is to provide professional
training and workshops in Information Technology (IT) for the University
Community, Industries band Host Communities.

1.34 CORE VALUES

The core values of University Computer Centre FUTO are;
 To provide adequate and qualitative computing laboratory for the
university.
 Internal and external computer services on consultancy basis and other
commercial ventures
 Computer resources to support faculty and students’ research and
production.

1.35 PROGRAMMES OFFERED

 AI and Robotics
 Arduino
 C++
 Python
 Solar Installation
 Java Programming

10
 CHAPTER TWO
2.0 TRAININGS AND PROJECTS
2.1 TRAININGS

2.11 Introduction to UI/UX Design:

User Interface (UI) and User Experience (UX) design are two integral components
of creating digital products, such as websites, mobile apps, and software
applications. These disciplines are crucial in ensuring that the end-users have a
positive and intuitive interaction with the product.

User Interface (UI) Design:

UI design primarily deals with the visual aspects and layout of a digital product. It
focuses on how the interface elements are presented to users and how they
interact with them. Key aspects of UI design include:
1. Visual Design: This encompasses the aesthetics of the interface, including
colour schemes, typography, icons, and overall styling. A well-designed UI is
visually appealing and aligns with the brand identity.
2. Layout: UI designers arrange elements on the screen to create a logical and
user-friendly flow. Effective layout design helps users easily understand the
hierarchy of information and navigate the product.
3. Interactive Elements: UI designers work on buttons, forms, menus, and other
interactive elements. They ensure that these elements are consistent in design
and behaviour, making it intuitive for users to perform actions.
4. Responsiveness: With the rise of various devices and screen sizes, UI designers
need to create responsive designs that adapt to different resolutions, ensuring a
consistent experience across platforms.

User Experience (UX) Design:

UX design is a broader discipline that encompasses the entire user journey and
aims to provide a seamless and satisfying experience. It involves understanding
user behaviour, needs, and motivations. Key aspects of UX design include:
1. User Research: UX designers conduct research to understand the target
audience. This may involve user interviews, surveys, and analytics data to gain
insights into user preferences and pain points.

11
2. Information Architecture: UX designers structure the content and information
within the product to make it easily accessible. This includes creating user flows
and sitemaps.
3. Usability Testing: UX designers often perform usability testing to evaluate how
users interact with the product. This helps identify usability issues and areas for
improvement.
4. Prototyping: Prototyping allows UX designers to create interactive mockups of
the product. This helps in visualizing and testing the user journey before the
development phase.
5. Accessibility: UX designers ensure that the product is accessible to users with
disabilities by following accessibility guidelines and best practices.

2.1.2 The Synergy between UI and UX:

UI and UX are closely intertwined, and their collaboration is essential for creating
successful digital products. A beautiful UI design is not enough if the user
experience is frustrating, and a well-planned UX can be undermined by poor UI
execution.
In essence, UI design focuses on the aesthetics and presentation, while UX design
focuses on the overall user journey and satisfaction. Both disciplines aim to create
products that are not only visually appealing but also functional, intuitive, and
user-centric. A harmonious blend of UI and UX results in products that not only
look good but also provide an excellent user experience, ultimately leading to
user satisfaction and product success.

2.1.3 Terms Used in UI/UX:

 User Persona: A detailed profile of a target user, aiding in understanding
their needs and behaviors.
 Information Architecture: The structural design of information within a
product, facilitating efficient navigation.
 Usability Testing: The process of evaluating a product with real users to
identify issues and gather feedback.

12
  Affordances: Visual or sensory cues that suggest how an element should
be interacted with.
 User Flow: The path a user follows through a product to accomplish
specific tasks.

2.1.4 Laws and Principles of UI/UX:

 Hick's Law: States that the time required to make a decision increases
with the number of choices presented, emphasizing the need for
simplicity.
 Fitts's Law: Describes the relationship between target size, distance, and
interaction time, highlighting the importance of accessible design.
 Gestalt Principles: Explain how users perceive and group visual
elements, including proximity, similarity, closure, and continuity.
 Consistency: UI elements should behave predictably across the product,
enhancing the user's sense of control and understanding.
 Accessibility: Designs should be inclusive, ensuring users with disabilities
have equal access to information and functionality.

2.1.5 User Research and Its Processes:

User research is the foundation of effective UI/UX design. Key processes include:
 User Interviews: Direct conversations with users to gather insights into
their goals and pain points.
 Surveys: Collecting quantitative data on user preferences and behaviors.
 Observation: Studying user behavior in their natural context, often via
usability testing.
 Competitor Analysis: Understanding how competitors approach UI/UX
design for benchmarking.
 User Testing: Evaluating the product with real users to identify usability
issues and gather feedback.
13
2.1.6 The Figma Interface
Figma is a powerful cloud-based design and prototyping tool that has gained
immense popularity among UI/UX designers and design teams. Its user-friendly
interface and collaborative features make it an invaluable resource for creating
and iterating on digital designs. In this detailed overview, we'll break down the
essential components and functionalities of the Figma interface.
 Dashboard: Upon logging in, users are greeted with their Figma dashboard.
This area provides an overview of recent projects, activities, and team
collaborations. It's the central hub for accessing your work and team-
related updates.
 Toolbar: Located at the top of the screen, the toolbar houses various tools
and options for designing and editing. These include selection tools,
drawing tools, text tools, and interactive components for creating and
manipulating design elements.
 Canvas: The central canvas area is where the magic happens. This is where
you create and arrange design elements, such as frames, shapes, text, and
images. Figma's canvas is infinite, allowing you to work on designs of any
size or complexity.
 Layers Panel: On the left side of the interface, you'll find the layers panel. It
displays a hierarchical list of all design elements within your current frame
or page. Layers can be grouped, organized into frames, and given
meaningful names for better project organization.
 Properties Panel: The right side of the interface houses the properties
panel. This panel provides detailed options and settings for the selected
design element. Depending on the selected element, you can adjust
properties like size, position, color, and more.
 Design Assets: Figma allows you to maintain a library of design assets, such
as colors, character styles, and components. These assets can be reused
throughout your project, ensuring design consistency. The assets are easily
accessible via the design assets panel.
 Prototyping: Figma's prototyping capabilities are integrated into the
interface. You can add interactions, transitions, and animations to your

14
 designs directly on the canvas. The prototype mode allows you to simulate
user flows and test your designs for usability.
 Collaboration Features: Collaboration is a core feature of Figma. Multiple
users can simultaneously work on the same design in real-time. The
interface includes tools for commenting, suggesting changes, and reviewing
design iterations. Collaboration makes Figma an excellent choice for design
teams.
 Version History: Figma automatically maintains version history for your
designs. This feature allows you to review and restore previous versions,
making it easy to track changes and revert if necessary.
 Export and Sharing: Figma offers various export options, including exporting
frames or assets as image files or code snippets. You can also share your
designs with collaborators or stakeholders by generating shareable links or
embedding designs on websites.
 Plugins: Figma supports a robust ecosystem of plugins that extend its
functionality. Users can install and use plugins to streamline various design
tasks, from icon generation to user testing.
 Design Settings: Figma allows you to customize design settings such as grid
layouts, constraints, and responsive design rules, making it adaptable to
different design needs.
 Organization Management: For teams and organizations, Figma provides
tools for managing users, permissions, and design libraries. It ensures
secure and efficient collaboration within larger design projects.

15
In conclusion, the Figma interface offers a comprehensive set of tools and
features that empower designers to create, collaborate, and iterate on digital
designs with ease. Its user-friendly interface, cloud-based accessibility, and real-
time collaboration capabilities have made it a go-to choice for designers and
design teams worldwide. Whether you're creating a simple prototype or a
complex user interface, Figma's interface provides the tools and flexibility needed
to bring your design ideas to life.

2.1.7 Adding Standard Grids:

Grids are crucial for alignment and organization of design elements. In Figma, you
can add and customize grids within artboards, ensuring design precision and
consistency.

2.1.8 Setting Up a Style Guide:

Setting up a style guide in UI/UX design using Figma is a crucial step in ensuring
design consistency and efficiency across projects. A style guide, often referred to
as a design system, serves as a centralized reference for design elements,
components, and guidelines. In this extensive guide, we'll walk through the
process of creating and using a style guide in Figma:
 Understanding the Importance of a Style Guide: A style guide is the
foundation of a consistent design language. It defines the visual and
interactive components of your user interface, ensuring that all design
elements align with your brand and project goals. It also streamlines
collaboration among design teams, developers, and stakeholders.
 Defining Your Design Principles: Before diving into Figma, establish clear
design principles that reflect your brand identity and user experience goals.
These principles will guide your style guide's creation. Consider aspects
such as typography, color schemes, iconography, spacing, and interactive
elements.
 Creating a New File in Figma: To set up your style guide, start by creating a
new Figma file specifically dedicated to this purpose. Choose a canvas size
and orientation that suits your needs.

16
 Typography and Text Styles: Begin by defining typography styles. Create
text elements with your chosen typefaces, sizes, line heights, and font
weights. Save these as text styles within Figma. Apply clear names and
descriptions to ensure easy reference.
 Color Palette: Establish a color palette that aligns with your brand. Define
primary and secondary colors, as well as variations for different use cases
(e.g., buttons, text, backgrounds). Create color swatches and name them
appropriately.

 Iconography: If your project includes custom icons or icon sets, design and
save them as components in Figma. Ensure that they are consistent in style
and follow your design principles. You can also incorporate popular icon
libraries available as Figma plugins.
 Components and Symbols: Figma allows you to create reusable
components and symbols. Design UI elements such as buttons, form fields,
headers, and footers as components. Make use of Figma's "Instance"
feature to reuse these elements throughout your projects while
maintaining consistency.
 Spacing and Layout Guidelines: Define spacing rules and layout guidelines.
Establish margin and padding values, grid systems, and rules for alignment.
Clearly document these rules in your style guide.
 Interactive Elements: If your project involves interactive components like
buttons, dropdowns, or modals, design and document their behavior.
Specify states, transitions, and animations.
17
  Documentation and Naming Conventions: Detailed documentation is
essential. Include explanations of each design element, its purpose, and
how to use it. Implement clear naming conventions to help designers and
developers locate and use components easily.
 Updating and Maintaining the Style Guide: A style guide is a living
document that should evolve with your project. Regularly update it to
incorporate new design patterns, address user feedback, or adapt to
changing brand guidelines.
 By following these steps and best practices, you can create an effective
style guide in Figma that promotes design consistency, collaboration, and a
seamless transition from design to development. A well-maintained style
guide is an invaluable resource for any UI/UX design project.

2.1.9 Prototyping in Figma

 Create Interactive Elements: Utilize Figma's prototyping features to link
screens and establish interactive elements such as buttons and
navigation.
 Define Transitions: Specify how screens transition between one another,
such as sliding or fading.
 Testing: Use Figma's preview mode to test the prototype's functionality.

 Gather Feedback: Share the prototype with stakeholders for feedback

and improvements.
18
  Iteration: Make necessary changes based on feedback and further
testing.
 Handoff: Provide developers with the prototype and design assets for
implementation.
2.2 PROJECTS

2.21 Designing a user flow in Figma

Objective:
The objective of this project was to design an intuitive and efficient user flow for
the checkout process of an e-commerce website. The goal was to ensure that
users could complete their purchase with ease, reducing cart abandonment and
improving user satisfaction.
Step 1: Understanding the Project Scope:
I began by meeting with the project stakeholders to understand the specific
requirements, target audience, and business goals. We defined the scope of the
user flow, focusing on the checkout process.
Step 2: User Persona Development:
To create a user-centric design, I worked on developing detailed user personas.
These personas represented different types of customers, each with unique
preferences and needs during the checkout process.
Step 3: Mapping the User Journey:
Using insights from the user personas, I mapped out the entire user journey from
product selection to completing the purchase. This included identifying
touchpoints, such as product pages, cart view, shipping, payment, and order
confirmation.
Step 4: Defining Entry Points:
I determined how users accessed the checkout process, which included entry
points like "Proceed to Checkout" buttons on product pages and the shopping
cart icon.
Step 5: Outlining Key Steps:

19
Breaking down the user journey, I outlined the key steps involved in the checkout
process. These included adding/removing items from the cart, inputting shipping
information, selecting payment methods, and confirming the order.
Step 6: Creating User Flow Diagrams:
Using design tools such as flowcharts and wireframes, I created visual
representations of the user flow. These diagrams illustrated the logical
progression through the checkout process, incorporating design elements and
interactions.
Step 7: Defining Decision Points:
I identified decision points where users might choose between different options,
such as shipping methods or payment options. Each decision point was clearly
defined with expected outcomes.
Step 8: Error Handling and Recovery:
Considering potential user errors or issues, I designed error messages, tooltips,
and alternative paths to guide users in case they encountered problems during
the checkout process.
Step 9: Mobile Responsiveness:
Ensuring that the user flow was responsive, I adapted the design to various screen
sizes and devices, providing a consistent experience for both desktop and mobile
users.
Step 10: Accessibility Considerations:
I ensured that the checkout process was accessible to all users, adhering to WCAG
guidelines. This involved designing for keyboard navigation, screen reader
compatibility, and color contrast.
Step 11: Documentation and Handoff:
Creating comprehensive documentation, I provided detailed user flow diagrams,
explanations, and notes. This documentation served as a reference for
development and future updates.
Step 12: Testing and Validation:

20
Once the design was implemented, I conducted usability testing with real users to
validate the effectiveness of the user flow, making necessary adjustments based
on user feedback.
The outcome of this project was a user flow design that enhanced the e-
commerce checkout experience, resulting in higher conversion rates and
improved user satisfaction.

2.2.2 Creating a Wireframe for an App Design

The goal of this project was to design wireframes for a workplace productivity app
that would assist employees in managing tasks, projects, and collaboration. The
wireframes were the initial step in visualizing the app's user interface and
functionality.
Step 1: Requirement Analysis
The first phase involved a comprehensive analysis of project requirements. This
included meetings with stakeholders to gather insights into their vision, goals,
target audience, and specific features they wanted to include in the app. It was
crucial to understand the unique needs of the workplace productivity app.
Step 2: User Research
User research played a vital role in shaping the wireframe design. Through
surveys, interviews, and studying user behavior in workplace environments, I
21
gained a deep understanding of the pain points and preferences of potential
users. This research informed the design decisions to ensure the app would meet
user needs effectively.
Step 3: Sketching and Ideation
With insights from the research, I started sketching initial concepts on paper. This
ideation phase allowed me to explore various layout options, navigation
structures, and feature placements. I focused on creating a user-friendly and
intuitive interface that would enhance workplace productivity.
Step 4: Wireframe Creation
Using digital design tools like Adobe XD or Sketch, I began creating low-fidelity
wireframes. These wireframes were a simplified representation of the app's
interface, with minimal design elements, to focus on layout and functionality. The
wireframes included screens for the app's main features such as task
management, project collaboration, and a user dashboard.
Step 5: Information Architecture
During wireframe creation, it was important to establish a clear information
architecture. I organized content logically, ensuring that users could easily
navigate between sections and find the information they needed. This involved
creating a menu structure and defining the flow between screens.
Step 6: Iterative Design
The wireframes underwent several iterations based on feedback from
stakeholders and usability testing. Each iteration refined the design, addressing
issues and making improvements to user flow, layout, and interactions. It was
essential to maintain flexibility in the design process to adapt to evolving
requirements.
Step 7: Annotation and Documentation
To ensure that the wireframes conveyed their purpose clearly, I added
annotations and explanations for each element. These annotations clarified the
intended functionality of buttons, forms, and interactive components.
Additionally, I created documentation that outlined design principles and
guidelines for future development.

22
Step 8: Usability Testing
Before moving on to high-fidelity design and development, usability testing was
conducted using the wireframes. Real users provided feedback on the wireframe's
usability and provided insights into areas that needed improvement. This testing
was invaluable in refining the user experience.

Step 9: High-Fidelity Design Preparation

Once the wireframes were finalized and approved, I prepared for the high-fidelity
design phase. This involved selecting color schemes, typography, and visual
elements to create a visually appealing interface while maintaining consistency
with the wireframes.
Step 10: Handoff to Development
The high-fidelity designs, along with the annotated wireframes and design
documentation, were handed off to the development team. They used these
materials as a reference for building the actual app, ensuring that the design
vision was faithfully implemented.
In conclusion, creating wireframes for the workplace productivity app involved a
structured and iterative process that integrated user research, ideation, and
collaboration with stakeholders. The wireframes served as the foundation for the
app's design and development, setting the stage for a user-friendly and
productivity-enhancing mobile application.

23
2.2.3 Designing an App Page or website page on Figma
The project's scope was to design and prototype the hero page, sign-in, and sign-
up pages of a mobile app dedicated to marketing luxury crafted bags. These pages
were crucial in making a strong first impression, enabling user registration, and
facilitating access for existing users.
Step 1: Research and Inspirations
We began the project by conducting thorough research on luxury fashion trends,
brand aesthetics, and user preferences for mobile app interfaces. Inspirations
were drawn from top-tier luxury brands renowned for their exceptional digital
experiences.
Step 2: User Persona Refinement
Building upon previous user personas, we further refined them to suit the specific
context of these pages. For the hero page, we targeted fashion-forward
individuals seeking unique luxury bags. For sign-in and sign-up, we considered
both prospective and existing customers, each with distinct needs.
Step 3: Wireframe Sketches
Initial sketches were created for the three pages:
1. Hero Page: Designed to captivate users, this page featured a visually striking
image carousel showcasing the bag collection, a concise tagline, and a call-to-
action button leading to the product listings.
2. Sign-In Page: Focused on ease of access for returning users, this page presented
fields for email/username and password, along with a "Forgot Password" link and
a sign-in button.
3. Sign-Up Page: Geared toward new users, this page allowed registration by
providing personal information, email, password, and optional newsletter
subscription. It also featured a "Sign Up" button.
Step 4: Wireframe Iteration and Stakeholder Feedback
The initial wireframes underwent iterative improvements based on feedback from
stakeholders. This refinement stage ensured that the design met the brand's
luxury aesthetics and the usability requirements for user interaction.

24
Step 5: High-Fidelity Design
Upon finalizing the wireframes, we transitioned to high-fidelity design. This phase
focused on:
Visual Elements: Incorporating a luxurious color palette, premium typography,
and high-resolution images to showcase the bags.
Brand Consistency: Ensuring that design elements aligned with the brand's
identity, including logo placement and style consistency.
User Interface Details: Designing intuitive input fields, buttons, and clear visual
hierarchy for effective user engagement.
Step 6: Interactive Prototyping
We used interactive prototyping tools to bring the high-fidelity designs to life.
Users could interact with the hero page's image carousel and navigate to the sign-
in and sign-up pages seamlessly. The prototype provided an accurate
representation of user flow.
Step 7: User Testing and Refinement
Usability testing was conducted, where participants interacted with the
prototype. Their feedback and insights guided further refinement of the
interactive elements, ensuring smooth user experiences.
Step 8: Final Adjustments and Stakeholder Approval
After incorporating user feedback and conducting final reviews, we made
adjustments and refinements to perfect the design. Once stakeholders approved
the final design and prototype, we proceeded to the development phase.
Step 9: Handoff to Development
We provided the development team with the approved design assets, style
guides, and the interactive prototype to facilitate the app's development. Close
collaboration between design and development ensured accurate
implementation.

25
In conclusion, designing and prototyping the hero page, sign-in, and sign-up pages
for a luxury crafted bags marketing app was a meticulous process that combined
research, iterative design, user testing, and stakeholder collaboration. These
pages were designed to create a luxurious and engaging user experience that
captures the essence of the brand while facilitating user access and registration.

CHAPTER 3
3.0 CONCLUSION
3.1 SUMMARY OF THINGS LEARNT
UI (User Interface) and UX (User Experience) design are intricately linked
disciplines crucial in developing digital products. UI centers on the visual
26
elements, appearance, and layout of an interface, ensuring it's aesthetically
pleasing and user-friendly. On the other hand, UX dives deeper into the overall
user journey, optimizing every interaction, from initial research to final
interaction. Understanding the principles, processes, and effective use of tools
like Figma is essential for delivering exceptional user experiences. By harmonizing
these two, designers create captivating, intuitive, and functional products that
prioritize user satisfaction and success.

3.2 SUMMARY OF PROJECTS EXECUTED

Project 1: Designing a User Flow for an E-commerce Checkout Process
Objective: Create an intuitive and efficient user flow for an e-commerce checkout
process.
Key Steps: Defining objectives, user research, wireframe creation, usability
testing, and documentation.
Outcome: A streamlined checkout process that enhances user experience and
reduces cart abandonment.

Project 2: Workplace Productivity App - Wireframe Design

Objective: Design wireframes for a workplace productivity app.
Key Steps: Requirement analysis, user research, wireframe sketches, information
architecture, iterative design, high-fidelity design preparation, usability testing,
and handoff to development.
Outcome: Wireframes that serve as a foundation for the app's user interface and
functionality.
Project 3: Luxury Crafted Bags Marketing App - Design and Prototyping
Objective: Design and prototype the hero page, sign-in, and sign-up pages for a
luxury crafted bags marketing app.
Key Steps: Research and inspiration gathering, user persona refinement,
wireframe sketches, high-fidelity design, interactive prototyping, user testing, and
stakeholder approval.
27
Outcome: Visually captivating pages that embody luxury, facilitate user access,
and support registration, enhancing the brand's digital presence.
Each project involved a distinct set of objectives, steps, and outcomes, catering to
specific design and user experience goals.

3.3 RECOMMENDATION
I wish to appreciate the school management for giving the students the privilege
to partake in this short Industrial training. However, I would like to suggest that
the school management should try to keep the time frame for any Industrial
training a minimum of 2-3 months as this will give students more time to explore
and learn more during the IT. This is because, the SIWES is an important and
mandatory program for all students in higher institution which must be taken
with all seriousness as it serves as an eye opener to students to the practical
aspect of their courses and prepares them for real situation.

REFERENCES
"Don't Make Me Think" by Steve Krug
"The Design of Everyday Things" by Don Norman
"Seductive Interaction Design" by Stephen Anderson
"Designing Interfaces" by Jenifer Tidwell
Coursera

28
Udemy
Interaction Design Foundation
Smashing Magazine (smashingmagazine.com)
Nielsen Norman Group (nngroup.com)
UX Design (uxdesign.cc)

29