UI | UX

A VISUAL JOURNEY

by Joel
WHAT IS USER
EXPERIENCE?
User Experience (UX) refers to the
overall feel and satisfaction that a
user has when interacting with a
product or service. It encompasses
design, usability, accessibility, and
emotions evoked during the user
journey.
THE IMPORTANCE
OF UX DESIGN
Effective UX design is crucial for
businesses as it directly impacts
customer satisfaction, engagement, and
loyalty. By understanding user needs
and behaviors, businesses can create
intuitive, efficient, and delightful
experiences that set them apart from
competitors.
KEY PRINCIPLES OF
UX DESIGN
Simplicity: Keep interfaces clean and
uncluttered.

Consistency: Maintain uniformity in design

elements.

Usability: Ensure ease of navigation and task

completion.

Feedback: Provide clear and timely feedback to

user actions.

Accessibility: Make products inclusive for all

users.

Emotion: Evoke positive emotions through

design choices.
UX RESEARCH AND
TESTING

UX research involves
understanding user needs,
preferences, and pain points
through methods like user
interviews, surveys, and
analytics. Testing prototypes
and gathering feedback helps
iterate and improve the user
experience.
THE 7 PRINCIPALS
OF DESIGN

Balance
Contrast
Emphasis
Repetition
Hierarchy
Typography
Unity
BALANCE

Balance is the concept of visual weight,

or how elements are distributed across
the page. It can be symmetrical or
asymmetrical, depending on the desired
effect.
Balance is important in design because it
creates order and structure, allowing
viewers to easily read and understand
the message.
CONTRAST

Contrast is the juxtaposition of elements

to create visual interest. It can be
achieved through color, size, shape,
texture, and other design elements.
Contrast helps to draw attention to
important elements, and can create an
overall dynamic and visually appealing
design.
EMPHASIS

Emphasis is used to draw attention to a

specific element of the design. It can be
achieved through size, color, shape,
texture, and other design elements.
Emphasis helps to create a focal point
within the design, and can be used to
guide the viewer’s eye to the desired
element or message.
REPETITION

If you limit yourself to two strong typefaces or three

strong colors, you’ll soon find you’ll have to repeat
some things. That’s ok! It’s often said that repetition
unifies and strengthens a design. If only one thing on
your band poster is in blue italic sans-serif, it can read
like an error. If three things are in blue italic sans-serif,
you’ve created a motif and are back in control of your
design.
Repetition can be important beyond one printed
product. Current packaging design is heavily
embracing beautiful illustrated patterns. Anyone
thinking about a startup knows one of the first things
you need is a strong logo to feature on your website,
business cards, social media and more. Brand identity?
Another term for repetition.
HIERARCHY

Hierarchy is the concept of organizing

elements in a design to create a visual
order. It can be achieved through size,
color, shape, texture, and other design
elements.
Hierarchy is important in design because
it helps to create a sense of structure and
flow, and allows viewers to easily read
and understand the message.
TYPOGRAPHY
Typography is the use of typefaces and
fonts to create a visual impact. It can be
used to create a sense of hierarchy,
emphasis, and contrast within a design.
Typography is important in design
because it helps to create a unique visual
identity, and can be used to convey a
message or evoke an emotion.
UNITY
Unity is the concept of all elements
working together to create a unified
design. It can be achieved through color,
size, shape, texture, and other design
elements.
Unity is important in design because it
creates a sense of cohesion and
harmony, and allows viewers to easily
read and understand the message.
THE MEANING OF
COLOR IN GRAPHIC
DESIGN
Colors have the power to evoke emotions and
influence decisions. Different colors evoke different
feelings, and understanding these feelings can help
designers create powerful visual compositions. For
example, red is often associated with energy and
passion, while blue is associated with calmness and
serenity.
The meaning of color can also be influenced by culture
and context. For example, in some cultures, red is
associated with luck and prosperity, while in others, it
is associated with danger and anger. It is important for
designers to research the cultural context of their
target audience to ensure that their design
communicates the right message.
THE PSYCHOLOGY OF
COLOR
The psychology of color is the study of how colors
influence our emotions and behavior. Different colors
can evoke different feelings in viewers, and
understanding these feelings can help designers
create powerful visual compositions. For example,
warm colors such as red and yellow can evoke feelings
of energy and excitement, while cool colors such as
blue and green can evoke feelings of calmness and
serenity.
The meaning of color can also be influenced by culture
and context. For example, in some cultures, red is
associated with luck and prosperity, while in others, it
is associated with danger and anger. It is important for
designers to research the cultural context of their
target audience to ensure that their design
communicates the right message.
COLOR COMBINATIONS
IN DESIGN
Color combinations are an important part of graphic
design. Different combinations of colors can evoke
different feelings in viewers, and understanding these
feelings can help designers create powerful visual
compositions. For example, a combination of warm
colors such as red and yellow can evoke feelings of
energy and excitement, while a combination of cool
colors such as blue and green can evoke feelings of
calmness and serenity.
It is also important to consider the cultural context of
the design. For example, in some cultures, certain color
combinations are associated with luck and prosperity,
while in others, they are associated with danger and
anger. It is important for designers to research the
cultural context of their target audience to ensure that
their design communicates the right message.
Occam’s Razor Law in UX ux hints.com

Entia non sunt multiplicanda praeter necessitatem (Latin): Entities should not be multiplied beyond necessity.

When faced with multiple competing explanations or hypotheses, one should prefer the
simplest explanation with the fewest assumptions.

Why Ocam’s Razor law?

Occam's Razor is important in UX design because it encourages simplicity and clarity, resulting in user
interfaces that are more intuitive, efficient, and enjoyable. By minimizing complexity and focusing on
essential elements, designers create experiences that are easier for users to understand, navigate, and
interact with, ultimately leading to higher user satisfaction, retention, and product success.

How product designers can apply the law in design?

Simplify navigation
Streamline menus, group similar items, and use
clear labels to make it easy for users to find what
they're looking for.

Reduce cognitive load

Limit the amount of information presented at
once, break down complex tasks into smaller
steps, and provide clear instructions to help users
focus on their goals.

Minimize user input

Reduce the number of fields in forms, use smart
defaults, and employ autofill features to decrease
the amount of manual input required.

Emphasize clarity and consistency

Use consistent visual elements, typography, and
color schemes throughout the design to help
users build a mental model of the interface.

Remove unnecessary elements

Eliminate any extraneous features, buttons, or
content that don't directly contribute to the user's
goals or improve their experience.

Optimize for mobile

Design with mobile devices in mind, ensuring that
interfaces are responsive, touch-friendly, and
easily navigable on smaller screens.

Prioritize usability over aesthetics

While an attractive interface is important,
prioritize functionality and ease of use over purely
visual design elements.

Test and iterate

Conduct user testing to identify potential issues
or areas for improvement, and continually refine
the design based on user feedback.
 ux hints.com
UX METRIC

SUS
System Usability Scale
System Usability Scale is a series of 10 Likert-scale questions that produce
a score from 0-100. It’s a quick and reliable tool to measure perceived
usability.

Why use SUS?

The System Usability Scale is not diagnostic and will not tell you what specific problems you have, but it will give you a
red or green light to know how badly your usability needs work.

Benefits of using SUS

A quick way to get a quick and clear judgment about the usability of your product
It’s an easy scale to administer to participants
It can be used on small sample sizes with reliable results
It’s easy to differentiate between usable and unusable systems

10 SUS questions
1. I think that I would like to use this system frequently.
2. I found the system unnecessarily complex.
3. I thought the system was easy to use.
4. I think that I would need the support of a technical person to be able to use this system.
5. I found the various functions in this system were well integrated.
6. I thought there was too much inconsistency in this system.
7. I would imagine that most people would learn to use this system very quickly.
8. I found the system very cumbersome to use.
9. I felt very confident using the system.
10. I needed to learn a lot of things before I could get going with this system.

SUS response format

Strongly Strongly
Disagree Agree

1 2 3 4 5

Calculating SUS
The users will rank each of the 10 SUS questions above from 1 to 5, based on their level of agreement.

For each of the odd numbered questions, subtract 1 from the score.
For each of the even numbered questions, subtract their value from 5.
Take these new values which you have found, and add up the total score. Then multiply this by 2.5.

The result of all these calculations is that you now have your score out of 100. This is NOT a percentage.

How to interpret SUS results?

The average SUS score is 68. If your score is under 68, then there are probably serious problems with your website
usability which you should address. If your score is above 68, then you can consider your product easy to use.

SUS score ranges

80.3 or higher is an A. People love your site and will recommend it to their friends
68 or thereabouts gets you a C. You are doing OK but could improve
51 or under gets you a big fat F. Make usability your priority now and fix this fast.
 ux hints.com
UX METRIC

SEQ
Single Ease Question
Single Ease Question is a 7-point rating scale to quantify how easy or
difficult it was to perform a task for a user.

Overall, this task was?

Very difficult Very easy

1 2 3 4 5 6 7

When is SEQ used?

SEQ is usually used during usability studies, right after users attempted to complete a task.

Why use SEQ?

SEQ is a simple and easy way to quantify task usability. It’s also very useful when used in conjunction with qualitative
feedback (if we ask a follow-up question “Why?”). Because the SEQ is asked right after a task is performed, the data is
accurate and relevant to the task.

The SEQ question

On a scale of 1-to-7, with 1 being very difficult and 7 being very easy, how
easy or difficult was the task to complete?

How to interpret SEQ results?

With SEQ, a researcher can compare usability across tasks and see the relative weight users give to the problems they
faced in a task. UX researchers should use SEQ comparatively to find the areas of improvement that will make the
biggest impact on the users. Usually, SEQ is used along with task completion rates and task time to provide more
insights and context into these metrics. When a user is asked how and why a task was easy or difficult to complete, we
can read better the results and understand the reasons behind the outcome.

Collecting responses
Table of SEQ results for 1 task

User SEQ Why?

User 1 5 The button was too small

User 2 2 I didn’t understand the text

User 3 4 The link was hard to find

User 4 6 It was intuitive and clear

Average SEQ 4.25

Task SEQ dynamics

SEQ

6.72

5.6

4.25

Usability Study 1 Usability Study 2 Usability Study 3 Time

 ux hints.com
UX METRIC

Net Promoter
Score (NPS)
Net Promoter Score is a UX metric showing the percentage of customers
rating their likelihood to recommend a company, a product, or a service to
a friend or colleague as a score for your customer experience.

When is NPS used?

The NPS is used by product and UX teams when it’s important to measure the sentiment of the customers about a
product or brand and understand how happy they are about their experience with it. It gives insights into the product’s
strategy and the next actionable steps that need to be undertaken to improve customer satisfaction and experience.
The NPS question can be sent out to customers periodically or can be used as part of usability studies and user
research.

The NPS question

On a scale of 0-to-10, how likely is it that you would recommend
[organization, product, or service] to a friend or colleague?

Scaling of reponses

Detractors Passives Promoters

Score 0-6 Score 7-8 Score 9-10

Unhappy users who are unlikely to Satisfied but unenthusiastic users Loyal enthusiasts who will keep
use your product and can damage who are vulnerable to competitive using the product and refer others,
your brand. offerings. fueling growth.

How NPS is calculated?

NPS
Promoters % Detractors %

Next steps
Follow up with clarifying questions about the responses

Segment your customers based on loyalty

Identify the users at risk of churn and take steps to win them back

Track NPS over time to quantify changes in user experience

 ux hints.com

Baby Duck
Syndrome in UX
Users hate changes. It might be explained by the baby
duck syndrome - the tendency of a user to compare
each new computer system to that which they
originally learned. If a new system or UI is not familiar,
the user will likely perceive it negatively. This can be
compared to newly hatched ducks or other birds who
get attached to the first creature they see in their life
and consider it their mom.
S.M.A.R.T. goals for UX ux hints.com

SMART is an acronym giving criteria to guide in the setting to objectives. In UX design SMART
goals enable to clarify ideas, focus efforts and estimate time and resources efficiently.

Examples

Specific
With the new design we are planning on increasing lead conversion by 20% by the
end of the next quarter.

Measurable
We can measure the increase of conversions by tracking the number of page views
and unique visitors versus the clicks on the primary CTA.

Actionable Because the goal is specific, we can define what combination of content,
functionality and visual hierarchy will enhance UX and drive conversion.

Relevant This specific goal is relevant to a higher business objective: increase total sales
revenue and drive users adoption.

Trackable We can track the conversion rate and overall number of sales over an extended
period of time.
How to Communicate Design with Developers - Checklist ux hints.com

An extensive list of all aspects that must be communicated between designers and
engineers throughout design/development process.

Map out cross-platform experience

- What plaforms are in scope (mobile, desktop, wearable, iOS, Android, etc)?

- What breakpoints to use?

- What technology to use for mobile experience?

- What Front-End frameworks can be used?

Define technical feasibility A

- What are technical limitations for components / interactions?
Fruits
- What back-end data can be leveraged / exposed to the user?
Apple
- What JS/React/.. libraries are available?
Apricots
- How fast can we output data / content in the UI?

- Are the back-end/front-end processes scalable? Vegetables

Clarify semantic structure

- HTML5 structure

- Headings hierarchy

- SEO optimization
H1 H2 H3 H4
- No dark SEO patterns

Consider all states

- Empty state

- Error state

- Loading state

- Other content and interaction related states

Design for variable content

Single line heading Double line heading
- Vairations of copy Far far away, behind the word taking up more space
- Progressive disclosure mountains, there live the blind Far far away, behind the word
texts. mountains, there live the blind
- Text truncation
texts.
- Scalable layouts

Agree on naming conventions

- CSS variables

- File names

- Folder names Ellipsis Meatballs Dot Dot Dot Rabbit Poops

- Components names

Create placeholders
- Avatars (user pics)

- Image placeholders

- Default backgrounds

Define CSS units and resizing

em ex ch rem vw
- Font sizes and font baseline

- Absolute and relative CSS units

- How resizing works (browser zooming) vh vmin vmax %

- Browser support

Flesh out file formats

- Images format

- Icons format

- Streaming mechanisms

- Optimization

OPERABLE

Verify A11Y compliance PERCEIVABLE

WCAG 2.1
- Optimize for levels A, AA, AAA

- Conduct A11Y audit

- Test for auditory, visual, cognitive and other impairments UNDERSTANDABLE

ROBUST
- Localize content and design

Explain microinteractions
- Define CSS transitions

- Identify differences between desktop and mobile touch screen experience

- Prototype complex interactions

- Define technical feasibility of interactions

- Define frameworks to use for implementing interactions

Typography Anatomy - Ultimate Cheat Sheet ux hints.com

Type positioning & spacing

Typography
Ascender Height

Cap Height

X-Height

Baseline

Descender Line

Letter Spacing / Tracking

AM Kerning
Far far away, behind the word mountains, far
from the countries Vokalia and Consonantia,
there live the blind texts.

Leading / LIne-Spacing

Type anatomy

Ascender Descender Stroke Stem Leg Arm

Ear Shoulder Tail Spine Swash Bar

Serif Terminal Bowl Counter Open-counter

M
Apex/Vertex

Link Loop Ball terminal Arc of stem Link Bar

Gadzook Ligature Joint Crotch

Law of the Hammer ux hints.com

If the only tool you have is a hammer, you tend

to treat everything as if it were a nail.

The law can get spotted in many aspects of UX design or

development process, for instance:

Design system Range of products

Dictates UX
product
pattern pattern product
pattern
product
product

pattern
pattern pattern
product product

The downside of having established design

patterns is limited user experience. In this case
the design process becomes pattern-centric
instead of being user-centric.
 PART 1

Cognitive Biases in UX ux hints.com

Cognitive biases are systematic patterns of deviation from norm or rationality in judgment. In User Experience
cognitive biases have a big impact on users’ behavior. Biases affect users’ decision-making process and get in the
way of effective critical thinking mechanisms.

Most popular cognitive biases

Framing effect Backfire effect

Drawing different conclusions from the same When people not simply reject facts that
information, depending on how that contradict their beliefs, but also hold stronger
information is presented. to reassuring lies.

Example: Example:

Positive statement: 40% of users clicked the link and
opened the article on the website.
Negative statement: 60% of users didn’t open the article
and dropped off.
Flat Earth theory - many ancient cultures believed and
the some people still believe that the Earth is flat,
because walking around on the planet’s surface looks
and feels flat. All scientifc evidence to the contrary is
fabricated and represents the “round Earth conspiracy”.

Anchoring bias Contrast effect

The tendency to rely too heavily, or "anchor",
on one trait or piece of information when
making decisions (usually the first notable
piece of information acquired on that subject).
Example 1:
The enhancement or reduction of a certain
stimulus' perception when compared with a
recently observed, contrasting object.
Example:

Regural price: $99. Discount price: $75.

Example 2: The inner rectangles are the same color. However the
left one seems lighter.
Only 3 products left in stock.

Decoy effect Ambiguity effect

A phenomenon whereby consumers will tend
to have a specific change in preference
between two options when also presented
with a third option that is asymmetrically
dominated.
The effect implies that people tend to select
options for which the probability of a favorable
outcome is known, over an option for which
the probability of a favorable outcome is
unknown.

Example: Example:

Option A (target): $400 (30Gb) I tend to buy the product X, because there is a lot of
Option B (competitor): $300 (20Gb) positive feedback about it on their website. I don’t trust
Option C (decoy): $450 (25Gb) the product Y because I don’t know much about it.
UX Metrics - HEART Framework ux hints.com

HEART is a framework of user-centric metrics developed by Google to

measure success of design and help product and development teams make
informed decisions that address business and user needs.

GOALS SIGNALS METRICS

(Critical user tasks) (Channels of getting UX metrics) (Quantifiable UX metrics)

Happiness User satisfaction

Users feedback from
surveys, interviews
Satisfaction rating, net
promoter score

Engagement User content discovery

The amount of time users
spend in the app,
Number of shares, average
sessions length, page views

A doption
App downloads, new
User onboarding Download rate, registration
registrations, using new
rate, feature adoption rate
features

R etention User loyalty

Returning users,
subscription renewals
Subscription renewal rate,
churn rate

Task success User goals completion

Usability studies, user
behaviour analytics
Task completion
Conway’s Law ux hints.com

Organizations tend to produce designs which are copies of the

communication structures of these organizations.

Organization Software
Produces a software
mirroring its structure

How does it apply to User Experience?

Organizations often produce web sites with a content and structure which mirrors the internal
concerns of the organization rather than the needs of the users of the site.

Simple example
User-centric form Organization-centric form

Contact Us Contact Us
Name First Name Last Name

E-mail E-mail Phone

Message Address

ZIP Country

submit Message

Terms and conditions

Agree with terms and conditions

Receive news

submit
POUR - The Four Web Accessibility Principles ux hints.com

P erceivable information and user interface

Provide text alternatives for non-text content

Provide captions, transcripts and other alternatives for multimeda

User can change the presentation of content

Content should be easier to see and hear

O perable user interface and navigation

Make sure users can interact with UI from a keyboard

Make sure users have enough time to read and use the content

Content shouldn’t cause seizures and physical reactions

Make sure users can easily navigate, find content, and determine where they are

Make sure users can use different input modalities beyond keyboard

U nderstandable information and user interface

Text and UI must be readable and understandable

Content and UI must appear and operate in predictable ways

Users must be helped to avoid and correct mistakes

R obust content and reliable interpretation

Content must be compatible with different browsers and assistive technologies

Markup should be valid

Google Sprint ux hints.com

Monday Tuesday Wednesday Thursday Friday

Map out the Sketch competing Make difficult Build a high- Test the prototype
problem and pick solutions on paper. decisions and turn fidelity prototype. with real live
an important place Begin planning your ideas into a Write an interview humans. Analyze
to focus. customer’s test. testable script. the results.
hypothesis. Create
a storyboard.

5-day sprint
User Empathy Map ux hints.com

Think & Feel

User’s goals, thoughts,
hopes, fears, concerns
and aspirations

See Hear
What users see What users hear
around about similar
themselves? What products? What
solutions they have sounds surround
already seen? them?

Pains Gains
Challenges & obstacles in What users hope to
their flow. Negative achieve? Positive
emotions. outcomes.
 Customer Journey Map
On the example of choosing a cable/digital television provider
STAGES Awareness
STEPS Wants to find a TV provider
THINKING - Who’s on the market?
DOING Wants to start researching
🙂 🤔
FEELING
PAIN POINTS - Is not aware of all products
- Doesn’t know what to choose
- Doubts the value of the
product
OPPORTUNITIES - Empower word of mouth
- Extend marketing channels
Consideration
Needs to choose a provider
- Who is the best provider?
- What are the prices?
- What people prefer?
- What are the offerings?
- What are the features?
- Goes to the website
- Searches the web for
feedback
- Compares prices
- Compares features
- Doesn’t know where to start
- Doesn’t want to spend a lot
of time on research
- Create positive image of the
product
- Contextual promo
- Decrease frictions for trial
opportunities
ux hints.com
Acquisition Service Loyalty
Subscribes to a plan Uses the service Extends service subscription
- Is there a discount? - How good is the quality? - Is there going to be more
- Is there a trial? - How good is support? content?
- How to pay? - How to connect a new - Is there going to be new
- How to cancel the device? features?
membership? - Will the price change?
- Makes decision - Uses the service - Extends subscription
- Pays for subscription - Builds playlists, favourites, - Recommends the service
- Starts trial bookmarks - Joins the community (forum,
- Installs the equipment/ - Connects new devices slack channels, etc)
software
😐 😌 😃
- Can’t pay by BitCoin - Hard to build playlists - No discounts
- The payment process is - Hard to find content - Not enough other incentives
unclear - Not enough content
- Buffering issues
- Improve payment UX - Improve playlists UX - Create loyalty programs
- Support more payments - Provide better streaming - Turn users into advocates
systems quality - Offer partner programms
- Increase content - Improve discounts model
discoverability
Design Thinking Process ux hints.com

I T E R A T E

collect collect collect collect

feedback feedback feedback feedback

DISCOVER DEFINE IDEATE PROTOTYPE TEST

Learn about user Determine features Brainstorm solutions Simulate user experience Validate with users

Activities

User interviews Personas Brainstom sessions Paper prototypes Usability testing

Stakeholder interviews Empathy maps Mind maps Micro-interactions Shadowing
Surveys User journeys Affinity maps Detailed user flows A/B testing
Data analysis Storyboards Storyboard Mockups SUS surveys
Metrics User stories Card sorting Interactive prototypes Heuristic evaluation
Competitors Problem statement User journeys Wireframes QA
Focus groups Narratives User flows High fidelity design Analytics
Observation Assumptions mapping Information architecture Design hand-offs Performance testing
Clustering insights Task analysis Service blueprints Design documentation Observations
Context mapping Jobs to be done Business model canvas HTML/JS prototypes Desirability evaluations
Customer journey maps Comparative analysis Crazy 8’s Metrics
Design principles Eye tracking
 PAPER
PROTOTYPE HIGH QUALITY WIREFRAME
AND PROTOTYPE
A high quality wireframe and prototype must be
designed with the user in mind, so that it is easy to use
and understand. It should be detailed enough to
communicate the product's features and functions, while
still being simple enough to be understood by users.
A prototype should be built to test the product's usability
HIGH QULITY and to ensure that it meets the user's needs. It should
PROTOTYPE
also be designed to be tested and iterated upon, so that
any potential issues can be identified and addressed.
 HOW TO
CREATE
PERSONA
A persona is a representation
of a user or customer used to
guide decision-making
around product development,
marketing strategies, and
user experience design.
 HONEYCOMB
IN UI&UX
Honeycomb is a classic UX
diagram outlining the seven
essential aspects of UX.
7 TYPE
USEFUL
VALUE
CREDIBLE
FINDABLE
USABLE
DESIRABLE
ACCESSIBLE
 TESTING AND ITERATION

Once the product is designed, UI/UX designers use

testing and iteration to ensure that the product meets
user needs and provides a great user experience. This
includes testing the product with users and making any
necessary changes.
Testing and iteration help ensure that the product meets
user needs and provides a great user experience.
 REASON 1
A wireframe is a visual representation of a
product's interface, which is typically used
WIREFRAME to demonstrate the structure of a product's
layout and its content.
It is a basic skeleton of a product's design,
created to communicate the overall
structure of a product, its functions, and the
content it contains.