UX design
for digital marketing experts
Francesco Zaccaria,�frazac@gmail.com
Quick lecture
@LUISS . 2024
© 2024 Francesco Zaccaria
Our fields of study
2 / 42
Marketing�(mktg plan)
UX research�UX design�CX design
UI design
Design thinking
(design system)
Strategy (and�strategic communication)
TODAY’S FOCUS
3 / 42
WHO WE ARE?
A designer trying
talking to marketers.�You can be my boss.�
How to lead�creative designers?
WHERE WE ARE?�Which didactical
convenient field?
WWW.
WWW is like�a public square.
KIM BEOM FEAT. EDWARD MUYBRIDGE
TODAY’S PATH
Arguments:�1.1 RESEARCH IS ALSO A JOURNEY
1.2 MASTER MINDSET & PRINCIPLES
1.3 SIMPLICITY AND COMPLEXITY
�
2.1 SATISFACTION: UI & CODING�
�
3.1 TRACKING (THE UNEXPECTED)
Eyeglasses:
humbleness�bravery
guidance
beauty
wisdom
Parts:
RESEARCH,�Part I
EXECUTION,�Part II
VERIFICATION,�Part III
4 / 20
TODAY’S METHOD
The structure for each argument:
5 / 20
WHAT’S THE POINT
6 / 42
CARVE YOUR OWN PATH
STEAL THE USEFUL
KIM BEOM FEAT. EDWARD MUYBRIDGE
WHAT’S THE POINT
7 / 42
DON’T LOSE YOUR MIND
STEAL THE USEFUL
EL HELICOIDE, CARACAS, VENEZUELA
8
8 / 42
RESEARCH:�1.1 RESEARCH IS ALSO A JOURNEY
humbleness
CARAVAGGIO
1.1 RESEARCH IS ALSO A JOURNEY
Seminar
The user is on a journey (not just touchpoints) through many fields
Internet hosts many markets (and touchpoints)�WWW is a competitive arena
***
WWW is ephemeral (Codeluppi)
WWW is mainly a participatory verbal media (McLuhan)
WWW is a language that speaks you (Lacan)
***
Wanderlust: explore something unfamiliar is satisfying for designers
Humbleness is an effective learning position for designers and companies
Research as an expert knowledge exchange (like the context mapping)
9 / 42
We must�preside!
We are called to adapt�to a set of languages:�we must study!
How design can help?
We must provide�concrete solutions!
1.1 RESEARCH IS ALSO A JOURNEY
Example
Let’s use a design thinking tool to design a research process.
The tool: the double diamond (references: origins, updated).
How to?
10 / 42
1.1 RESEARCH IS ALSO A JOURNEY
Example
Ex. Key insight(s)
Possible context
On user, with autenticity,
on communication objects, with completeness,
on competitors, with lateral thinking,
on your organization, without hesitation!
The question
The solution
11 / 42
1.1 RESEARCH IS ALSO A JOURNEY
Example
Diverge
Converge
Ex. Research report
Diverge
Converge
Final result
Mid-review
Ex. Research plan
12 / 42
1.1 RESEARCH IS ALSO A JOURNEY
Example
Converge
Quality
Quantity
Horizontal scaling: collect more references;�vertical scaling: in-deep few references.
Good amount and quality: ready to tips!
Diverge
Good amount and quality: ready to tips!
13 / 42
1.1 ALSO RESEARCH IS A JOURNEY
References
A RESEARCH WALL�About A dark room : https://bit.ly/LUISS-research-wall-example
BOOK�This is Service Design Doing — Book / School / Methods, see the website with free contents
VIDEO�TED: David Macaulay: An illustrated journey through Rome | TED Talk, video 21'21'' with translated subtitles
ARTICLE ABOUT DOUBLE DIAMOND AND DESIGN THINKING�From IQ tests to design thinking: The complex origins and invisible legacy of brainstorming, 5-6 pages with good illustrations
TOOL (EXPLORING AND COLLECTING)�Are.na
14 / 42
15
15 / 42
RESEARCH:�1.2 MASTER MINDSET & PRINCIPLES
bravery
THE DEATH OF SOCRATES, JACQUES–LUIS DAVID
1.2 MASTER MINDSET & PRINCIPLES
Seminar
Usability as a starting point
“(Usability refers to) the extent to which a product can be used by specified users to achieve specific goals with effectiveness, efficiency and satisfaction in a specified context of use.” —ISO 9241-11
16 / 42
Effectiveness
Efficiency
Accuracy and completeness with which users achieve specified goals.
Resources used in relation to the results achieved.
Typical resources include time, human effort, costs and materials.
Satisfaction
Extent to which the user's physical, cognitive and emotional responses�that result from the use of a system, product or service meet the user’s�|needs and expectations.
Read it later
1.2 MASTER MINDSET & PRINCIPLES
Seminar
Usability as a starting point
Key concepts (Usability 101) focussed on UX proposed by Jakob Nielsen.
17 / 42
Learnability
Efficiency
Memorability
Errors
How easy is it for users to accomplish basic tasks the first time they encounter the design?�Using the product should be easy to learn for its intended user.
Once users have learned the design, how quickly can they perform tasks?�The product should be efficient to use.
When users return to the design after a period of not using it, how easily can they restablish proficiency?�Using the product should be easy to remember.
How many errors do users make, how severe are these errors, and how easily is the recover?�The product should not allow major errors to occur during its use.
Satisfaction
How pleasant is it to use the design?�Using the product should be subjectively enjoyable.
Read it later
1.2 MASTER MINDSET & PRINCIPLES
Seminar
Usability as a starting point
Main areas from W3C coding guidelines… means coding minimum stardards.
18 / 42
Perceivable
Operable
Understandable
Robust
The users must be able to perceive the information being presented.�It can't be invisible to all of their senses).
The users must be able to operate the interface.�The interface cannot require interaction that a user cannot perform.
The users must be able to understand the information and operations of the user interface.�The content or operation cannot be beyond the understanding of users.
The users must be able to access the content as technologies go forward�As technologies and user agents evolve, the content should remain accessible.
Read it later
1.2 MASTER MINDSET & PRINCIPLES
Seminar
Usability as a starting point
Main areas from W3C coding guidelines… became heuristics for UI.
19 / 42
Perceivable
Operable
Understandable
Robust
Beautiful, stimulating for an emotional experience, inscribed in a strategy.
Easy to use, intuitive, which invites to use.
Simple, consistent in all its parts, corresponding to the public.
→Ref. Argument 1.3 SIMPLICITY AND COMPLEXITY
Complete, clearly structured, equipped with anti-obsolescence functions, resilient, the formal aspects (e.g. brand design) can resist the passage of time and trends.
Beauty
With affordances
Empathetic and sympathetic
Resilience (ability to recover and adapt)
1.2 MASTER MINDSET & PRINCIPLES
Examples
20 / 42
Usability as a starting point
Affordances for button recognition
(IK IT’S CRAPPY & STRETCHED)
1.2 MASTER MINDSET & PRINCIPLES
Examples
21 / 42
Usability as a starting point
Combine affordances and beauty (in product design)
Didier Rams
Formafantasma
1.2 MASTER MINDSET & PRINCIPLES
Examples
22 / 42
Usability as a starting point
Combine affordances and beauty (in interface design)
Google Gemini with Material Design system
Apple Car Play 2024 with Aston Martin
1.2 MASTER MINDSET & PRINCIPLES
References
AUTHORITATIVE BLOG POST�10 Usability Heuristics for User Interface Design, 4-5 pages with illustrations
VIDEO�Simon Sinek: How great leaders inspire action | TED Talk 18' video with subtitles
VIDEO�Tim Harford: How frustration can make us more creative | TED Talk 15' video with subtitles
BOOK�Donald A. Norman, The Design of Everyday Things
23 / 42
24
24 / 42
RESEARCH:�1.3 SIMPLICITY AND COMPLEXITY
guidance
PICASSO
1.3 SIMPLICITY AND COMPLEXITY
Seminar
“Simplicity is a quality that not only evokes passionate loyalty for a product design, but also has become a key strategic tool for businesses to confront their own intrinsic complexities.”�— The Laws of Simplicity, John Maeda
“Simplicity is about subtracting the obvious, and adding the meaningful.”�— ibidem, the 10th law
“The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove.”�— ibidem, the 1st law
Methods to follow to reduce, starting from a research on the user journey:
25 / 42
Read it later
1.3 SIMPLICITY AND COMPLEXITY
Example
The laws of simplicity → Law 1: Reduce →
SHE: Shrink�Scrolling vs pagination: 1. there’s no conflict, 2. clever blend, 3. continuity is the default preferable (scrolling is better in most cases).
“Scrolling is a continuation while clicking is a decision” — Joshua Porter
26 / 42
27 / 42
1.3 SIMPLICITY AND COMPLEXITY
Example
The laws of simplicity → Law 1: Reduce →
SHE: Hide�Hamburger menu examples:
a. from Burger King global website
b. Material design "Navigation drawer"
c. design.google navigation system
28 / 42
29 / 42
1.3 SIMPLICITY AND COMPLEXITY
Example
The laws of simplicity → Law 1: Reduce →
SHE: Embody�
“embody-ing quality is primarily a business decision, more than one of design or technology. The quality can be actual, as embodied by better materials and craftsmanship; or the quality can be perceived”�— The Laws of Simplicity, John Maeda
“Lessen what you can and conceal everything else without los- ing the sense of inherent value. embody-ing a greater sense of quality through enhanced materials and other messaging cues is an important subtle counterbalance to shrink-ing and hide- ing the directly understood aspects of a product.”�— Ibidem
30 / 42
31 / 42
1.3 SIMPLICITY AND COMPLEXITY
References
VIDEO�Tom Hulme: What can we learn from shortcuts? | TED Talk, 7' video with subtitles
VIDEO PLAYLIST�The pursuit of curiosity and understanding | TED Talks, 6 videos
A NERD MANIFESTO�The Kiss Principle, 2 pages reading
ANOTHER BOOK�Steve Krug, Don't Make Me Think, https://www.are.na/block/20177331
UX TOOL FOR RESEARCH�Hotjar Engage, Automate The Entire User Research Process
32 / 42
33
33 / 42
2.1 SATISFACTION: UI & CODING
beauty
POMONA, PONTORMO (Villa Medici, Prato)
2.1 SATISFACTION: UI & CODING
Lecture
INFORMATION ARCHITECTURE: Structuring and organizing information in a way that makes sense and is easy to navigate.�TOOL�Miro, First idea to final innovation — it all lives here
WIREFRAMING AND PROTOTYPING: Creating visual representations of the interface to test and upgrade the stoner experience.�TOOL�Figma’s Resource Library - How-To & Best Practice Articles
USER INTERFACE: Design fastening on the aesthetics of the product, including color schemes, typography, and visual rudiments.�REFERENCE�Shopify Polaris design system, Design section
INTERACTION DESIGN: Designing interactive rudiments like buttons, menus, and forms that grease stoner engagement.�REFERENCE�Material Design
34 / 42
Read it later
2.1 SATISFACTION: UI & CODING
Example
35 / 42
2.1 SATISFACTION: UI & CODING
Example
36 / 42
2.1 SATISFACTION: UI & CODING
References
BOOK�UX Fundamentals for Non-UX Professionals: User Experience Principles for Managers, Writers, Designers, and Developers, Edward Stull
WIREFRAME EXAMPLE�Grocery Shopping App Wireframes - Volodymyr Melnyk
DESIGN SYSTEM GOOD GUIDELINE�DesignSystems.com
DESIGNING TOOL�Magic Design™: Free Online AI Design Tool | Canva
DESIGNING TOOL, A SIMPLE AND COMPLETE WEB BUILDER�Progettazione siti web | Progetta un sito web che ti caratterizzi | Wix.com
DESIGNING TOOL, THE MOST COMPLETE WEB BUILDER�Webflow: Create a custom website | Visual website builder
ARTICLE�What is a wireframe? The definitive guide · Sketch, and another guide.
37 / 42
38
38 / 42
VASARI, PAUL III
VERIFICATION
the general and the particular
3.1 TRACKING (THE UNEXPECTED)�Lecture
The Shannon–Weaver model is…�the connecting ring between strategy and communication.
39 / 42
Sender
Receiver
Reference
…in the noise…
MESSAGE
3.1 TRACKING (THE UNEXPECTED)�Lecture
The Shannon–Weaver model is…�not complete, it needs to add the feedback from users.
40 / 42
Evaluation
Reaction
Sender
Receiver
Reference
FEEDBACK
MESSAGE
…in the noise…
3.1 TRACKING (THE UNEXPECTED)�Example
41 / 42
3.1 TRACKING (THE UNEXPECTED)�References
PAMPHLET�Frog’s agency publication, The Business Value of Design
TOOL�Visualize User Behavior With Click, Scroll, and Move Heatmaps, Hotjar Heatmap
TOOL�Discover What Users Think About Your Site With Hotjar Feedback
VIDEO (ABOUT UNINTENDED CONSEQUENCES)�Michael Bierut: How to design a library that makes kids want to read | TED Talk, 12' video with subtitles
42 / 42
GENERAL REFERENCES
Books | Are.na� https://www.are.na/francesco-zaccaria/books-tjppc3fhfwy
ADBusters shareable for students� from my dropbox
Contextmapping – A design approach to learn from everyday people and use the insights for innovation� https://web.archive.org/.../http://contextmapping.com/
All you need is links - by Gordon Brander - Subconscious� https://subconscious.substack.com/p/all-you-need-is-links
IDEO’s Design Kit� https://www.designkit.org/
Thanks!
I appreciate receiving feedback about the lecture.
***
Prof. Francesco Zaccaria
https://www.linkedin.com/in/frazac/ �https://linktr.ee/frazac
ARRIVEDERCI ROMA, GOODBYE, AU REVOIR…