UX DESIGN

AND
DEVELOPMENT
P R E PA R E D B Y:

J E N N I F E R P. J U A N E Z A , P H D
INTRODUCTION & FOUNDATION OF
UX
What is USABILITY?
Usability is a measure of how well a specific user in a specific
context can use a product/design to achieve a defined goal effectively,
efficiently and satisfactorily.
Designers usually measure a design’s usability throughout the
development process—from wireframes to the final deliverable—to
ensure maximum usability.
“Usability is about human behavior. It recognizes that humans are lazy, get
emotional, are not interested in putting a lot of effort into, say, getting a credit
card and generally prefer things that are easy to do vs. those that are hard to
do.”

— David McQuillen, ex-Swiss banker and founder of Sufferfest cycling workout

resources
WHAT IS UX DESIGN?
CREATION OF A DIGITAL PRODUCT

USABILITY IS THE TOP PRIORITY

VISUAL ELEMENTS ON SCREEN ARE ARRANGED IN AN

INTUITIVE, EASY TO USE MANNER

VISUAL ELEMENT: ANYTHING THE USER CAN SEE OR TOUCH

LIKE BUTTONS, LINKS, MENUS
WHAT IS UI DESIGN?
UI: USER INTERFACE

FOCUSES ON THE VISUAL & AESTHETICS

RELATED TO VISUAL PSYCHOLOGY & GRAPHIC

DESIGN
ARRANGE & USE COLOURS, TYPE, IMAGES, SHAPES,
LINES & TEXTURES
HISTORY OF THE USER
EXPERIENCE DESIGN
 4000 BC: Feng Shui and
UX design
Today the terms “user experience” or “UX” are mostly associated with all
thing's software - apps, websites, and IoT interfaces like Google Nest or
Tesla’s dashboard.
The concept behind Feng Shui dates back 6,000 years and is derived from
an ancient poem that talks about the connections between a human life
and the environment it flows in. Feng Shui literally translates as "wind"
(feng) and water (shui). It refers to the spatial arrangement of objects
relative to the flow of energy (chi).
Feng Shui and UX design share a common goal: to create harmonious
spaces that make us feel safe, productive, and at ease. Both of them focus
on balance, decluttering, and function to achieve this goal. Both
disciplines are working with layout, framework, materials, and colors.
 Ergonomics translates as “work“ and “natural laws” and is a term coined to
describe how people interact with elements of a system. There’s a strong
500 BC: evidence that suggests that Greek civilizations designed their tools and
workspaces based on the principles of ergonomics. For example, there is

Ergonomics, a widely cited work from Hippocrates (460 - 370 BC) where he describes
the set-up of a surgeon’s workspace in detail. “As regards the tools, we will
state how and when they should be used; they must be positioned in such a
Ancient way as to not obstruct the surgeon, and also be within easy reach when
required.”
Greece, and Ergonomics, then, is a form of UX design for the physical workspace.

UX design
1900s: Taylorism, workspace
efficiency, and UX design
A new worldview emerged at the turn of the 20th
century - the mechanical worldview. It is
exemplified by the Industrial Revolution
pioneers Frederick Winslow Taylor and Henry
Ford who both share the goal of making human
labor more efficient and optimized.
Taylor’s focus on optimizing the relationship
between humans and their tools can be thought
of as a form of UX design principles.
 Taylorism is often criticized for not valuing human input enough,
something Toyota Motor Company, founded in 1937, sought to
1940s: correct. Famous for its humility and respect for people, Toyota
Production System can be considered an important precursor to
Toyota, user user-centered design.

testing, and Human input was highly encouraged at Toyota - so that an

average factory worker could stop the assembly line if it needed
human focus an improvement, which can be considered a form of usability
testing.
 Henry Dreyfuss, an American industrial engineer, is another significant

1955: Henry figure in the history of UX design, especially when it comes to usability
improvements. Dreyfuss is known for iconic products like Hoover

Dreyfuss vacuum cleaner, Big Ben alarm clock, telephones, John Deere tractors,
New York Central Railroad's trains, and many more.

and Designin In his book “Designing for People” Dreyfuss advocates for designing for
safety, comfort, and efficiency as well for a wide range of audiences. He
g for People explains the role of an industrial designer in a way that foreshadows that
of UX designer:
 1955: Walt Disney
and UX design
In the 1950s, Disney joined the amusement park
industry, and in July 1955 he opened Disneyland in
Anaheim, California. The brilliant innovator
envisioned the park to be an immersive experience
where every detail is accounted for. He called his
team at the park Imagineers and even created the
guiding principles for them to follow, which later
became known as “Mickey’s 10 Commandments.”
These ten principles resemble that of UX design
greatly: know your audience, wear your guest’s shoes,
use good storytelling techniques, make use of all the
non-verbal ways of communication - color, shape,
form, texture, avoid cognitive overload, tell only one
story at a time, bring clarity, create fun, pay attention
to cleanliness and routine maintenance.
 1970s and 1980s:
Xerox, Apple,
and first personal
computers
UX design as a discipline started gaining
momentum in the 1970s along with the era of
personal computing. In 1970, the Xerox Palo
Alto Research Center (Xerox PARC) opened
that would invent the graphical user interface
(GUI), the mouse, object-oriented
programming which laid the foundation of the
modern personal computer. In 1974, a small
company MITS made the first personal
computer, the Altair, that was popular among
hobbyists. However, personal computers did
not hit mainstream until the Apple that
broadened the appeal beyond the hobbyists.
1993: Don Norman and
UX design
Parallel to Apple’s efforts, one man is working on a book
called User Centered System Design: New Perspectives
on Human-computer Interaction - Don Norman, a writer
and a consultant in cognitive engineering with the M.S. degree
in Electrical Engineering and a PhD in Psychology. It was
in User Centered System Design, published in 1986, that the
term “user-centered design” was introduced. The key idea of
the book was that a designer should focus on the needs of the
user and not on the system itself. Normal developed this idea
further in his second book - The Design of Everyday Things in
1988, which has been a UX staple since.
The fascinating journey of UX design continues to unfold in
parallel to our technological advances, from Artificial Intelligence,
the Internet of Things, VR and AR to the dashboard of the future
spaceships traveling to Mars.
 “Design thinking is a human-centered approach to
innovation that draws from the designer’s toolkit to
integrate the needs of people, the possibilities of
technology, and the requirements for business
success”.
—TIM BROWN, EXECUTIVE CHAIR OF IDEO
 Design thinking is an approach used for practical and
creative problem-solving. It is based heavily on the methods
and processes that designers use (hence the name), but it has
evolved from a range of different fields—including
architecture, engineering and business. Design thinking can
also be applied to any field; it doesn’t necessarily have to be
design-specific.
•Desirability: What makes
sense to people and for
people?
•Feasibility: What is
technically possible within
the foreseeable future
•Viability: What is likely
to become part of a
sustainable business model?
The Five Phases of Design Thinking
Based on these four principles, the Design Thinking process can be broken
down into five steps or phases, as per the aforementioned Hasso-Plattner-
Institute of Design at Stanford (otherwise known as d.school): Empathise,
Define, Ideate, Prototype and Test. Let’s explore each of these in more
detail.

Phase 1: Empathize
Empathy provides the critical starting point for Design Thinking. The first stage
of the process is spent getting to know the user and understanding their wants, needs
and objectives.
This means observing and engaging with people in order to understand them on a
psychological and emotional level. During this phase, the designer seeks to set aside
their assumptions and gather real insights about the user.
Phase 2: Define
• The second stage in the Design Thinking process is dedicated
to defining the problem. You’ll gather all your findings from the
empathize phase and start to make sense of them: what
difficulties and barriers are your users coming up against? What
patterns do you observe? What is the big user problem that your
team needs to solve?
• By the end of the define phase, you will have a clear problem
statement. The key here is to frame the problem in a user-
centered way; rather than saying “We need to…”, frame it in
terms of your user: “Retirees in the Bay area need…”
Phase 3: Ideate
• The third phase in the Design Thinking process is where the creativity happens,
and it’s crucial to point out that the ideation stage is a judgement-free zone!
• Designers will hold ideation sessions in order to produce as many new angles
and ideas as possible. There are many different types of ideation technique that
designers might use, from brainstorming and mind mapping to bodystorming
(roleplay scenarios) and provocation—an extreme lateral-thinking technique
that gets the designer to challenge established beliefs and explore new options
and alternatives.
Phase 4: Prototype
 The fourth step in the Design Thinking process is all about
experimentation and turning ideas into tangible products.
 A prototype is basically a scaled-down version of the
product which incorporates the potential solutions identified in
the previous stages. This step is key in putting each solution to the
test and highlighting any constraints and flaws.
 Throughout the prototype stage, the proposed solutions may be
accepted, improved, redesigned or rejected depending on how
they fare in prototype form.
Phase 5: Test
• After prototyping comes user testing, but it’s important
to note that this is rarely the end of the Design Thinking
process.
• The results of the testing phase will often lead you back
to a previous step, providing the insights you need to
redefine the original problem statement or to produce
new ideas you hadn’t thought of before.
 Frame a Question—Identify a
driving question that inspires
others to search for creative
solutions.
 Gather Inspiration—Inspire
new thinking by discovering
what people really need.
 Generate Ideas—Push past
obvious solutions to get to
breakthrough ideas.
 Make Ideas Tangible—Build
rough prototypes to learn how to
make ideas better.
 Test to Learn—Refine ideas by
gathering feedback and
experimenting forward.
 Share the Story—Craft a
human story to inspire others
toward action.
THE UX DESIGN PROCESS

Idea-
Understand Research
Generation

Continuall
Prototypin
Test Release y
g
Analyzing
Understand
◦ Know your target customers
◦ View the product outcome from your
customer’s needs
◦ Empathize with your customer to understand
their needs
◦ Understand different personalities
◦ Understand human behavior and psychology
Research
Define & evaluate the user’s
needs
Don’t overlook the research
step
Learn to identify needs and
motivation
Look at your customer’s
competitors
Idea-
Generation
•Creative Problem-Solving
•Brainstorm ideas with
colleagues
•Co-create ideas with users
or other stakeholders
•These sessions can be
formal or informal
Prototyping

CONVERT IDEAS REPRESENTATION QUICK AND COST- CONTINUE TO

INTO TANGIBLE OF THE PRODUCT EFFECTIVE HIGH FIDELITY
OPTIONS PROTOTYPES
Testing

Test prototype with If unsuccessful, revert to

users research phase

UX design process is
Share digital prototype
flexible and agile to
using Figma
move back and forth
Continually
Analyzing
Important for innovation
and to remain competitive
UX design hand over
product to UX developers
UX development convert
UX designer’s prototype
into the final product