1

Connecting Women To The Knowledge

Economy 4.0

UX/UI DESIGN
 2

Introduction to UI/UX Design

COURSE OVERVIEW & LESSON OUTCOMES 3

This course introduces participant to the concept of UX/UI design. What UX/UI is about, their
differences and the elements of User experience

In this course, you will learn

The Definition of user experience
design and User interface design

State out the differences between User

experience and User interface design

Know all the elements of User

Experience design
 4

“I invented the term because I thought human interface

and usability were extremely good.
I wanted to cover all aspects of the person's experience
“ UI is the
saddle, the
stirrups, and
the reins. UX is
with the system including industrial design graphics, the feeling you
the interface, the physical interaction and the manual. get being able
Since then the term has spread widely, so much so that to ride the
it is starting to gain its meaning.” horse.

”
— Donald Norman
-Dain Miller,
Web Developer
 5

What is UI design

User interface design is the design of user interfaces for machines and
software, such as computers, home appliances, mobile devices, and
other electronic devices, with the focus on maximizing usability and
the user experience.
 6

What is UX design

UX Design is the practice of studying user behavior and

understanding user motivations with the goal of designing better
digital experiences.
 7

Difference between UI/UX

 8

● UX design is all about identifying and solving user problems; UI design is

all about creating intuitive, aesthetically-pleasing, interactive interfaces.

● UX design usually comes first in the product development process,

followed by UI.

● The UX designer maps out the bare bones of the user journey; the UI
designer then fills it in with visual and interactive elements.

● UX can apply to any kind of product, service, or experience; UI is specific

to digital products and experiences.
 9

QUESTIONS AND ASSESSMENT

Now, Let us review what we

have learnt in this class!
What would you say is the
similarity of UX/UI
designers?

Task One Task Two Task Three

Define UX/UI using your What would you say is the Read an article or two on
similarity of UX/UI
environment. designers? UX/UI design. And write on
what you have learned
 10

User Research And Persona

COURSE OVERVIEW & LESSON OUTCOMES 11

This course is to introduce participant to researching, how to research and the different type of
research used in User experience design.
Participant will also be thought what a persona is and how to create a persona based on their
research results

In this course, you will learn

What User Experience research is? What a persona is

The different types of research The parts of a persona

Methods.

Approaches for a good research Understanding a persona

Top UX Research Methods 12

1 Card Sorting 3 Personas

Allows users to group and The creation of a
sort a site’s information into representative user based on
a logical structure that will available data and user

C
typically drive navigation and interviews. Though the
the site’s information
architecture.
P personal details of the persona
may be fictional, the
information used to create the
user type is not.

S
Surveys
2
A series of questions asked to
I 4 Interviews
One-on-one discussions with
users show how a particular
multiple users of your
user works. They enable you to
website that help you learn
get detailed information about
about the people who visit
a user’s attitudes, desires, and
your site.
experiences.
Approaches for a good research 13

“ UX
researchers
adopts
various
methods to
uncover
problems and
design

”
oppurtunities
 USER PERSONA 14

Personas are Parts of personas

commonly used
tools in UX design.
● Photo
It’s a TERGET ● Name
representation of AUDIENCE
● Skills
the real target
audience data, ● Description
collected in ● Goals
previous research ● Problems
phases such as user
interview. 
 UNDERSTANDING A PERSONA 15

Since personas represent the user groups we want to serve, they are
leading our way in the design process by reminding us which
expectations, difficulties, behaviors and final goals our users have. We are
relying on personas in every subsequent step such as creating flows,
functions or interactions.

A persona is not only useful for designers but it can be further utilized
whenever a certain business or marketing decision has to be made. It can
also be used as a reference point to help newcomers understand the product
vision and even layout new possible directions for innovation. A persona is
not a final product.

Instead, it is constantly changing and can be updated as a function of the

product’s current state. This means that a persona can become an organic
part of product development throughout the product’s lifecycle.
HOW TO CREATE A USER PERSONA 16

Step 1: Take a closer look at your data. Step 3: Create the Persona

The first step is to take a closer look at your data Persona consists of five main elements (but
gathered in the Discovery Phase, mainly User Interview. not restricted to):
Tag your most essential insights, primarily problems. If
you work with a client, you should also account for your ●Photo ●Description
stakeholder point of view. A persona should reflect ●Name ●Goals
business goals, as well. Both the needs of users and
business are crucial to creating a balanced and ●Skills ●Problems
successful Persona.

Step 2: Identify patterns Step 4: Share it!

Once you gather some data to analyze, it’s Persona has no value if it’s not distributed well
time to identify trends. It’s time to take a within your organization. All your team
closer look at tagged data to see if overlap members should be familiar with your
emerges naturally. In this point, you should primary Personas. It will help you be up to
understand that different groups of people date with the main problems for your target
have a novel approach to the subject. users and how they differ.
 17

Information Architecture
 18
Information architecture (IA) is a science of

“
organizing and structuring content of the websites,
Good information arch
web and mobile applications, and social media itecture makes users le
software. ss alienated and suppr
essed by technology. It
simultaneously increas
Information architecture aims at organizing content es human satisfaction
and your company's pr
so that users would easily adjust to the functionality ofits. Very few jobs allo
of the product and could find everything they need w you to do both at the
without big effort. The content structure depends on same time, so enjoy.
various factors.
Jakob Nielsen
19
 20

The 8 principle of Information Architecture

by Dan Brown.

1.The principle of objects: Content should be treated as a living,

breathing thing. It has lifecycles, behaviors, and attributes.

2. The principle of choices: Less is more. Keep the number of choices

to a minimum
 21

The 8 principle of Information Architecture

by Dan Brown.

3. The principle of disclosure: Show a preview of information that

will help users understand what kind of information is hidden if they dig
deeper.
4. The principle of exemplars: Show examples of content when
describing the content of the categories.
 22

The 8 principle of Information Architecture

by Dan Brown.

5. The principle of front doors: Assume that at least 50% of users

will use a different entry point than the home page.

6. The principle of multiple classifications: Offer users several

different classification schemes to browse the site’s content.
 23

The 8 principle of Information Architecture

by Dan Brown.

7. The principle of focused navigation: Keep navigation simple and

never mix different things.

8. The principle of growth: Assume that the content on the website

will grow. Make sure the website is scalable.
 24

The role of Information Architecture in Design

● AI forms the Skeleton of any design project.

● Organizes content and make navigation easy.
● A powerful AI is a guarantee for a quality product.
 25

Introduction to UI Design
COURSE OVERVIEW & LESSON OUTCOMES 26

This is an introductory course that teaches participants on the concepts of user interface, its
importance in UI usability and how to optimize it

In this course, you will learn

How to Create a Figma account How to Create wireframes

How to use the Figma app Design practices (Replication of other

designs).

Typography and Design Systems How to design a website/mobile app

from scratch.
 27

What is User Interface design?

User interface design or UI design generally refers to the visual layout

of the elements that a user might interact with in a website, or
technological product. This could be the control buttons of a radio, or
the visual layout of a webpage. User interface designs must not only
be attractive to potential users, but must also be functional and
created with users in mind.
 28

Why is user interface design important for usability?

User interface design can dramatically affect the usability and user
experience of an application. If a user interface design is too complex
or not adaptable to targeted users, the user may not be able to find the
information or service they are looking for. In website design, this can
affect conversion rates. The layout of a user interface design should
also be clearly set out for users so that elements can be found in a
logical position by the user.
 29

How to optimize user interface design

User interface designs should be optimized so that the user can

operate an application as quickly and easily as possible. Many experts
believe that UI design should be simple and intuitive, often using
metaphors from non-computer systems. With a more intuitive user
interface design, users will be able to navigate around a website easily,
finding the product or service they want quickly. One way to check the
intuitiveness of a user interface design is through usability testing.
The feedback from usability testing can then be used to optimize the
user interface design of a prototype or final product.
 30

How to install your figma app

 31

Step 1: Visit the website.

❖Head to Figma.com and click Sign up in

the top right corner.
 32

Step 1: Visit the website.

❖Head to Figma.com and click Sign up in

the top right corner.

Step 2: Fill in your details

❖Enter your Email address in the field

provided.
❖Enter a unique Password in the field
underneath.
 33

Step 1: Visit their website.

❖Head to Figma.com and click Sign up in

the top right corner.

Step 2: Fill in your details

❖Enter your Email address in the field

provided.
❖Enter a unique Password in the field
underneath.

Step 3: Sign up Figma will send you an email to verify your account.

❖Click the Sign up button to complete the

process.
 34

THANKS FOR YOUR TIME

@FasahaNG @FasahaNG @Fasaha4.0