UX Trends 2018 Report

ZORRAQUINO
UXTrends2018-Zorraquino-January2018
UX Trends 2018
www.zorraquino.com 
January 2018

Prologue
For those who know us, Zorraquino is a design and digital strategy consultancy,
specialist in branding, user experience and the development of integral solutions
for the digital business.
In 2017 we presented our first report on trends in user experience.
Over the last year the sector has not ceased to evolve, for this reason we believe that
this report will be extremely enriching for all those who believe and appreciate the
relevance of this discipline.
In the report you will find the latest trends we foresee will guide the user experience in
2018.
I hope you find it interesting and that it provides you with ideas for your projects.
Miguel Zorraquino 
linkedin.com/in/mzorraquino
2

User experience
User experience is working on the perception and experience users and
clients have of your product or service, through interaction with digital points
of contact.
In other words, it is a key aspect in branding, digital marketing and digital
transformation.
User experience always requires a muilti-disciplinary team that brings together
areas such as: design, psychology, technology, business, marketing and
communication.
3

Humanisation
Humanised design in an increasingly more automated world
Trend 1
4

Human technology
In spite of technological developments, it is increasingly clear that the relation which
the user seeks with a product is the same as they expect with another person.
Human need, "face to face" relation, human emotions such as naturalness and
transparency, which create security, and which mark the relation with the brand from
the first moment.
These touches of humanisation in a digital experience could materialise in short
animations, micro-interactions or, also in the intervention of artificial intelligence in
offering quasi-human dialogues that resolve specific needs.
Human and participative treatment which increases attention, connection and
empathy, and improves user satisfaction.
5
Trend 1. Humanisation

In short
• Personalisation: to capture greater user attention.
• Naturalness, transparency, security. Less friction.
• Micro-interractions: short animations that improve the experience and enrich the
connection.
• Chats: to go shopping as if you were in a shop face to face.
• Upsurge in the design of conversational products.
• Voice assistants in private life: more ﬂuid, friendly treatment, integrated into millions
of homes, cars, …
• “The best interface is no interface.”
6

Facebook
It notiﬁes you if you have been selected in a group, thus allowing interaction on each message
7

Apple
Allows personalisation of emojis
8

Robot Pepper
First humanoid robot that can communicate and interpret human emotions

“When the point of contact between the product
and the people becomes a point of friction, then
the industrial designer has failed. On the other
hand, if people are made safer, more
comfortable, more eager to purchase, more
eﬃcient - or just plain happier - by contact with
the product, then the designer has succeeded.”
 
Henry Dreyfuss, autor de Designing for People
10

Moving on from from NLP (Natural Language
Processing), which understands the question and
is capable of responding, to NLU (Natural
Language Understanding) in which AI
"understands" the user, and a much closer
experience to real conversation between two
people is obtained
 
Chatbots in Facebook
11

Lark
Your personal trainer and friend
13

Lufthansa
“Crew stories” in Snapchat they humanised interaction and increased views by 800%
14

Duolingo
Learn languages talking, a similar experience to having a teacher

Oscar
• Medical service from the cellphone.
• Something as intimate and personal as attending the doctor requires a good user
experience.
• Oscar has revolutionised the health sector in the US.
• Values: technology and transparency.
• The majority of the clients millennials young (25 to 36 years).
• Chat con “advisors” professional with access to your record.
• Consult medical specialists via video conferences.
• They have opened a physical clinic in NY.
16

Oscar
17
A new style of medical insurance that is simple, intuitive and human

Oscar
Contract scriptwriters to make your new assistant more human
18

Google
Contract scriptwriters to make your new assistant more human

“It is ironic that where the race to automate
everything seemed to obviate the human factor,
technology is now being used to personalize
and humanize service.”
Catherine Chetwynd, autor de Reconteur
20

To think
• Humanisation continues to be key in design. The aim: eradicate any kind of
"friction" derived from technology so that interactions are as similar to human
interaction as possible.
• In this sense, psychology plays a key role in the UX design, the designer is not only a
technician, but someone who understands the user and oﬀers him/her much more
human experiences.
• The great investment of companies in AI to improve user attention continues to
generate debate about the future of humans in the automated world. Seeing the speed
of adaption to AI last year....where are the limits?
21

References
10 UX Design Predictions for 2018 
https://theblog.adobe.com/10-ux-design-predictions-for-2018/
15 Big Trends That Will Inﬂuence Marketing in 2018 
https://socialmediaweek.org/blog/2017/12/15-marketing-trends-2018/
UX Design Trends for 2017: Dictated by the Future 
https://www.altexsoft.com/blog/uxdesign/ux-design-trends-for-2017-dictated-by-the-future/
18 Designers Predict UI/UX Trends for 2018 
https://blog.ﬁgma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6
22

References
Facebook Messenger gets reactions for individual messages and  
@ notifications 
https://www.theverge.com/2017/3/23/15033810/facebook-messenger-notifications-reactions
Apple presents the app Animoji to personalise emojis with your face 
http://hoymarketing.com/animoji-personalizar-emojis-cara/
The robot Pepper signs in for Lopesan 
https://www.hosteltur.com/125105_robot-pepper-ficha-lopesan.html
Meet the WoeBot, the chatbot therapist who cares how you feel (for $39) 
https://www.today.com/video/meet-the-woebot-the-chatbot-therapist-who-cares-how-you-
feel-for-39-963783235526
23

References
Most Advanced Chatbot Apps Powered by Artiﬁcial Intellect 
https://octodev.net/most-advanced-chatbot-apps-powered-by-artiﬁcial-intellect/
Lufthansa Intros Consumers To Crew Via Snapchat 
https://www.mediapost.com/publications/article/301283/lufthansa-intros-consumers-to-crew-
via-snapchat.html
How we designed Oscar 2.0 
https://medium.com/@perlerar/how-we-designed-oscar-2-0-fbba97087bae
24

Intelligent
personalisation
The individual as the challenge
Trend 2
25

We personalise experiences
In 2015, Gartner predicted that "by 2018, organisations that have fully invested in all
types of personalisation will outsell companies that have not by 20%".
Having arrived at that date, we see that the prediction was not wrong.
Something that is the linchpin of all sales attempts, but which technology makes
increasingly more certain, with more intimate and emotional, useful and practical
consumer experiences, that allow the user to save time and reduce the
consumption of irrelevant content, developed thanks to data analysis, artiﬁcial
intelligence, machine learning...
The reality is that consumers, in the present day, expect personalised treatment and
that brands are ahead of their needs in exchange for submitting their details.
26
Trend 2. Intelligent personalisation

Facts about personalisation
74 %
Are frustrated when a web page shows them content,
oﬀers, adverts, promotions, etc. that seem to have
nothing to do with their interests.
67 %
Would leave the page if they were asked for a donation
for the political party they least like.
57 %
Would leave the page if they were married and were
shown an advert for a dating service. 
50 %
Would leave the page if they were shown a
recommendation for underwear for the opposite sex.
27
https://www.janrain.com/company/newsroom/press-releases/online-consumers-fed-irrelevant-content-favorite-websites-according

In short
• Individualised experiences, relevant for each user.
• Content adapted to each person: “age responsive design”, suggestions,
recommendations, promotions, etc.
• Big Data: artiﬁcial intelligence and automatic learning.
• Time saving (the most valuable): anticipation.
• 50% of consumers expect that by 2020 the brand understands them and is ahead of
their needs. Salesforce Report.
• Sailthru Rank Top Retail Personalization Index: Sephora, JustFav y Watmart.
• Multi-channel personalisation, built using data from each point of contact with the
consumer.
28

or discounts
Personalized in-store or
online shopping experience
Product recommendations
that match their needs
63%
46%
58%
61%
41%
52%
58%
42%
52%
Millennials Gen Xers Baby Boomers/Traditionalists
Salesforce study
Users give their data for getting personalized experiencies

Sephora
Leader in retail personalization in 2017

JustFab
Personalization process for showing all the adapted contents

Airbnb
Shows experiences adapted to the user

Very
Promotions depending on the weather, cold or hot

L’oreal
Oﬀers personalised products such as this brush with app to control the health of your hair

Spotify
Engagement through message personalisation
35

Netﬂix
The King of the suggestions presents the contents with the most attractive way for each proﬁle

To think
• Research continues in order to get to know the users better and oﬀer an increasingly
more personalised brand experience.
• Users demand more "hyper-personalisation" so it is likely that investment in these
strategies will continue to rise and reach a new record this year, 2018.
• Pending the launching of the General Data Protection Regulations of the EU which
will regulate data collection techniques as these could be essential for realigning
strategies.
37

References
Keep Your Eye on These 9 UX Design Trends in 2018 
https://www.impactbnd.com/blog/ux-design-trends-2018
Top 5 Trends for Customer Experience in 2018 
https://www.janrain.com/blog/top-5-trends-customer-experience-2018
Estudio de Salesforce
https://www.salesforce.com/assets/pdf/misc/socc-2016.pdf
Walk a Fine Line with Personal Mobile Offers 
https://www.gartner.com/smarterwithgartner/walk-a-fine-line-with-personal-mobile-offers/
38

References
Online Consumers Fed Up With Irrelevant Content on Favorite Websites,
According to Janrain Study 
https://www.janrain.com/company/newsroom/press-releases/online-consumers-fed-irrelevant-
content-favorite-websites-according
Retail Personalization Index 
https://www.sailthru.com/personalization-index/sailthru100/
15 Smart Ecommerce Personalization Examples That Boost Sales
https://optinmonster.com/ecommerce-personalization-examples/
Sephora leads the way in personalization 
http://www.businessinsider.com/sephora-leads-the-way-in-personalization-2017-9
39

References
Content Marketing Personalization: 4 Brands’ Winning Tactics 
https://insights.newscred.com/content-marketing-personalization/
Artwork Personalization at Netﬂix 
https://medium.com/netﬂix-techblog/artwork-personalization-c589f074ad76
40

A more
emotional interface
From function to emotion
Trend 3
41

From thought to emotion
The Design Feeling trend comes as a response to Design Thinking, design
theories based on logic, strategy and reasoning and offering responses that
benefit the end user.
It is clear in the 2018 trends that reasoning looses weight against emotions.
More creative and emotive design is predominating against analytic and
logical.
Lately a more monotonous design had taken hold, perhaps too "rational",
"generic", "cold" and “technological". The Design Feeling is inspired by passion
and seeks to differentiate itself through emotion.
42
Trend 3. A more emotional interface.

In short
• Return to what is natural and intuitive.
• Put humanity back into design.
• "Think less and feel more".
• Feel problems, don't analyse them. To give a response to the user that satisﬁes the
usage experience another way.
• Pillars of this trend: impulse, spontaneity, desire, passion, feeling, imagination and
indulgence.
• Represents creativity at its core
• The premise of this movement:: "Design is not a process. It is an art.”
43

Homogeneous design
We come from a more homogeneous and functional design

Functional design
We come from a more homogeneous and functional design
45

“Design is not a process. It’s an art.”
Chase Buckley, UX expert en Medium
46

Facebook
Reactions that contribute digital emotion

YouTube Kids
An interface adapted to the users

CityMapper app
With a lot of personality
49

Google
Interfaces created for an event; a simple, interactive and amusing experience

Design to thrill
• Oﬀer a pleasant, attractive and amusing experience.
• Signiﬁcant experience: that creates an emotion.
• That users connect emotionally with the design of a web page, app, product....will
make them return, remember it, recommend it and love it.
• Building loyalty through the design of emotional experiences, that give a meaning to
the user.
• Design increasingly more focused on the human being, the development will be
guided by the search for this emotion, leaving a footprint.
51

Diseño emocional
UX pyramid
 
Satisfaction
Usability
Trust
Funcionality
Emotion

To think
• In spite of the fact that technology is recognised as something cold and inhuman,
nowadays so omnipresent in our lives, it tends towards the humanisation of design
and experiences.
• Technological development means that products are increasingly less cold, nowadays
immersive and interactive experiences are aimed at connecting emotionally with the
user.
• Technological development means that products are increasingly less cold,
nowadays immersive and interactive experiences are aimed at connecting emotionally
with the user.
53

References
The State of UX in 2018 
https://trends.uxdesign.cc/
Design for Emotion  
https://medium.com/google-design/design-for-emotion-7ba0cf40e05b
Design Outside the Lines 
https://trends.fjordnet.com/design-outside-the-lines/
Facebook reactions inundate the comments 
https://elandroidelibre.elespanol.com/2017/05/reacciones-de-facebook-comentarios.html
54

Mood as interface
Adapt to the mood of the user
Trend 4
55

Interpret emotions
Although it seems like science fiction or a chapter from Black Mirror, the possibility
that a device adjusts itself or even anticipates each user depending on their mood is
real and may change the way we view technology.
The concept “Mood as interface” (MAI) represents the last frontier in user personalised
interface design. Through biometric technology, facial identification and Neural
Networks development a personalised experience depending on the mood and
emotions of each user can be offered.
It is one more stage in UX, from appealing to the senses it moves on to studying
thoughts and delving into people`s minds.
56
Trend 4. Mood as interface

In short
• More personalisation: Content control like never before..
• The content adapts to how one feels at any moment.
• Biometric technology: EEG (electroencephalograph).
• Scanning brain waves which transmit moods.
• Big Data: Data analysis to determine the UX according to the feelings of the user.
• Design of diﬀerent interfaces to adapt to each one.
• Great possibilities for e-commerce: colours and fashion look-books, food deliveries,
entertainment platforms, ...
57

Life is Good
With the action “Power of Optimism” it brings water with positive thoughts
58

API Google
Video and image analysis

Emotion Research Lab
Human resources undertake tests in an interview simulation with real candidates
60

Languing
They carry out an interview with facial recognition
61

Moodie
App that analyses the user experience according to the mood at any given time
62

MoodCast
Analyses mood to undertake patterns and establish new habits
63

Acura Mood Roads
• Presented at the Sundance Film Festival in 2017.
• VR experience of sensory driving.
• BrainWave Technology: collects emotional, cognitive and physical data.
• Movement simulator with 3D biometric sensors.
• EEG sensor headset from the company Emotiv.
• Creates diﬀerent routes, landscape, colour and music according to the driver's mood
(virtual).
• Serene, relaxed, astonished, intrigued, thrilled, …
• No two routes are the same; no two moods are the same.
64

Acura mood roads
Journey controlled by your mood
65

Acura mood roads
Journey controlled by your mood
66

Neural Networks
• Systems modelled according to the human brain.
• Structured according to data perceived by our searches, distribution of likes in
Facebook or Instagram.
• They create patterns of behaviour and subtly personalise the browsing.
• Machine Learning inspired by how our brain works..
• Facebook used them in 2014 in a controversial experiment with 689,003 users.
Facebook manipulated the timeline news of each user in accordance with a study of
their emotions to provoke some moods or others.
67

Facebook
Experiment on users timeline according to their mood
68

To think
• Design according to mood, and adapted to emotional states, is another step towards
personalisation; something that has always been done intuitively but which the
technology now facilitates adapting to the life of the user at any given moment.
• At the same time, doubts are raised about the capacity of technology to accurately
read emotions and also about the power we want to give machines, and whether we
want to allow them to know how we feel.
• In any case, it oﬀers great possibilities for personalisation in e-commerce, products,
colours… depending on ones mood.
69

References
The Future is Imminent: 9 Design Trends for 2018 
https://medium.com/@ChaseBuckleyUX/the-future-is-imminent-9-design-trends-
for-2018-38de77ef95c0
UX Tends for 2018 
https://www.paulolyslager.com/ux-trends-2018/
Can an Interface Express a Mood? 
https://design.ncsu.edu/andso/2017/05/02/interaction-gestalt/
Moodie: A Mood Sharing App 
https://serenacchendesign.com/sharing-the-mood/
70

References
Life Is Good, the Apparel Brand, Built a Machine Powered by Happy Thoughts 
http://www.adweek.com/brand-marketing/life-is-good-the-apparel-brand-built-a-machine-
powered-by-good-thoughts/
Sundance Film Festival Attendees Can Enjoy Acura “Mood Roads”  
VR Experience 
http://www.arlingtonacura.com/blog/acura-mood-roads-vr-journey-2017-sundance-ﬁlm-
festival/
Controversy Over Facebook Emotional Manipulation Study Grows As Timeline
Becomes More Clear 
https://www.forbes.com/sites/gregorymcneal/2014/06/30/controversy-over-facebook-
emotional-manipulation-study-grows-as-timeline-becomes-more-clear/#2d14cf5a9caa
71

Design  
for optimisation
Design for impatient people
Trend 5
72

Quicker browsing
Time saving design continues to be an outstanding trend in 2018 as it is an
important part of UX.
It seeks to create intuitive browsing experiences that reduces friction, saves time and
allows the user to achieve their aim in a limited number of steps.
It is essential to understand what the user expects of each app or web page and use
the appropriate elements to design a product that is consumed, in a more
personalised, simpler and quicker manner.
Other elements that help the user to save time are voice aids or biometric
authentication.
73
Trend 5. Design for optimisation

In short
• Simple designs but not too simple.
• Browsing and main content at ﬁrst glance.
• Increasingly less time is spent on deciding whether you remain on a web page or not
(3 seconds if it doesn't load).
• Intuitive, eﬃcient and optimised designs.
• Orient or guide the user during the route, anticipating their needs.
• Both for smartphone and desktop.
• The masters Uber, Virgin América and Airbnb.
74

Uber
Most interesting information in view, highlighting how to become a driver
75

Virgin America
Main information at one single glance

Airbnb
Simple, clear form and in the main position

Netﬂix
How to gain time in your series by skipping the intros
78

Elements of design
• Minimalist browsing, few steps.
• Buttons, links, questionnaires, ... clear and appealing.
• Visually rich content, images to capture attention.
• Information presented simply and attractively
• Do not saturate with content, animations, graphs or tables.
• Boost action.
• Linear design, see the diﬀerent sections of the web page by scrolling.
• Progress bar, reading time info.
• Personalised suggestions (like Amazon does).
79

Doo
Intuitive app for making lists and reminders
80

Burger King
Voice assistant to save time
81

No more passwords
• Biometric authentication or password-free identiﬁcation.
• It has come to stay.
• Fast and easy process.
• Security guarantees: increasingly more reliable.
• Facilitates day-to-day life: allows user to access and pay without having to remember
passwords.
• Simpliﬁes the steps when making a purchase or doing a transaction.
• Invisible design.
• Many options. The main ones: fingerprint, voice, retina and face.
82

Use of passwords on Internet
61 %
Of consumers use the same
password on various webpages.
54 %
Of consumers have only ﬁve
passwords or less.
44 %
Of consumers change their
password once a year or less.
83
www.csid.com/wp-content/uploads/2012/09/CS_PasswordSurvey_FullReport_FINAL.pdf

Iphone X
Facial identiﬁcation
84

Keyo
Passwords, keys, cards saved in the palm of your hand
85

Payment Request API
Allows you to automatically include payment details which any payment gateway requests

To think
• Apart from questions about design, you mustn't forget that time saving design is
linked to download time, which can also be addressed when undertaking design.
• In addition, you mustn't forget that barrier-free design is costly and requires constant
adaptation: testing, A/B testing, capacity to learn and change, etc.
• The evolution of voice assistants can transform the way to browse, making it easier
and making relations with the machines quicker and more intuitive.
• Biometric authentication adds user distrust to its already great potential, something
which needs to be borne in mind.
87

References
for-2018-38de77ef95c0
The Time-Saving Design Trend and How to Use It 
https://speckyboy.com/time-saving-design-trend/
88

References
Netﬂix’s 'Skip Intro' Button Makes TV Ever More Like an App 
https://www.theatlantic.com/technology/archive/2017/10/netﬂixs-skip-intro-button-makes-tv-
ever-more-like-an-app/544427/
Consumer Survey: Password Habits 
http://www.csid.com/wp-content/uploads/2012/09/
CS_PasswordSurvey_FullReport_FINAL.pdf
89

More
enriched UI
Much more than a pretty face
Trend 6
90

“UX is a lot more than buttons and wireframs.
The stuﬀ that seems obvious is only the tip of the
iceberg, and the stuﬀ that matters most is
completely invisible. In fact, design is only one of
the 5 main ingredients of UX: psychology, usability,
design, copywriting, analysis.”
Joel Marsch, author of UX for Beginners & thehipperelement.com
91
Trend 6. More enriched UI

UI which generates positive experience
We have already seen the scope in which design adapts to the user saving time,
accompanies them during their browse on the web page and guides them without
making them feel they are loosing control.
All this occurs provided you are in an environment that generates trust, empathy,
attracts your attention and you makes you want to stay.
Designers generate this atmosphere through diﬀerent elements. Elements that
create aesthetic eﬀects that please and surprise the user. Degradations, illustrations,
short animations, asymmetries, typography and colours will mark design in 2018.
92

In short
• Movement, animation: serve to capture user attention better, highlight some
information provided you do this to a reasonable extent.
• Video: the king of consumed content. Quality of production, reproduction, ephemeral
videos, video conferencing, ...
• Well used typographies and colours help improve the UX as well as contributing
trade branding.
• Colour: preference for plain colours, one or two, "minimal" tendency.
• Degradations: 2018 tendency, between colours, with transparencies, …
93

Sediment background
helloheco.com
94

Animated background
designbetter.co
95

Fubiz
Logo and animation of loaders
96

Femme Fatale Studio
Sophisticated and simpliﬁed
97

Micro-interactions
They celebrate the success of an action
98

Dropbox
Micro-interaction on saving your suggested password
99

Much more than flat UI
• Adaptive design vs. responsive design: Design adapted to the characteristics of
each format.
• Illustrations: offer personality and difference vs. image banks that are colder and more
neutral.
• Asymmetry and brutalism inspired by free form: they break from static design to
attract attention.
• Inversive image, a simple image, large and that represents the brand.
• Borderless, limitless screen: iPhone X.
101

Nurture Digital
nurturedigital.com

Active Theory
www.activetheory.net

Launchit Schanemielke
launchit.shanemielke.com

Data Visualization
Interactive data visualisation will become increasingly more prominent

Noto by Google
• Google and Monotype have developed a universal typography: Noto.
• 800 languages.
• 110.000 characters.
• With the aim of eliminating the "tofu problem".
• Tofu: white rectangles that appear when a typography is not recognised.
• These rectangles negatively inﬂuence the UX.
108

Tofu
The problem in the web pages

To think
• Try, try and try.
• Fashions come and go, and for a time they may work and empathise with the user.
• Continuity in testing helps to see the decline in a fashion.
• Moderation in the use of elements, do not saturate the user.
110

References
Top Web Design Trends to Watch in 2018 
https://www.forbes.com/sites/tomaslaurinavicius/2017/12/20/web-design-trends-2018/
#390b25bd2375
Design trends UX / UI for 2018 
https://www.digital55.com/tendencias-diseno-ux-ui-para-2018/
9 UI and UX Trends of 2018 - Going Beyond Web and App 
https://uiuxtrend.com/ui-ux-trends-2018/
9 Cutting-Edge Web Design Trends for 2018 
https://99designs.es/blog/trends/web-design-trends-2018/
The Evolution from Invisible Design Towards the Invisible Interface 
https://usabilitygeek.com/evolution-invisible-design-invisible-interface/
111

References
The micro interacciones in web design 
http://www.staﬀcreativa.pe/blog/micro-interacciones-diseno-paginas-web/
Adobe Just Built The Prettiest UI Ever 
https://www.fastcodesign.com/90133924/adobe-just-built-the-prettiest-ui-ever
More than 800 languages in a single typeface: creating Noto for Google 
http://www.monotype.com/resources/case-studies/more-than-800-languages-in-a-single-
typeface-creating-noto-for-google/
112

Sensory feedback
Game of the senses
Trend 7
113

Use of emotional responses
Synaesthesia is the "joint assimilation or interference of various types of sensations of
different senses in one same perceptive act". A person who suffers from
synaesthesia, for example, hears colours, sees sounds and perceives taste sensations
by touching an object with a determined texture.
Multi-sensory experiences have become one of the UX design trends for 2018. Not
only for immersive experiences, as in a VR session, but for the daily use of devices or
activities: personalised, emotional experiences also affect exterior senses.
As in the case of Facebook which studies how to communicate with the human brain
through a language of vibrations, or the studies of the brain of people with
synaesthesia.
114
Trend 7. Sensory feedback

In short
• Synthesis: union of two senses by association.
• Research investment to improve the user experience of synthetic people including
synthetic comments to products or multi sensory interfaces.
• Haptic Feedback continues to be the trend, divide vibration on doing an action,
receiving a message as a warning, …
• Neural Network: design in harmony with the brain, emotions …
• Facebook researches in this direction to determine a language o vibrations.
115

The Feelies
London Company creases a Multi sensorial VR experiences

Shynesthesia glasses
It deforms the senses
117

Scentee
Diﬀerents smells when you receive an email, like or the alarm
118

Scentee
It can manage diﬀerent fragrances of your home from the application
119

Facebook
• “Building 8” the secret research laboratory of Facebook.
• Currently working on “developing technology for brain-powered smartphones”.
• A technology that will enable us to write by thinking or communicate via the
vibrations of our skin.
• Presented at F8, the developers conference held in April 2017: still in its infancy, but
more developed than expected.
• It will allow unprecedented interaction with devices.
120

“Building 8”
Regina Dugan presents the new cerebral technology of Facebook
121

“Through a series o electrodes, the company
hopes its neural technology can reduce language
to vibrations that can be read by users’ skin. So
far, this ability to “hear” with patterns of simulation
on the skin also seems much closer to a real
consumer technology.”
Regina Dugan, VP engineering and head of Building 8, Facebook
122

Rumble Stripes
• Audible lines on the road that alert you if you exit the lane.
• Concept applied to UX design to:
• Attract the attention of tired or inattentive users.
• As a wake-up call in on-going websites or apps like IG, Pinterest, and prevent
monotony.
• Warn of dangers or possible scams.
• Correct behaviour.
• Vibration alerts to tell you to continue in your lane.
123

Vibration
For attract the attention of the user
124

To think
• UX focuses on the senses, on provoking a sensitive reaction.
• Something that still seems like science ﬁction but which could be here soon, given
the investment being undertaken by large digital media (especially Facebook).
• The possibilities are also great on a small scale; exploring ways of linking the diﬀerent
senses to the design consumption experience.
• Smell and touch may be the senses that most complement the design experience,
which need to be conceived as multi-sensory. But it also wants to get into your
thoughts. Just how invasive could it get to be?
• For the present it is not something we are going to see, but it will strengthen
communication through skin vibration and UX design for people with synaesthesia as
the large multinationals are doing.
125

References
UX Tends for 2018 
https://www.paulolyslager.com/ux-trends-2018/
The Top 10 User Experience Design Trends for 2018 
https://uxplanet.org/the-top-10-user-experience-design-trends-for-2018-2842be9364aa
Synesthesia Glasses 
http://ericparren.net/works/synesthesia-glasses.html
126

References
At F8, Facebook Debuts a New Platform: The Human Brain 
https://www.inverse.com/article/30520-facebook-brain-computer-interface-neural-control-
smartphone-thoughts-mind?
utm_source=twitter.com&utm_medium=on_site&utm_campaign=desktop
for-2018-38de77ef95c0
127

Year of
augmented reality
Improving reality
Trend 8
128

The real experience
“AR will change everything” stated the CEO of Apple, Tim Cook, last year. AR
expansion is happening very quickly and is very generalised. Great names like
Facebook and Apple are promoting this development. Furthermore, the
integration of special lenses in new smartphone is the key to the democratisation
of their use.
In this new panorama the brands have great opportunities to create more
intense digital experiences, simulating a better world in the layers of the real
one. Experiences with more immersive interactions that give added value to the
consumer.
129
Trend 8. Year of augmented reality

In short
• After the success of Pokemon Go and the Snapchat ﬁlters, the use of AR has
normalised, and has not ceased to evolve.
• Expected AR market of $57,000 m in 2021.
• The “virtual FOMO” begins to propagate in AR: you don't want to miss the novelties
emerging in the sector.
• ARKit for iPhone and social networks: designed to democratise the use of
Augmented Reality.
• Another way of connecting virtual with real.
• Don't isolate yourself from an environment like VR, its application is related to the
context.
130

Consumer
Healthcare, Education
& Government
Automotive
Enterprise
$ 9
$ 8
$ 6
$ 4
$ 3
$ 2
$ 1
$ 1
$ 3
$ 3
$ 3
$ 2
$ 3
$ 4
$ 4
$ 4
$ 4
$ 21
$ 18
$ 14
$ 9
$7
$3
$2
2016 2017 2018 2019 2020
The opportunity
Augmented Reality is poised to become the next major
visual computing platform.
Combined software and hardware sales are expected
to exceed $20 billion by 2022
Ar will change
the word
2021 2022
$ 2
$ 2
$ 1
$ 1
$ 1
$ 1
$ 1
$ 1
Goldman Sach
Projected investment in AR

The potential of VR & AR applications
Prediction of opportunities
The Diverse Potential of VR & AR Applications
Predicted market size of VR/AR software for diﬀerent use cases in 2025*
Enterprise and public sector
$16.1b $5.1b $11.6b
$4.1b
$3.2b
$0.7b
$1.4b
$1.6b
$2.6b
$4.7b
Total
$35b
Consumer
$18.9b
Videogames
Lives events
Video entertainment
Healthcare
Engineering
Real estate
Retail
Military
Education

“VR will be big, but AR will be bigger 
and take longer.”
Digi-Capital Report Q4 2017
133

Opportunities
• Augmented Reality enhances reality.
• More intense inter-actions with the user.
• Inﬁnite possibilities for retail: try products without really trying them, clothes, make-
up, furniture, food, ...
• Measure spaces, routes, ... facilitate the life of the user in day-to-day questions.
• Commitment also in the construction, health, ﬁnancial sector.
• Of course: entertainment.
• Give detailled presentation of product with additional information that other media
cannot cater for.
134

Snapchat
New Lense ﬁlters in 3D

ARKit
Augmented Reality of Apple in iPhone and iPad

Fitness AR
Visualise your training and choose the route

AR Measure Kit
Measure spaces or objects

Augmented reality
Visualise the appearance of the menu before sorting it.

MTV Awards
2017 Campaign included an AR action

L’Oreal
2017 Campaign included an AR action

Sephora
App for trying products before buying them

Tequila Patrón
Invites you to visit a Mexican hacienda and talk about tequila

Ikea App
Places the furniture in your living room to see what it looks like

Microsoft
Mixed Reality Studio to create holograms

CES 2018
• “It’s spring for AR—and winter for VR”.
• VR: immersive, virtual, not real, technological accessories (helmet).
• AR: in the real, social world, simply using your smartphone, entertainment, everyday
problem solving, (IKEA, measurements, testing, shopping, ...).
• MR y XR: Mixed Reality and Extended Reality are the new angles.
• Role of brands: branded content in AR produces more engagement than in VR.
• AR partners and advertisers are deﬁning the advertising formats to include in these
virtual worlds.
146

“The biggest barrier to the growth of AR and VR
has been that the technology environment that the
everyday consumer lives in and is native to doesn't
support it. ...Two years from now we're going to be
talking about 5G from a mobile computing
perspective. ...The average consumer will be
using a device where they can interact with AR
at a speed that's seamless to their experience.”
 
Will Wiseman, chief strategy oﬃcer of media agency PHD
147

To think
• Facebook and Apple's commitment to AR generalising its use, opens up new
possibilities for the brands.
• It has gone from a temporary fashion to become something which all brands oﬀer
and all consumers expect.
• Mark Zuckerberg announced at the F8 that soon all screens will have built-in lenses to
experience AR.
• It is expected that next year the strategies to promote ROI of these applications in AR
will be speciﬁed.
• Will the AR apps continue to drain the cellphone battery?
148

References
10 UX Design Predictions For 2018 
9 UI and UX Trends of 2018 - Going beyond web and app 
https://uiuxtrend.com/ui-ux-trends-2018/#AugmentedReality
How Brands Are Using AR to Engage Consumers and Measure Results 
http://www.adweek.com/digital/how-brands-are-using-ar-to-engage-consumers-and-
measure-results/
Top 5 Augmented Reality Trends 2018 
https://mozenix.com/2017/10/09/top-5-augmented-reality-trends-2018/
Mixed Reality Will Help Business Cash in on Both AR and VR 
https://venturebeat.com/2017/11/01/power-couple-mixed-reality-will-help-businesses-cash-
in-on-both-ar-and-vr/
149

References
Virtual & Augmented Reality: The Next Big Computing Platform? 
http://www.goldmansachs.com/our-thinking/pages/virtual-and-augmented-reality-report.html
Snapchat’s Amazing New Filters Drop Digital Stuff Into Your Real World 
https://www.fastcodesign.com/90110603/snapchats-amazing-new-filters-drop-digital-stuff-
into-your-real-world
Fitness AR uses Strava and ARKit to share your workouts in augmented reality 
https://www.digitaltrends.com/outdoors/fitness-ar-app/
MTV Is Using Snapchat, Holograms and Augmented Reality to Drive Tune-Ins for
the VMAs 
http://www.adweek.com/digital/mtv-is-using-snapchat-holograms-and-augmented-reality-to-
drive-tune-ins-for-the-vmas/
150

References
Patrón’s Snazzy New AR App Lets You Visit a Hacienda and Chat With  
a Bartender 
http://www.adweek.com/creativity/patrons-snazzy-new-ar-app-lets-you-visit-a-hacienda-and-
chat-with-a-bartender/
The Top Examples of AR in Retail 
http://www.augment.com/blog/best-of-ar-in-retail/
Inside Microsoft's new mixed reality capture studio 
http://www.bbc.com/news/av/technology-41747005/inside-microsoft-s-new-mixed-reality-
capture-studio
151

Designer
as storyteller
Hooked on your story
Trend 9
152

“Stories are how we remember.
We tend to forget bullet points.”
Robert McKee
153
Trend 9. Designer as storyteller

Design by telling a story
Stories have always been one of the most eﬀective ways to connect with people,
and to generate both attention and memory.
A good story, that entertains and surprises, attracts and convinces the user. If, in
addition, it becomes the principal character of tales related to the product, it will be
easier to capture the user's attention and have direct interaction with them.
This is why narration is increasingly more prominent in UX. Because stories are not
only told with words but also with design, interactions, points of contact...through the
whole relation- and shopping itinerary. Multi-channel and multi-format stories, clear,
interesting and human.
154

In short
• Each interface tells a story in which the user is protagonist.
• Designer as storyteller cooperation between designers and writers has created the
"UX Writing".
• Importance of the message to be communicated without distractions or extra
elements. The minimalist tendency supports the narration eliminating unnecessary
elements, blank spaces.
• Reinforcement of the visual hierarchy to understand the content.
• Design that builds on quality content: useful, attractive, adapted to the recipient, etc.
Content is king.
• The upsurge in "conversational interfaces" also promotes the growth in UX writing
and brand narrative.
155

“Content is the reason search
began in the ﬁrst place.”
Lee Odden, CEO at TopRank Marketing
156

“Browsing a well-crafted interface 
is like reading a great story.”
Fabricio Teixeira & Ciao Braga  
UX Design Collective
157

New professional proﬁles
New needs for this trend

Protagonist of the story
• Emotional stories to attract attention.
• Less than 10 seconds to get hooked to the story.
• Classic structure of introduction, core and ending.
• Images that accompany the story and contribute something. Visual elements create
engagement.
• Oﬀer small surprises or rewards throughout the story.
• Protagonist user can also be in video-game version, quiz version etc.
• Inter-activity to know the user better. More ﬂuid experience.
• Brand value key to the story.
159

“Design creates stories, and stories create
memorable experiences, and great experiences
have this innate ability to change the way in which
we view our world.”
Christian Saylor, UX Designer at Universal Mind
160

Airbnb and Pixar
UX design comes from understanding the user We take one more step towards better narrated stories

Costa Experience
Brand story narrated through storytelling

Jordy Alblas
This designer wants to hear a story to create an experience

23andMe
It makes you protagonist creating a story about your product

Google Maps
Transforms into Pacman on April Fools’ Day

Habitica
Task organiser that makes you overcome tests like in a video-game with rewards

To think
• Stories that generate more entertaining, amusing experiences that create a positive
connection, but which are more difficult to elaborate and control. Furthermore, UX
writers are not in abundance.
• Conversely, the stories and web conversations generate more interaction, which
leads to the compilation of interesting personal information to design the relation with
clients.
• UX writing, in addition, offers many possibilities to engage the consumer; the stories
allow the client to become the protagonist, with the positive effect this has on the
relation.
168

References
Trends for UX / UI Design for 2018 
https://www.digital55.com/tendencias-diseno-ux-ui-para-2018/
#390b25bd2375
169

References
A Visit To Airbnb 
https://wordsofasuperheroine.wordpress.com/2014/11/15/a-visit-to-airbnb/
Google Maps morphs into Ms. Pac-Man for April Fools’ Day 
https://www.theverge.com/2017/3/31/15136848/google-maps-april-fools-ms-pac-man-
easter-egg
170

Connected
experiences
OmniChannel and cooperation between brands
Trend 10
171

Digital teams up with reality
The user experience is not something that is limited to the digital environment, but it
is present in day-to-day life (voice assistants, IoT, retail, ...).
The connection between the physical and digital enables the creation of much more
immersive and emotional experiences. OmniChannel strategies and brand
cooperation offer more dynamism and fluidity; they are more attractive for the user and
more beneficial for the brands.
Designing these experiences you build brand image. Coherence and cooperation
between teams results in a positive connection with the user.
172
Trend 10. Connected experiences

In short
• OmniChannel, design a route that oﬀers ﬂuidity between channels.
• The user decides what device to continue on without losing information or time:
context or brand environment.
• Transition without creating friction.
• Integrating the physical and digital. Importance to physical spaces. Evolution of
retail and experiential shops.
• Importance of physical presence: Amazon Go, Deliveroo, Alibaba.
• Brand cooperation to improve the user experience: Nike and Apple, Uber and Spotify,
Go Pro and Red Bull, …
173

Apple
Great example of ﬂuidity between channels
174

Apple Chicago
New shop as a place of encounter and social life
175

Starbucks
App that allows you to order and pay before arriving at the establishment
176

AIM
The doctor goes to your house in a booth that he/she drives alone and examines you
177

Uber
Teams up with Citymapper
178

IMDb & Amazon
A strategic alliance

Zara
Physical shop for online shopping
181

TripAdvisor & Deliveroo
An alliance that works

EasyJet & Booking
Oﬀers for ﬂight and hotel

Ford & Tinder
Organised a Carpool-Karaoke like a blind-date with a Mustang
184

KFC & Nasa
Surprising collaboration
185

Burgerclan
• Play Station and Burguer King.
• Action launched in Spain to "change the rules of the game"
• For members of Play Station Plus.
• First online home delivered food service through video-games.
• Without exiting the game you can place an order.
• Participation of 9 professional gamers.
• Notoriety and dissemination of home delivery and increase in subscriptions.
186

Burguer King & Play Station
Home delivery without exiting the video game
187

To think
• Despite the predominance of digital reality in our lives, it is diﬃcult to think of an
experience that is exclusively online.
• User experience design tends to combine the physical world and the digital to
create more totalising experiences.
• Integration here becomes the key word, the same as inter-departmental work:
considering that all the angles and realities of a brand aﬀect the user experience.
• Integration not only considers what is virtual and physical, but also explores
collaborations between brands that cater for user needs more thoroughly. Another
aspect in the design of experiences.
188

References
The 12 Most Innovative UX Experiments of the Year 
https://www.fastcodesign.com/90155083/the-12-most-innovative-ux-experiments-of-the-year
Its Time for Immersive Brand Experiences 
https://uxplanet.org/its-time-for-immersive-brand-experiences-466b4ac108ea
5 Examples Brilliant Brand Collaborations 
https://www.virgin.com/entrepreneur/ﬁve-examples-brilliant-brand-collaborations
5 Inspiring Companies Doing Omni-Channel Right 
http://blog.feedeo.io/2017/05/09/5-inspiring-companies-doing-omni-channel-right/
189

References
What the new Apple shop shows about how retail is changing  
https://www.puromarketing.com/14/29493/nueva-tienda-apple-ensena-sobre-como-esta-
cambiando-retail.html
Who Needs A Hospital, When This Self-Driving Doctor Comes To You? 
https://www.fastcodesign.com/90130217/who-needs-a-hospital-when-this-self-driving-
doctor-comes-to-you
Five great examples of integrated brand partnerships online 
https://www.econsultancy.com/blog/69285-ﬁve-great-examples-of-integrated-brand-
partnerships-online
In London Zara opens a physical shop only for "online" shopping 
https://elpais.com/economia/2018/01/25/actualidad/1516886057_673051.html
190

References
Tinder Users ‘Swipe Right’ For Blind Dates In A Mustang 
https://media.ford.com/content/fordmedia/feu/en/news/2017/01/05/tinder-users-_swipe-
right-for-blind-dates-in-a-mustang.html
KFC Flying Chicken Sandwich Bankrolling World View Balloon Test Flight 
https://www.space.com/37190-kfc-funding-world-view-balloon-ﬂight.html
Burger King Is Launching a Video Game Food Delivery Service in Spain. We
Went There to Test It 
http://www.adweek.com/creativity/burger-king-is-launching-a-video-game-delivery-service-in-
spain-we-went-there-to-test-it/
191

Atomic Design
Design as an organism
Trend 11
192

New web design
Formulated a few years ago by Brad Frost, and reinforced with the publication of the
book by the same name (Atomic Design) in 2016, it depicts a web design
philosophy (and graphic design) aimed at facilitating the systematic creation of a
design piece, quicker, more consistently and more robust.
The philosophy of Atomic Design goes through dissections, design in its most basic
elements - atoms, molecules, organisms, templates and pages - to then recompose
them, as the case and the need may be, nearly automatically, and create ﬁnal results
of undisputed consistency, developed quickly and with little eﬀort.
193
Trend 11. Atomic design

In short
• A design philosophy created by Brad Frost.
• Fundamentally disseminated through his blog and his book Atomic Design (2016).
• He classiﬁes design elements into ﬁve typologies: atoms, molecules, organisms,
templates and pages.
• To build design systems based on developing possible combinations between them.
• The aim: easier, quicker, more consistent design.
• Modelled on the physical: all the materials made up of atoms.
• He seeks to design systems of design, more than collections of templates.
194
Trend 11. Atomic design

Brad Frost
Creator of the concept of Atomic Design

Atomic Design
Creator of the concept

Atomic Design
Synthesis of the concept

Design Sytems
Design systems based on Atomic Design

More tools
Increasingly more and better design tools

“A lot has been said about creating design
systems, and much of it focuses on establishing
foundations for color; typography, grids, texture
and the like. This type of thinking is certainly
important, but I’m slightly less interested in these
aspects of design because ultimately they are and
will always be subjective. Lately, I’ve been more
interested in what our interfaces are
comprised of and how we can construct
design systems in a more methodical way.”
 
Brad Frost, author de Atomic Design
201
Tendencia 12. Atomic design

Google Material
Icon recourses

Design based on cards
Examples

Google Material
Design based on cards, icons and geometric elements

To think
• The need for quick designs and, at the same time quality, makes one think of the
need to adopt systems based on the philosophy of Atomic Design.
• Atomic Design oﬀers, above all, two functionalities especially sought after by brands
of today, and that are seldom found together: quality and speed.
• A design method that can permit large-scale production without losing out on
quality or surpassing the budget.
• Conversely, it could involve greater initial investment, in time and money, which some
brands may not be willing to assume.
207

References
Atomic Design - Goodreads 
https://www.goodreads.com/book/show/29567165-atomic-design
10 reasons you should be using Atomic Design 
https://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-
design-61620771
Atomic Design - Brad Frost 
http://bradfrost.com/blog/post/atomic-web-design/
Why use atomic design?  
https://platzi.com/blog/por-que-atomic-design/
208

References
50 Creative Card UI Designs 
https://www.webdesignerdepot.com/2017/01/50-creative-card-ui-designs/
209

Only the essential
The trend that does not die:  
“Reduce in a reasoned manner"
Trend 12
210

Less is much more
The world in 2018 is converting us into synthetic consumers: who seek maximum
content, with minimum expression. Users of web pages and simple, functional,
attractive and essentialist experiences.
Design with less elements, simplified and effective. The philosophy "less is more"
does not only apply to aesthetics: nowadays it is a necessary solution for many brands
faced with saturation of information, the quantity of images and stimuli that reach
consumers daily.
A trend that started with Bauhaus in 1919 and took off in the 1960`s with the
minimalist artistic movement, and which currently continues to evolve.
211
Trend 12. Only the essential

In short
• Simple, clean, essentialist design: attracts and provokes less rejection.
• Tranquility and elegance as opposed to disarray.
• Released from all that is superﬁcial: leaving only what contributes something to the
user.
• Aimed at eliminating distractions.
• "You don't need more space. You need fewer things" (Joshua Becker in the book
The More of Less).
• Quicker loading, as a complement to simpliﬁed design.
• Compatible between screen sizes.
• Inspired by Japanese design, the Bauhaus school and the minimalist artistic
movement of the 1960's.
212

Dieter Rams
Functional and simple

Good design is innovative
Good design makes a product useful
Good design is aesthetic
Good design makes a product comprehensible
Good design is discreet
Good design is honest
Good design is longlasting
Good design addresses all the details
Good design is environmentally responsible
Good design is the least possible design
 
Dieter Rams, the 10 principles of good design
214

Apple
Principal information at the top of the page

Airbnb
Again as a great example

The Light Phone
thelightphone.com

More minimal elements
• Typography, large fonts and bold.
• Bright flat colours. Monochrome widely used.
• Contrasts to direct attention, for example between text and background.
• Photo or illustration, simple and clean, without many elements that break the design
of the web page.
• One point of attention per screen, clear message, no distractions.
• Surprise with the first view, at the top of the screen.
• Menus clearly visible, not hidden.
• Simplified, intuitive browsing and optimisation of content.
• If there are animations they should be subtle and essential. Functional.
220

Airmax de Nike
Designed by mvsm.com

“Giving site content and components room to
breathe greatly improves a user’s experience.
Strategically placed white space can signiﬁcantly
help content digestion and alleviate distractions.
Removing unnecessary elements provides a
cleaner, more focused experience. Gone are the
days of gratuitous animations and hefty navigation
menus. Is it absolutely necessary?  
If not, remove it.”
 
James McCarthy, web developer, UX designer and entrepreneur
222

To think
• Minimalist design helps the user experience provided it is not just something
aesthetic. It is not about cleaning the page but removing everything that distracts, so
that things are better understood.
• In this sense, the white space is not conceived as wasted space but an element to be
highlighted.
• In addition, with the demand for loading speed of web pages, these designs are
gaining popularity for oﬀering a simpliﬁed quicker option and that weighs less.
223

References
#390b25bd2375
Functional Minimalsm for Web Design 
https://theblog.adobe.com/functional-minimalism-for-web-design-2/
Keep Your Eye on these 9 UX Design Trends in 2018 
https://www.impactbnd.com/blog/ux-design-trends-2018
224

References
Dieter Rams 10 Principles of “Good Design” 
https://www.archdaily.com/198583/dieter-rams-10-principles-of-“good-design”
Air Max ’17 
http://mvsm.com/project/air-max-2017
225

We are a business and strategy consulting ﬁrm, a digital agency, a design
studio and a development company that focuses on research, design,
technology and marketing. Our projects are always based on agile design
methodologies as a a key element in business strategy and innovation.
 
Find out more about us: www.zorraquino.com
226
ZORRAQUINO

Zorraquino
Photo of our facilities in Bilbao

Madrid
Gustavo Fernández Balbuena 11, 4º 
28002 MADRID
Tel. (+34) 91 179 34 82
Twitter LinkedIn Instagram Newsletter
© COPYRIGHT ZORRAQUINO COMUNICACIÓN, S.L.U. ALL RIGHTS RESERVED THIS DOCUMENT IS PROPERTY OF ZORRAQUINO COMUNICACIÓN, S.L.U. AND ITS CONTENT IS CONFIDENTIAL. THIS DOCUMENT MAY NOT BE
REPRODUCED, IN ITS TOTALITY OR IN PART, OR SHOWN TO OTHERS, OR USED FOR PURPOSES OTHER THAN THOSE ARISING FROM ITS SUBMITTAL, WITHOUT THE PRIOR WRITTEN CONSENT OF ZORRAQUINO
COMUNICACION. S.L.U.
Bilbao
Marqués del Puerto 6, 1º 
48009 BILBAO
Tel. (+34) 94 415 73 79 
www.zorraquino.com
ZORRAQUINO

UX Trends 2018 Report

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a UX Trends 2018 Report

Semelhante a UX Trends 2018 Report (20)

Último

Último (20)

UX Trends 2018 Report