Introduction to UI/UX Design

Benjamin Odoi-Lartey
odlabenonline@gmail.com
0244361636

Benjamin Odoi-Lartey

Benjamin Odoi-Lartey

@odlabenonline
 Lecture Objectives
• Definition and importance of UI/UX design
• Historical evolution of UI/UX
• Role of UI/UX in modern digital products
• Understand what user experience (UX) means and how it matters.
• Understand how to approach UX and usability
• Understand how to approach UI design.
• Describe, compare and contrast the various fields of UI/UX Design
• Understand popular design methodologies used by industry
professionals such as double-diamond, product development cycle
and design thinking.
• Understand the importance of wireframing in the design process.
• Ideate and sketch wireframes using different representations of web
elements
• Use Figma to create polished and interactive prototype
 Introduction

• While “design” is often equated with graphic design or visual design, design is
a vast discipline with many subdisciplines
• Everything from industrial design to service design falls under the umbrella of
design
• To design means “to plan and make (something) for a specific use or
purpose.” - Merriam Webster
• Intentionality and problem-solving are at the core of design.
 Introduction cont...

• Design can include tasks ranging from thinking about what color a button
should be on a screen, to deciding how passengers should flow through an
airport.
• UX design is so much more than just designing for a screen.
• 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.
 What is User Interface (UI)

• A user interface is the interface through which a user

interacts with a device.
• For example, on a mobile phone, the user interface is
what is displayed on the screen of the device.
• A user interface is what a user interacts with. For devices
with screens, the user interface is what is displayed on
the device’s screen.
• The introduction of the Graphical User Interface (GUI) in
the 1980s enabled the rise of the personal computer, as
well as the rise of user interface (UI) design as a field.
 What is User Interface (UI) cont....
• User interface (UI) design is a design discipline focused on the visual elements of the
interface, for example:
• Layout: Where do elements appear on the screen?
• Colors: What palette is used and what emotions do those colors evoke?
• Typography: What typefaces are used and what do they communicate?
• Interaction design: How do elements respond to user interaction?
• Brand identity: How do all of the visual elements come together to represent the
brand’s vision?
• Responsiveness and usability: Is the interface easy to use across different devices?
• Accessibility and inclusivity: Does the interface work for everyone?
• Front-end development: What is the code and technical backbone powering the
interface?
 What is User Experience (UX) Design?
• User experience (UX) describes the entire experience
around a product or service, taking into account the
user’s emotional state, the context or environment, and
the designed system or artifact.
• User experience (UX) takes into account the user, the
context or environment, and the system in use
• Today, user experience (UX) is at the center of our
assessment of systems and interfaces, focused on
designing for pleasure rather than the absence of pain.
 What is User Experience (UX) Design?
User experience is a human-centered design discipline that addresses the holistic
experience of a product, focused on;
• User journey, User research and Deliverables
• Personas: Summaries of example and target users, generally based on a composite of
user research.
• Journey maps: A timeline of user actions related to accomplishing a particular goal
related to a product or design.
• Storyboards: A sequence of panels (often resembling a comic book) depicting a user
story chronologically.
• Prototypes: Iterative models, sketches or wireframes of a design used to gather
feedback and inform the final design.
 The Five(5) Elements of User Experience(UX)
• This model shows the layered steps
required to turn an idea into a functional
product, with each layer of the model
building upon one another, from the
bottom up.
• The layers are arranged from abstract to
concrete. UX design encompasses the
entire model, while UI design focuses on
the surface layer.
• The layers includes; Surface, Skeleton,
Structure, Scope and Strategy
 Who are the Users and End-Users
• The user refers broadly to anyone who may use or maintain the product, and
could include people such as system administrators, IT experts, and computer
technicians. In early computing, these were often the only people using computing
systems, since they required technical knowledge to operate.
• The introduction of personal computers and GUIs opened up a wider range of
potential non-technical end-users. In today’s landscape, it’s useful to differentiate
between the user and the end-user: the person intended to ultimately use the
product, who may not have the technical know-how or skill of the product’s
administrators.
 Historical Evolution of UI/UX
• Humans have always sought to make their lives more harmonious and comfortable, and this urge
has probably led to many innovations, from industrious evolutions to vehicles, rooms, and so on.
• Even though the term “user experience” has been trending in recent decades, you will find its trace
back to some old philosophies.
• Feng Shui Philosophy (4000BC) is a method and a philosophy that has been used for the
creation of environments that are comfortable, supporting, and nourishing for thousands of years.
• Ergonomics in ancient Greece (500BC): One of the best pieces of evidence that the ancient
Greeks understood ergonomic principles is a text by Hippocrates outlining the ideal environment
for a surgeon. As he puts it, "the surgeon's tools must be positioned so as not to block the
surgeon, and also be within easy reach when required." to increase usability and smooth activity,
just like we do in UX.
 Historical Evolution of UI/UX
• Taylorism: A Scientific Management Theory (Early 1900) Taylor's scientific management theory
said that it was the job of managers at work to come up with the right production system to make
the business as efficient as possible. Frederick Winslow Taylor published "The Principles of
Scientific Management" in 1911. In the book, he claimed that flaws in a specific work process could
be scientifically rectified by improved management techniques and that the most effective way to
raise labor productivity was to optimize work performance.
• Fordism: Evolution of Manufacturing Technology System ( 1973) It must be mentioned that
Taylorism is the starting point of Fordism. Fordism is a way of organizing mass production on a
small scale. It was first used in the United States in the early 1800s at Henry Ford's Highland Park
car factory. Ford's mass production model was a significant change in how things were made, but it
was based on improvements that had already been made.
 Historical Evolution of UI/UX
•The Toyota Philosophy (1940): “The Toyota way” got acknowledgment worldwide

because of how efficiently they managed their production system, employees,

customers, and society as a whole! Operational excellence is the main reason the
Toyota way has been so successful. Toyota has made operational excellence a key
part of its strategy. This operational excellence is not all based on the tools and
methods for improving quality that Toyota made famous in the manufacturing world.
•Henry Dreyfuss and The Art of Designing for People (1955): Dreyfuss is best known for

his statement, "Designing for people." Also, Dreyfuss' design concept was founded on
logic and scientific principles. In 1955, he wrote Designing for People, basically a
summary of UX design: "When the point of contact between the product and the
people becomes a source of friction, then the [designer] has failed." On the other
hand, if people feel safer, more comfortable, more likely to buy, more productive, or
just plain happier when they use the product, then the designer has done his or her
job."
 Historical Evolution of UI/UX
• Walt Disney—The First UX Designer (1966) Disney is regarded as one
of the very first UX designers despite not even having that title. He was a
visionary who imagined a world in which cutting-edge technology could
improve people's lives. He was consumed with the idea of creating
incredible, immersive, authentic, and seamless experiences. That's how
Disney World got its start.
• The Era of Personal Computers (The 1970s) MITS, a small firm, created
the first personal computer, the Altair, in 1974, popular among hobbyists.
Personal computers. The Xerox Palo Alto Research Center (Xerox PARC)
debuted in 1970, and it was here that the graphical user interface (GUI),
the mouse, and object-oriented programming were invented, laying the
groundwork for the contemporary personal computer.
• Don Norman coined the term "User Experience." (1980)
 Historical Evolution of UI/UX
• 2018 and Onwards: Today, we have user experience architects, designers, researchers, and so forth. In
addition to fields in Human-Computer Interaction devoted to the interactions between people and computers,
some schools are primarily concerned with the connections between design, psychology, and science. The
demand for user experience designers is growing, and new professionals are entering the field from various
vantage points.
• From artificial intelligence to speech technology, and virtual reality to interface-free design, UX designers
encounter new daily obstacles. Concepts in interaction design that were previously novel are now mental
models for all of us, illustrating the dynamic progress of the discipline!
• UX is an ever-changing field, and the discipline has evolved considerably over the last few decades. It can
sometimes be a struggle to keep up as our deliverables have changed and evolved over time — desktop and
mobile, mouse and touch, web and native, and so on.
• To create genuinely human-centered user experiences, we must comprehend how humans function, which
necessitates some attention to psychology. In recent years, our responsibilities as designers have expanded,
and we must now comprehend how to construct goods and services and why we construct them.
 Role of UI/UX in Modern digital products

• First Impression Matters

• Enhanced Usability
• Improved Retention and Loyalty
• Reduces Development Cost
• Accessibility and inclusivity
• Competitive Advantage
• Data-Driven Iteration
• Alignment with Business Goals
 Role of UI/UX in Modern digital products
• First Impression Matters: A well-designed UI creates a positive first
impression. Users are more likely to engage with and trust a product that looks
polished and professional. An intuitive and visually appealing interface can
differentiate your product from competitors, even if the core functionality is
similar.
• Enhanced Usability: A user-centric UX design ensures your product is easy to
use and navigate. It minimizes the learning curve and frustration, resulting in
higher user satisfaction. Intuitive design decreases the likelihood of users
abandoning your product in favor of more user-friendly alternatives.
 Role of UI/UX in Modern digital products
• Improved Retention and Loyalty: A great UX creates a pleasant user
journey, increasing the likelihood of users returning to your product. Loyal
users are more likely to recommend your product to others. Word-of-mouth
recommendations from satisfied users can significantly boost your product's
growth.
• Reduces Development Cost Identifying and addressing usability issues
early in development is more cost-effective than making extensive changes
later. Good UI/UX design can prevent costly customer support and
development iterations.
 Role of UI/UX in Modern digital products
• Accessibility and inclusivity: An inclusive UX accommodates users with
diverse abilities, ensuring your product is accessible to a broader audience.
Prioritizing accessibility is ethically sound and can lead to legal compliance
and wider market reach.
• Competitive Advantage: An outstanding UI/UX can be a crucial
differentiator in a crowded marketplace. Consumers are likelier to choose
products that offer a superior user experience over those with subpar
designs
 Role of UI/UX in Modern digital products
• Data-Driven Iteration: UI/UX design involves user research and feedback,
allowing you to make data-driven decisions for product improvements.
Continuous iteration based on user insights leads to a product that evolves
to meet changing user needs and expectations.
• Alignment with Business Goals: A well-executed UI/UX design aligns with
your business objectives, whether it's increasing conversions, reducing
bounce rates, or enhancing brand reputation. It ensures that design choices
support your product's overall strategy.
The Different Areas
of UX Design
 An introduction to the UX design quadrant Model
• On top of the foundational UX design skills (like
prototyping, user empathy, user testing, etc.), many UX
designers also choose to specialize in one or two
areas depending on their interests, skills, and the needs
of their employer.

• The quadrant model provides a great lens which

groups the field into four (4) main discipline;

• Experience Strategy (ExS)

• User Research (UR)

• Information Architecture (IA)

• Interaction Design (IxD)

 An introduction to the UX design quadrant Model
• Experience Strategy (ExS): is all about devising a holistic business
strategy, incorporating both the customer’s needs and those of the
company.

• User Research (UR): focus on the research aspect of design by

conducting qualitative and quantitative research

• Information Architecture (IA): is the science of organizing and

structuring content in a logical, user-friendly manner.

• Interaction Design (IxD): focuses on how a user interacts with

specific elements of a digital product. IxD answers questions like:
"What happens when a user clicks a button?" Or how will transition
between different pages be like on web and mobile app
 What are some other specialist career paths for UX designers
UX design is an ever-growing field, offering plenty of opportunity to both specialize and diversify. So what other job
titles do UX designers end up procuring? Let’s take a look.

• UX writer : Written copy plays a crucial part in the overall user experience, and just like all the visual
touchpoints, the words on the product interface also need to be designed!

• Voice designer: Voice designers apply UX principles in order to create user-friendly interactions with voice
technology.

• UX developer: a UX developer is best described as part-designer, part-developer, and the role generally
involves some visual design skills, too.

• UX/UI designer: a UX design is all about how the overall interaction with the product feels for the user, while
UI is concerned with the visual, interactive elements. Still, it’s not uncommon for UX designers to pick up UI
design skills, and vice versa—you’ll also notice that lots of companies advertise for UX/UI designers.