EBONYI STATE UNIVERSITY

ABAKALIKI

DEPARTMENT OF COMPUTER SCIENCE

SIX MONTHS REPORT ON STUDENTS INDUSTRIAL WORK

EXPERIENCE SCHEME (SIWES)

AT
LISTACC LIMITED,
3RD FLOOR, DREAMLINK INVESTMENT, MILE 50 ABAKALIKI,
EBONYI STATE.

ALUKO OLUWATOYOSILORUN OLAIDE

EBSU/2017/88889

SIWES SUPERVISOR:
MAZI VINCENT ESOMCHI

May , 2021.
 SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS
FOR THE AWARD OF BACHELOR OF SCIENCE (B.Sc) DEGREE, IN
THE FACULTY OF SCIENCE, OF EBONYI STATE UNIVERSITY ,
ABAKALIKI.

DEDICATION

This report is dedicated foremost to God Almighty, then to my parents and siblings

for their love and support and also my friend Mercy Amah, she's God sent and to

everyone else that contribute towards making my SIWES training successful .

 ACKNOWLEDGEMENT

My appreciation goes to the industrial Training Fund for their foresight in putting

this program in place.

I am grateful to Listacc Tech Academy for providing me with the necessary skills

to be exposed in my field. I also want to say a big thank you to my industry based

supervisor Mr. Vincent Esomchi. Including Mr. Kayode and Mr. Steve, you guys

are amazing, and I appreciate my able colleagues for making my stay at Listacc

Tech Academy an exciting and blissful one.

I am deeply indebted to God almighty, the giver of all wisdom, knowledge and

understanding, without whom I would have achieved nothing at all. Finally to my

Institution based supervisor for his support. Thank you all, I am highly grateful.
 ABSTRACT

This industrial report presents the experience gained during my six (6) months of
industrial training undertaken at Listacc Tech Academy, 3rd floor, Dreamlink
investment, Mike 50, Abakaliki, Ebonyi State. My training was on User Interface
design.
I acquired practical knowledge on how to design prototypes for web site and
applications.
This report discusses the technical skills gained during the training period and
justifying the relevance of the scheme in equipping students with needed technical
competence to thrive in the real world.
 TABLE OF CONTENT

Cover Page
Title Page
Dedication……………………………………………………………………………...1
Acknowledgement……………………………………………………………………..2
Abstract…………………………………………………………………………….......3
Table of Content………………………………………………………………….…….4

Chapter 1
Introduction…………………………………………………………………….…..….1
Purpose of training...………………………………………………….………….……...6
Brief story of Siwes……………………….………………………….………….….......7
Bodies involved in Siwes...….………………………………………….….……….…....7
Nature and scope of Siwes.................................................................................................8
Aims and objectives of Siwes…………………………………………………………….8
Benefits of Industrial Training………………………………………………….….….....8
Description of the establishment of the attachment……………………………………..9
Objectives and vision of Listacc Tech Academy..………………………………………….......9
Company’s area of specialization…………………………………………………….….10
Departments in the company………………………………………………………….....10

Chapter 2
Industrial Experience……………………………………………………………………2
Technology Training
department…………………………………………………………….........11
Definition of terms…………………………………………………………………….....11
Design thinking and its processes…………………………………………………………….
…...12
Color Theory……………………………………………………………….…...15
Wire framing and tools…………………………………………….….....17
Typography…………………………………………………………......18
Product/User flows……………………………………..26
Buttons…………………………………………………………………...27

Chapter 3
Skills acquired and challenges encountered…………………………………………3
Technical skills acquired……………………………………………………………...37
Social and functional skills acquired...........................................................................37
Personal input to the company (Listacc Tech Academy)…………………………………...38
Challenges encountered………………………………………………………….…...38

Chapter 4
Conclusion and Recommendations………………………………..…………………4
Conclusion………………………………………………………………………….....39
Recommendations……………………………………………………………............39

Reference……………………………………………………………………………..40
 CHAPTER 1

INTRODUCTION

1.0 PURPOSE OF TRAINING:

The student industrial work experience scheme (SIWES) popularly called Industrial

Training (IT) by Nigerian students is a yearly program design 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 practical’s 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 crisis in recent time. Both the developed and developing

economics are experiencing serious economic downturns.

It is through this Industrial Training that the educational systems aims at helping students

acquire appropriate skills, abilities and competencies, both mental and physical, as well as equip

the individuals to live in 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 its youth 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 SIWES: (Student Industrial Work Experience Scheme)

Since the aim of our national policy in education is to build a strong and self- reliant

nation, from the government’s decree No.47 of 8th October, 1971 as amended in1990, 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 and through the formation of this body (ITF), in the year

1993/1974 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 make

education more relevance 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.2 BODIES INVOLVED IN SIWES:

The main bodies involved in Student Industrial Work Experience Scheme are;

The tertiary institutions and the Federal Government through the Industrial Training Fund (ITF).

Other supervising agencies include:

1. National University Commission (NUC)

2. National Board for Technical Education (NBTE)

3. National Council for colleges for Education (NCCE)

4. Tertiary Institutions (Universities, Polytechnics, Colleges of Education)

1.3 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 240hrs full

time which will take place during term-time or long vocation.

1.4 AIMS AND OBJECTIVES OF SIWES:

The specific objectives of SIWES were summarized by the federal government as follows:

1. To provide students with an opportunity to apply their knowledge in real work and actual

practice.

2. To make the transition from school to the world of work easier and to enhance students

contacts for later job placement.

3. They also include providing a structural attachment program with emphasis applications,

management and hands-on experience for students to apply knowledge acquired.

4. It also aids students to acquire practical skill in other to strengthen their work value.

1.5 BENEFITS OF INDUSTRIAL TRAINING:

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.

1.6 DESCRIPTION OF THE ESTABLISHMENT OF THE ATTACHMENT

The establishment is called Listacc Tech Academy; it is an information and

communication technology company with broad expertise in ICT consultancy. Listacc is a

Technology Innovation & Software Laboratory in Abakaliki that helps facilitate the growth of

Software Developers, Innovators, Start-ups, Enterprises and Business in Africa. This large

technology-oriented corporation builds an ecosystem that facilitates innovation at the speed of

light and equips the community for developers and start-ups founders.

1.7 VISION AND MISSION OF LISTACC TECH ACADEMY

To put technological solutions in the hands of every individual and organization, And to stay true

and dedicate to improving lives and ways of living through the application of leading edge

technology in providing efficient solutions to the daily challenges of people in a timely manner.

1.8 COMPANY’S AREA OF SPECIALIZATION

With a team of seasoned Software Engineers and Programmers with proven track records in

computer and communication business, the company offers the following wide areas of

specialization

1. Software Development

2. Networking Infrastructure Deployment

3. Technology Training

1.9 DEPARTMENTS IN THE COMPANY

A. Development Operations (Software Development)

B. Finance
 C. Administration

D. ICT Academy,

E. School Cater

F.

CHAPTER 2

INDUSTRIAL EXPERIENCE

2.0 TECHNOLOGY TRAINING DEPARTMENT

This department was where my Industrial Training took place where I was grounded and

exposed to the design world especially the creation of prototypes of mobile and web interfaces

taking me step by step with practical all through the process.

2.1 DEFINITION OF TERMS

The following are terms that were made use of, in my option

USER INTERFACE:

A user interface is the point of interaction between the user and a digital device or product—like

the touchscreen on your smartphone, or the touchpad you use to select what kind of coffee you

want from the coffee machine. In relation to websites and apps, UI design considers the look,

feel, and interactivity of the product. It’s all about making sure that the user interface of a

product is as intuitive as possible, and that means carefully considering each and every visual,

interactive element the user might encounter. A UI designer will think about icons and buttons,

typography and color schemes, spacing, imagery, and responsive design. It is responsible for the

transference of a product’s development, research, content and layout into an attractive, guiding

and responsive experience for users.

USER EXPERIENCE DESIGN:

User experience design is a human-first way of designing products. Don Norman, a cognitive

scientist and co-founder of the Nielsen Norman Group Design Consultancy, is credited with

coining the term “user experience” in the late 1990s. Here’s how he describes it:

“User experience encompasses all aspects of the end-user’s interaction with the company, its

services, and its products.”

– Don Norman, Cognitive Scientist & User Experience Architect. UX Design encompasses any

and all interactions between a potential or active customer and a company. As a scientific

process it could be applied to anything; street lamps, cars, Ikea shelving and so on. However,

despite being a scientific term, its use since inception has been almost entirely within digital

fields; one reason for this being that the tech industry started blowing up around the time of the

term’s invention.

Essentially, UX applies to anything that can be experienced—be it a website, a coffee machine,

or a visit to the supermarket. The “user experience” part refers to the interaction between the user

and a product or service. User experience design, then, considers all the different elements that

shape this experience. A UX designer thinks about how the experience makes the user feel, and

how easy it is for the user to accomplish their desired tasks. The ultimate purpose of UX design

is to create easy, efficient, relevant, and all-round pleasant experiences for the user.

PROTOTYPE:

Prototype literally is the first design of something

2.2 DESIGN THINKING AND IT'S PROCESSES

Design thinking is the set of cognitive, strategic and practical processes by which design

concepts (proposals for products, buildings, machines, communications, etc.) are developed.
Many of the key concepts and aspects of design thinking have been identified through studies,

across different design domains, of design cognition and design activity in both laboratory and

natural contexts.

Design Thinking is a design methodology that provides a solution-based approach to solving

problems.It’s extremely useful in tackling complex problems that are ill-defined or unknown, by

understanding the human needs involved, by re-framing the problem in human-centric ways, by

creating many ideas in brainstorming sessions, and by adopting a hands-on approach in

prototyping and testing.

 Empathize

The first stage of the Design Thinking process is to gain an empathic understanding of

the problem you are trying to solve. This involves consulting experts to find out more about the

area of concern through observing, engaging and empathizing with people to understand their

experiences and motivations, as well as immersing yourself in the physical environment so you

can gain a deeper personal understanding of the issues involved. Empathy is crucial to a human-

centered design process such as Design Thinking, and empathy allows design thinkers to set

aside their own assumptions about the world in order to gain insight into users and their needs.

Depending on time constraints, a substantial amount of information is gathered at this stage to

use during the next stage and to develop the best possible understanding of the users, their needs,

and the problems that underlie the development of that particular product.

 Define (the Problem)

During the Define stage, you put together the information you have created

and gathered during the Empathise stage. This is where you will analyse

your observations and synthesise them in order to define the core problems
that you and your team have identified up to this point. You should seek to

define the problem as a problem statement in a human-centred manner.The

Define stage will help the designers in your team gather great ideas to

establish features, functions, and any other elements that will allow them to

solve the problems or, at the very least, allow users to resolve issues

themselves with the minimum of difficulty.

 Ideate

During the third stage of the Design Thinking process, designers are ready to start generating

ideas. You’ve grown to understand your users and their needs in the Empathise stage, and you’ve

analysed and synthesised your observations in the Define stage, and ended up with a human-

centered problem statement. With this solid background, you and your team members can start to

"think outside the box" to identify new solutions to the problem statement you’ve created, and

you can start to look for alternative ways of viewing the problem. There are hundreds of Ideation

techniques such as Brainstorm, Brainwrite, Worst Possible Idea, and SCAMPER. Brainstorm

and Worst Possible Idea sessions are typically used to stimulate free thinking and to expand the

problem space. It is important to get as many ideas or problem solutions as possible at the

beginning of the Ideation phase. You should pick some other Ideation techniques by the end of

the Ideation phase to help you investigate and test your ideas so you can find the best way to

either solve a problem or provide the elements required to circumvent it.

 Prototype

The design team will now produce a number of inexpensive, scaled down versions of the product

or specific features found within the product, so they can investigate the problem solutions

generated in the previous stage. Prototypes may be shared and tested within the team itself, in
other departments, or on a small group of people outside the design team. This is an experimental

phase, and the aim is to identify the best possible solution for each of the problems identified

during the first three stages. The solutions are implemented within the prototypes, and, one by

one, they are investigated and either accepted, improved and re-examined, or rejected on the

basis of the users’ experiences. By the end of this stage, the design team will have a better idea

of the constraints inherent to the product and the problems that are present, and have a clearer

view of how real users would behave, think, and feel when interacting with the end product.

 Test

Designers or evaluators rigorously test the complete product using the best solutions identified

during the prototyping phase. This is the final stage of the 5 stage-model, but in an iterative

process, the results generated during the testing phase are often used to redefine one or more

problems and inform the understanding of the users, the conditions of use, how people think,

behave, and feel, and to empathise. Even during this phase, alterations and refinements are made

in order to rule out problem solutions and derive as deep an understanding of the product and its

users as possible.

2.3 COLOR THEORY

Color theory is the tradition of mixing and combining colors to help define them and

explain how they relate to themselves. The color theory was first developed by Leonardo da

Vinci and Isaac Newton.

2.3.1 CATEGORIES OF COLOR

The following are the various categories of color

1. Primary colors

2. Secondary colors
 3. Tertiary Colors

There are rules that can be applied to the wheel to find complementing or contrasting

colors.

Complementary colors are opposites in the color wheel, Analogue colors are side-by-

side, Triadic colors are equally spaced

2.3.2 COLOR WHEEL

A color wheel or color circle[1] is an abstract illustrative organization of color hues

around a circle, which shows the relationships between primary colors, secondary colors, tertiary

colors etc.

2.3.3 WHY IS COLOR SO IMPORTANT?

Color influences how we feel

 Red signifies Passion, Love, Anger, Fire,Luck

 Orange represents Creativity, Energy, Change

 Yellow conotes Hope,Sunshine,Happiness,Joy

 Green denotes New beginnings,Health,Growth,Envy,Naivety

 Blue stands for Trust,Peace,Strength

 Purple can mean Luxury.,Wealth,Imagination

2.3.4 CONSIDERATIONS FOR CHOOSING COLORS FOR YOUR DESIGN

1. What story are you telling?

2. Is it a journey that changes along the way?

3. What do you want the audience to feel?

4. Who are your audience?

 5. Does it match, complement or contrary your brand?

2.3.5 PROPERTIES OF COLOR

1. Hue

Hue refers to the actual name of the colour like Red, Yellow, Orange, Blue, and Green etc. There

is a difference between hue name and colour name. The hue name of a colour is more distinct

and clear the colour name. For example, the hue name of the sky is ‘sky blue’ whereas its colour

name is “azure”. The hue name of fire is ‘golden’ whereas its colour name is ‘flame’.

2. Value

Value is the lightness or darkness of the colour. One colour has so many values ranging from

light to dark. The lightest value of all colours is white and darkest value is black. Black, white

and grey are neutral colours. In between white and black there are number of values which are

known as ‘middle value’ or ‘normal values’. The light value of colour is called as ‘tint’ and the

dark value as ‘shade’.

For example, the tint of red colour is ‘pink’ whereas the shade is ‘Maroon’. In order to get light

value of one colour, white is added and to get dark value, black is mixed. All colours have a

number of values. White is also known as highest value as no hue is as light as white. Black is

the lowest value as no hue is as dark as black. Light values increase the size of the object and

dark values decrease it.

3. Intensity

Intensity is the brightness or dullness of a colour. Intensity of a colour is usually achieved by

mixing it with its complement and sometimes by addition of grey colour. The colours in the

outer circle of the Prang Colour Chart are of high intensity and those inside it are of low
intensity. Objects with colour of full intensity are striking and brilliant and of low intensity are

sober and dull. Intensity is more in smaller space whereas it is less in large space.

2.4 WIREFRAMING AND IT'S TOOLS

A website wireframe (page schematic/screen blueprint) is a visual guide that represents

the skeletal framework of a website. Wireframes are created for the purpose of arranging

elements to best accomplish a particular purpose. It also helps to work in a really minimal ways

to start organizing the information and start figuring out the flow of a page before you start

worrying about things like fonts and the colors and making everything pixel perfect. With

wireframing, you allow yourself to work really quickly and generate lots of ideas.

2.5.1 IMPORTANCE OF WIREFRAMING

1. It helps to make design iterative.I.E helps a designer constantly make changes

2. It helps to focus on functionality rather than combining functionality and aesthetics.

2.5.4 DIFFERENCE BETWEEN LOW FIDELITY (WIREFRAMES) AND HIGH

FIDELITY (HI-FI) DESIGNS

Wireframes focus more on the structure or skeletal form of the product and act as place

holders while hi- fi designs provides details such as colors and typography

2.5.5 WIREFRAMING TOOLS

1. Whimsical

2. Micro

3. Figma

4. Adobe xd

5. Adobe illustrator

6. Microsoft PowerPoint
 7. Axure RP

8. UXPin

2.5.6 Ideation and Validation

Wireframing is more than just a way to sketch an idea on your computer. It is used so

often because it helps answer 2 common questions software builders face. These

questions can be split up into 2 distinct phases: the ideation phase and the validation

phase.

 The ideation phase

The first question, trying to figure out how your product can solve customer problems,

lives in the ideation phase of the wireframing process.

This is where you generate as many ideas as possible in order to iterate toward

better and better solutions.The ideation phase is one of the few places where quantity matters as

much as quality. The ability to generate multiple ideas and variations on a single idea allows you

to see the faults and highlights of each.

The more designs you put down on the screen, the more individual ideas you have to choose

from. The root of "creative," after all, is "create"; that’s the strategy here.

A helpful way to think about this phase is to flip convention around. Focusing on creating only

good ideas may restrict you; instead, try to create as many bad ideas as possible. This will

remove creative blocks and free you up to just produce. You won’t get to "aha!" without going

through "oh, no!"

Tips for using wireframing for ideation

 Don't refine or dive too deep too quickly. Get messy. Add, add, add. Subtract later.

 Don't judge your ideas before putting them on the page. Create first, reflect later.
  Learn to think separately about structure, layout, content, and functionality.

 Practice working with different levels of detail until you find just the right amount of

detail, and no more.

 The validation phase

The second question, determining whether your proposed solution will be successful, belongs to

the validation phase of the wireframing process.

Whatever your role in the software development process, you are lacking information and

knowledge required to build the best solution. You may be missing essential information about

your customer, or the limitations of the technology, or some marketing data. In any case, to

refine and optimize your solution, you need involvement from other stakeholders.Showing your

wireframes to others allows them to validate and improve your ideas.

The validation phase shouldn’t be thought of as the place to get "sign off" or approval to start

building right away. If you’ve done it right, your wireframes should invite conversation. If they

look too polished and "final" you may not get very helpful feedback.

Wireframes should communicate "Here’s what I’m thinking..." when you show them, not "This

is what we’re going to build." Assume that the people who you are showing your wireframes to

have knowledge that can help you make them better. Your job is to get it out of them. You don’t

need to show all your ideas during the validation phase. Here’s where you can narrow down and

focus on the better ones. That said, it’s perfectly acceptable to show variations on an idea or even

different directions completely. This reinforces the point that wireframes are a conversation

starter, not a finished product. You may want to keep a few alternate ideas in your back pocket

anyway in case your preferred ones don’t go over well. In this phase, it’s important to think of
your wireframes as communication artifacts. Their job is to help other people understand your

ideas. Visuals are very effective for conveying ideas, which is the true power of wireframes.

One last thing to consider as part of this phase is evaluating your ideas in terms of usability.

Usability inspection methods and observing users try your solution in usability tests will help in

this regard.

Tips for using wireframes for validating ideas

 Show a variety of ideas. This helps move the conversation forward (prompting useful

feedback like "I like A more than B") and also proves that you put thought into your

designs.

 Prepare your wireframes for viewing. Take some time to clean them up a bit. Link them

together to help tell the story or even create polished versions of them.

 Use a presentation mode to show only the wireframes without the editor around them.

 Don’t let the wireframe do all the talking. Supplement missing details with your own

words rather than trying to let the wireframe tell the whole story.

 Add annotations as needed for later viewing and sharing (which can be turned off when

presenting).

2.6 TYPOGRAPHY

Typography design is the art and technique of arranging type. It's at the centre of a

designer's skillset and is about much more than simply making the words legible. The typeface

you choose and how it works with your layout, grid, colour scheme and so on will make the

difference between a good, bad and great design.

2.6.1 Font selection

Font design is a long and involved process. Typefaces are created by craftspeople over a

substantial period of time, using talent honed over many years. The best, professionally designed

fonts come with various weights and styles to form a complete family, plus carefully considered

kerning pairs, multi-language support with international characters and expressive alternate

glyphs to add character and variety to typesetting.

2.6.2 Size

All typefaces are not created equal. Some are fat and wide; some are thin and narrow. So words

set in different typefaces can take up a very different amount of space on the page.The height of

each character is known as its 'x-height' (quite simply because it's based on the 'x' character).

When pairing different typefaces, it's generally wise to use those that share a similar x-height.

The width of each character is known as the 'set width'. This spans the body of the letter, plus the

space that acts as a buffer between one letterform and the next.The most common method used

to measure type is the point system, which dates back to the 18th century. One point is 1/72 inch.

12 points make one pica, a unit used to measure column widths. Type sizes can also be measured

in inches, millimetres, or pixels.

2.6.3 Leading

Leading describes the vertical space between each line of type. It's so named because, in the days

of metal typesetting, strips of lead were used to separate lines of type. For legible body text that's

comfortable to read, a general rule is that your leading value should be anything between 1.25

and 1.5 times greater than the font size.

2.6.4 Tracking and Kerning

Kerning is the process of adjusting the space between characters to create a harmonious pairing.

For example, where an uppercase 'A' meets an uppercase 'V', their diagonal strokes are usually

kerned so that the top left of the 'V' sits above the bottom right of the 'A'.

Kerning is similar to tracking, but they are not the same thing. Tracking is the process of

adjusting the spacing of all characters in a word, and is applied evenly.

2.6.5 Measure

The term 'measure' describes the width of a text block. If you're seeking to achieve the optimum

reading experience, it's clearly an important consideration. If your lines are too long, your reader

can easily get lost, while a too-short measure breaks up the reading experience unnecessarily.

There are a number of theories to help you define the ideal measure for your typography. One

rule of thumb is that your lines should be 2-3 alphabets in length (so 52-78 characters, including

spaces).

2.6.6 Hierarchy and Scale

If all the type within a layout looks the same, it's difficult to know which is the most important

information. Size is one key way in which typographers create hierarchy and guide their readers.

Headings are usually large, sub-headings are smaller, and body type is smaller still.

Size is not the only way to define hierarchy – it can also be achieved with colour, spacing and

weight.

2.7 PRODUCT/USER FLOW

The concept of flow in UX design was first coined by the psychologist Mihaly Csikszentmihalyi.

He deemed it a highly focused mental state where the user is fully immersed in what they are

doing and the task they aim to accomplish. It is often referred to as being “in the zone”. User

flows help designers understand and anticipate the cognitive patterns of our users in order to
create products that enable this state of flow.User flows, UX flows, or flowcharts, as they are

sometimes called, are diagrams that display the complete path a user takes when using a

product. The user flow lays out the user’s movement through the product, mapping out each

and every step the user takes—from entry point right through to the final interaction.

There are many different pathways a user can take when interacting with a product. A user flow

is a visual representation, either written out or made digitally, of the many avenues that can be

taken when using an app or website. The flowchart begins with the consumer’s entry point on the

product, like an onboarding screen or homepage, and ends with the final action or outcome, like

purchasing a product or signing up for an account. Depicting this process allows designers to

evaluate and optimize the user experience and therefore increase client conversion rates.

2.7.1 Importance of Userflow

User flows are extremely useful if you need to:

 Create an intuitive interface

The main benefit of designing a product where users can get “in the zone” quickly is the ability

to increase the probability of a user purchasing or signing up for the client’s product. Another

benefit is enhancing the ease of movement through your platform, making sure the user’s time

isn’t being wasted looking for what to do next. Of course, there is often more than one route a

user could follow to complete the task. User flows portray these possible patterns in a way that

makes it easy for designers to assess the efficiency of the interface they are creating.

 Evaluate existing interfaces

For products that are already in use, user flow charts help determine what’s working, what’s not,

and what areas need improvement. It helps to identify why users might be stalling at a certain
point and what you can do to fix it. Does one screen flow into the next? Does the pattern of the

screens make sense? Mapping out the movement within an interface in a blueprint type fashion

helps you see what options the user has on each page and if the routes available help the user

accomplish a task innately and without wasting time.

 Present your product to clients or colleagues

User flows also easily communicate the flow of the product to your stakeholders and provide a

general view of how the interface you’ve created is intended to work in its most efficient form.

They provide a step-by-step breakdown of what the customer will see and do in order to

purchase, log in, sign up, etc. Helping your design team visualize how users will move through

the product ensures everyone is on the same page—which allows for a more productive and

rewarding work environment.

2.7.2 Types of user flow charts

UX flows can be used for all kinds of interface and web design, but certain types of flowcharts

are more valuable than others depending on what you are creating. Here we describe a few of the

user flow variations and when to use them.

 Task flows

Task flows focus on how users travel through the platform while performing a specific task.

They generally show only one path and don’t include multiple branches or pathways like a

traditional user flow might. These are best used when the task being analyzed is accomplished

similarly by all users. When using task flows, it is assumed that all users will share a common

starting point and have no variability in the way the task is carried out.

 Wire Flows
Wireflows are a combination of wireframes and flowcharts. They utilize the layout of individual

screens as elements within the diagram. Wireframes on their own help convey the layout and

design on each individual page, but lack the ability to communicate the page-to-page flow of

heavily dynamic interfaces. Wireflows add page context to UX flows, since what users see on

each screen greatly impacts their experience through the app or website. Wireflows are

especially great when creating mobile screens. The relatively small size of the mobile screens are

easily used to replace the more abstract shapes of flow charts.

 User Flows

User flows focus on the way your target audience will interact with the product. They emphasize

that all users might not perform tasks the same and may travel in different paths. They are

typically attached to a specific persona and entry point. Therefore, when using this type of

flowchart, you may have many different scenarios that start at different places. However, the

main task or accomplishment is usually always the same.

2.8 BUTTONS

While they may go unnoticed if they’re implemented properly, buttons are a vital element

in creating a positive and productive user experience. At their most basic, UX buttons are styled

links that grab the user’s attention and help drive them in a particular direction. Buttons can link

us to other pages or complete an action like submitting a form or making a purchase. They are

often used as calls to actions (CTA) we want our users to complete on our website.

2.8.1 Common types of UX buttons

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate

actions that users can take. They are typically placed throughout your website UI, and they

should be easily findable and identifiable while clearly indicating the action they allow a user to

complete. In most cases, there are 5 main types of UX buttons: text, ghost, raised, toggle, and

floating action buttons.

 Text buttons

Text buttons are text labels that fall outside of a block of text. The text should describe the action

that will occur if a user clicks or taps a button. Text buttons have a low level of emphasis and are

typically used for less important actions. Because text buttons don’t have a container, they don’t

distract from nearby content.

 Ghost buttons

Outlined buttons (often called “ghost” buttons) are a step up in complexity and emphasis from a

text button in button design. They typically indicate actions that are important but not the

primary action on a page. Outlined buttons should be exactly that: an outline with no fill

surrounding text that indicates an action.ost buttons

Outlined buttons (often called “ghost” buttons) are a step up in complexity and emphasis from a

text button in button design. They typically indicate actions that are important but not the

primary action on a page. Outlined buttons should be exactly that: an outline with no fill

surrounding text that indicates an action.

 Raised buttons

Raised (or “contained”) buttons are typically rectangular buttons that “lift” from the surface of

the screen via use of a drop shadow. The shadow helps indicate that it is possible to click or press
the button. Raised buttons can add dimension to mostly flat layouts, and they highlight

functionality on busy, wide, or otherwise congested spaces.

 Toggle buttons

Toggle buttons are typically used in button design for one of two reasons: to group related

options or to showcase a selected action or setting. For the former, only one option in a group of

toggle buttons can be selected and active at a time. Selecting one option deselects any other. For

the latter, the toggle button indicates whether an option is active or inactive.

 Floating action buttons

According to Google, “A floating action button (FAB) performs the primary, or most common,

action on a screen. It appears in front of all screen content, typically as a circular shape with an

icon in its center.” A FAB should perform a constructive action such as creating a new item or

sharing the item on screen.

2.8.1 Placement

Regarding UX button placement, try to use traditional layouts and standard UI patterns as much

as possible because conventional placement for buttons improves discoverability. Using a

standard layout will help users understand the purpose of each element — even if it’s a button

without other strong visual signifiers. Combining a standard layout with clean visual design and

ample whitespace makes the layout more understandable.

2.8.2 Microcopy

UX button microcopy is often a call-to-action that tells users what action they will complete if

they click the button. Strong CTA microcopy has to catch users’ attention quickly and lead them

right to the action.

For a more effective call-to-action, keep the number of words at minimum. A few appropriately

chosen words are much more effective than a long descriptive phrase. In addition, using action

verbs and phrases like “Add to Cart” or “Submit” in CTA microcopy can help you give strong

and direct instructions to your users on what to do next.

CHAPTER THREE

SKILLS ACQUIRED AND CHALLENGES ENCOUNTERD

3.0 TECHNICAL SKILLS ACQUIRED

Below are list of skills I acquired during my Industrial Training at LISTACC TECH ACADEMY

 Deep knowledge in understanding design.

 Ability to create prototypes with Adobe XD.

 Ability to create prototypes with Figma.

 Ability to create user interfaces by logically connecting artboards.

 Debugging errors and been creative in arrangement of artboards.

 Installing Adobe Xd and Adobe Illustrator.

 Ability to Insert, Update, Select, Remove background of images.

3.1 SOCIAL AND FUNCTIONAL SKILLS ACQUIRED

 Enhanced communication skills.

 Ability to identify and solve problems relating to User interface design.

 Decision making, critical thinking, organizing and planning.

  Ability to work with team.

 Enhanced teaching and effective learning skills

 Enhanced digital skill

3.2 PERSONAL INPUT TO THE COMPANY (LISTACC TECH ACADEMY)

 Teaching and assisting fellow students through their lessons.

 Running of errands to boost activities in the workplace.

 Check and work on colleague’s systems when challenge with an error.

 Help in installing various development applications to colleagues.

3.3 CHALLENGES ENCOUNTERD

 Difficulty in seeking for IT attachment.

 Lack of transportation fee.

 Lack of stable access to internet connection

CHAPTER FOUR

CONCLUSION AND RECOMMENDATIONS

4.0 CONCLUSION

My Six (6) months Industrial Training at LISTACC TECH ACADEMY was a huge

success and a great time of acquisition of knowledge and skills. Through my training I was able

to appreciate my chosen course of study even more, because I had the opportunity to blend the
theoretical knowledge acquired from school with the practical hands-on application of

knowledge gained here to perform very important tasks that contributed in a way to my

productivity in the company. My training here has given me a broader view to the importance

and relevance of Computer Science in the immediate society and the world as a whole, as I now

look forward to impacting it positively after graduation. I have also been able to improve my

communication and presentation skills and thereby developed good relationship with my fellow

colleagues at work. I have also been able to appreciate the connection between my course of

study and other disciplines in producing a successful result.

4.1 RECOMMENDATIONS:

 School should provide a place of attachment for student.

 Allowances should be paid to students during their programme just like NYSC and not

after.

 Supervisor should always visit student monthly in their various places of attachment.

REFERENCE

PAPER

 Student industrial work experienced scheme 2017/2018 handbook

LINK

 https://careerfoundry.com/

 https://creativebloq.com/
 https://premiumbeat.com/

 https://invisionapp.com/

 https://interaction-design.org/

 https://www.balsamiq.com/

 https://Wikipedia.org/

 https://yourarticlelibrary.com/

SOME OF MY WORKS