Trends are the natural changes in behaviours or proceedings. We like to be aware of those indicators for inspiration and guidance. At the beginning of every year we look at UX, UI trends and emerging technologies to get that guidance from.

1. 1
27 Janeiro 2023
Technology
and UX,UI design
trends for 2023
A brief look at the UX and UI trends
today with the aim to inspire a
discussion amongst the cocooners.

2. cocoonexperience.com
2
Index
Intro: understanding the approach behind the research
Above all the trends
A brief look at the emerging technology that concern us.
No-code development, online decentralisation to improving languages between machines and humans.
01 Technology
The natural changes in behaviours are mostly found amongst the people in their natural habitats.
2.1 User Experience
2.3 User Interface
2.4 The State of Sustainability
02 Trends

3. cocoonexperience.com
3
Every year we need to understand these new trends,
they resume the patterns we work with.
Trends are the natural changes in behaviours or
proceedings. We follow those indicators from our
resources and references for general guidance only.
Design should always be about blending technology
with human behaviour or ergonomics and
environment, these patterns of change should
always be amongst the people and nature, however
we should always look and protect the individual
interests.
Above all the trends

4. 4
Technology
From no-code development, online decentralisation to improving
languages between machines and humans.
cocoonexperience.com

5. cocoonexperience.com
5
After the overload of Low-code platforms like Outsystems which we had
the chance to try, now comes the “not-new” No-code term.
These platforms, like WebFlow or Framer appeal to the “non-code
development” , they use familiar interfaces to the designer, and
according to their claims easy as; Go (publish). VeV will go a bit further,
code and animate your site.
I am generally skeptical of DYI type of development claims, my
experience tells me that in most cases, either the outcome is weak or
the DYI becomes a never-ending loop of gaps that need filled by other.
However I haven’t tried any of the Non-Code platforms yet but they are
becoming increasingly popular and perhaps worth a further look.
WebFlow: https://webflow.com/
Framer: https://www.framer.com/
VEV: https://www.vev.design/
Increasingly popular
Designing for no code Framer interface

6. cocoonexperience.com
6
This works by managing the data in different and independent servers,
cryptocurrency is a good example of this.
It means that the data it’s not in the hands of one singular corporation,
but rather in the hands of a network of people, making it more secure
and reliable as there is no “one single point of failure”.
Mastodon the social network operates on this technology, and recently
has seen its number of users increase due to the recent changes in
Twitter!
Decentralisation also relies on mining and staking by incentivised
volunteers, wether is for social or economic gain. Like in the cases of
Uber or Airbnb, where the users are rewarded through the decentralised
system.
Mastodon: https://mastodon.social/
Based on blockchain technology
Decentralisation Mastodon landing page

7. cocoonexperience.com
7
While it still blurred on the ethics behind intellectual property on some
of the “Arty” applications such as DALL·E 2 or Midjourney, or we (as
designers) question the use of plugins such as Magician Design, the fact
is Artificial Intelligence certainly is moving forward in the Healthcare
sector with its AI Assistants, and the Automotive industry; where 33
million driverless cars will be on the USA roads by 2040, predicts Police
Advice.
This will have a major impact on the Digital sector, artificial generation
of content, images, intuitive layouts and experiences in general.
Although I don’t think this will make us (designers)n redundant, will
definitely change the focus of our work. New opportunities arising.
DALL·E 2: https://openai.com/dall-e-2/
Midjourney: https://www.photoleapapp.com/
Magician Design: https://magician.design/
Police Advice: https://policyadvice.net/
Bursting opportunities
AI Power
DALL·E 2 example

8. cocoonexperience.com
8
Until now, AI was known to be better than humans performing data-driven
decision making tasks. The last two years AI language have evolved allowing
it to perform cognitive and creative tasks.
NLP narrowed that gap, allowing computers to process language like humans
do. Funded by Microsoft, and used by more than 300 applications GPT-3 is
one of the best known NLP engines according to Harvard Business Review.
This tool (GPT-3) powers Fable Studio, an interactive story creating machine,
allow humans to have natural conversations with characters on these stories.
The number of NLP engines are growing, and its performance improving by
the day, other example of is ChatGPT, it optimises language for chatbots: can
tell you a story based on a simple question, admit its mistakes, challenge
incorrect premises, and reject inappropriate requests…
Hello world just got a brand new bag!
GPT-3: https://openai.com/blog/gpt-3-apps/
Fable Studio: https://www.fable-studio.com/
ChatGPT: https://openai.com/blog/chatgpt/
Soothing the communication
Natural Language Processing - NLP
Fable Studio

9. 9
Trends
The natural changes in behaviours are mostly found amongst the
people in their natural habitats.
cocoonexperience.com

10. 10
A great digital user experience doesn’t always means a
good purchase experience. The product you acquiring
needs to be as good as the flow you follow while
purchasing it.

11. Immersive scrolling is motion design with the purpose to enhance your
experience, is story telling using your own scrolling. It focus on smooth
transitions between the different chapters of the content.
There’s a few good examples of scrollytelling, some use it as the central
focus of the site while introducing you the world of NFTs: Mirror. VeV to
showcase.
To promote a product, landing pages, like Apple, or in full interactive
resports to educate the users like Covid-19 in Africa. And more…
Mirror: https://www.mirrows.co
Vev: https://www.vev.design/case-studies/decimal/
Apple: https://www.apple.com/pt/imac-24/
Covid-19 in Africa: https://mo.ibrahim.foundation/our-research/data-
stories/covid-19-africa-challenging-road-recovery
The depths: https://onjustonebreath.com/
PostVand: https://postevand.com/
Immersive scrolling
Scrollytelling
Mirror

12. cocoonexperience.com
12
Most of us absorb information (data) better if it is delivered by visually appealing
graphics, I know I do.
Because we know this, and also because users attention is shrinking we need to
highlight the important stuff and transform it into a focus point, playful to interact and
pleasant to look.
Spotify popular feature Wrapped presents the user its anual listening habits in a
colourful and engaging manner. It transforms users data into something meaningful
and emotional.
Other great usage of this growing trend are the anual reports for the different
companies we find online, Adidas has a great one to look at!
For us designer there is a variety of online resources like DataViz, or books like
Information Graphics (Taschen) or New Playful Data by Shaoqiang Wang.
Spotify Wrapped: https://newsroom.spotify.com/2022-11-30/everything-you-need-to-
know-about-2022-wrapped/
Adidas Report: https://report.adidas-group.com/2021/en/
DataViz by Ferdio https://datavizproject.com/
GWI: https://www.gwi.com/connecting-the-dots/sustainable-priorities
Quinto Andar: https://censodemoradia.quintoandar.com.br/perfil-sociodemografico/
Wine Model: https://pudding.cool/2021/03/wine-model/
For the shrinking attention
Data visualisation
Spotify Wrapped

13. cocoonexperience.com
13
To maintain a solid relationship between brands, its products and users, there is
an expectation that digital products are designed with the particularities of each
one of us in mind.
As we know it’s not quite like that, however we should look into the singular, and
with the help of contextual data, Internet of Things and A.I. design for generative
experiences that connects our daily basis routines to our health, entertainment,
finances etc.. seamlessly.
We can achieve this emotional link between the products and users in lesser
complicated forms, my smart bulbs remember what light I use at the different
times of the day, Netflix content series can be delivered in different order for
different users depending on their viewing history, Amazon customers receive
highly contextualised emails with personalised product recommendations based
on customer demographics, psychographics, and previous purchase. Or geo-
location based recommendations already prominent in advertising!
Or we can design systems that allow the user to have more/some control over the
experience: Automation.
“As a CMO’s focus becomes more customer-centric and data-driven, AI-powered
hyper-personalization provides the appropriate solution. “ Says Deloitte in their:
Connecting with meaning document.
Within emotional design
Hyper Personalisation
Netflix - Kaleidoscope

14. 14
The touch point and the elements in it that makes you
(user) interact and engage in a digital product. Thats my
definition of UI.

15. Geometrical structure, can be elegant, bold or bright, can be animated,
easy to follow with focus on details; grid, iconography, typography and
colour.
It works well for multiple theme interfaces, especially the dark ones and
because of its simplicity can easily fall to the sustainable category, like
Medium.
Here’s a few examples …
Medium: https://medium.com/
Miro: https://miro.com/ways-we-work/
Cocoon Experience: https://cocoonexperience.com/
Unicef: https://sites.unicef.org/generation-covid/
Pradapt: https://prod.icdlabs.in/
Buttons: https://buttons.evrone.com/
Simplification
Neo-Minimalism
Medium web - Light | Medium Mobile - Dark

16. cocoonexperience.com
16
Words via text are one of the most efective ways of communicating. The
typography is the tone and the way we use that typography is the personality of
that communication. Elegant or brutal, timid or arrogant, all of it is set mainly by
the typography you use on your UI !
It feels like we going through some sort of Type deconstruction; mixed styles,
oversized, cut, unreadable, 3d, unusual alignments, 3d… you name it. I am glad to
see that a lot is being experimented with typography on UI, it opens a chance to
re-think the layout as the piece of communication as a whole.
I the other hand we have the amount of offer of libraries such as Google Fonts,
that gives us (designers) the luxury of choice and the power to enrich the screens
with the most beautiful glyphs!
Think Dance: https://thinkdance.ca/
Awwwrds: https://conference.awwwards.com/?
utm_source=banner_lists&utm_medium=awwwards&utm_campaign=Conference+
Internal&utm_id=Super_early_bird
KHtype: https://khtype.com/
Ink and Kraft: https://inkandcraft.com/
Flying Papers: https://www.flyingpapers.com/
Flash Form: https://www.flshfrm.com/
Vionaro V8: https://www.vionaro-v8.com/en/home
Personality
Distinctive typography
Think Dance

17. cocoonexperience.com
17
I am always amused when I look to a 2 dimensions screen and the content
presents it self in 3 dimension manner. My brain stops for a second and then
sparks.
That’s what happens it grabs your attention because it shouldn’t be happening,
however it’s a natural sight, we do live in a 3+1 dimension world you know?
These advanced form of graphics are common in industrial, engineering,
architecture and more recently in the medical sectors, and now expanded to
broader audiences through AR and VR., but also to the screen so any user can
access it.
The need to see products closer and in detail are on of factors of this
expansion. The largely used on animation for story telling, but there is also an
increasing use of these graphics to simply ornament or illustrate in a more
abstract form of way.
Neyroo: https://www.neyroo.de/en/
The silly Bunny: https://thesillybunny.co/
Office Studio: https://offficestud.io/
PornWeek: https://www.pornweek.nz/
Deduxer: https://www.deduxer.studio/
Dimension
3D Illustration
Neyroo - Virtual Transformation

18. 18
Slowly but not surely. Not entirely sure on were this
matter is going but there is an indication that some has
and can be done.

19. This crack on the communication is making people less
confident on the results, therefore less active. Sure they
will tell you they care about the environment, but no
relevant action will follow.
Awareness, and growth of mindset should
be the solid steps to follow.
GWI. https://www.gwi.com/
What is the importance of helping the environment?
Average sentiment score representing importance of helping the environment
All markets average
1 = Important ● 0 = Neutral
Source: GWI Core Q2 2020-Q2 2022 • Base: 1,825,429 internet users aged 16-64 • Question: Which of these things are
important to you? (Helping the environment)
https://www.gwi.com/connecting-the-dots/sustainable-priorities

20. cocoonexperience.com
20
“Generation Z shows the most concern for the planet’s well-being and
influences others to make sustainability-first buying decisions,
according to new research.” - Johnny Wood (World Economic Forum)*
Raise awareness. These new generations will more likely to follow a
cause if they feel it communicates to them the consequences of the
what(s) and why(s)…
Apart from the obvious; social discussions and events. Design for a
sustainable solutions, label the actions of an interface with a clear
message of the sustainable objectives. And reward the user with
feedback of the action! Constantly.
Transparency is key, don’t use manipulative communication, ethical
values and clear messages are the foundations for a successful long
term customer - brand relationship.
*World Economic Forum : https://www.weforum.org/agenda/2022/03/
generation-z-sustainability-lifestyle-buying-decisions/
Concerned and informed
Shaping the Future

21. cocoonexperience.com
21
This is about re-thinking the stakeholders map, the personas and the
journeys , they no longer can be just about the ones directly involved. Think
also about who else is going to be affected by it, think about the social and
ecological impact.
Apart from the stakeholders that the project will address, think about the
animals and environment. These could be the Tagus River Azores or the
migratory birds of Ria Formosa.
Get to know better the non-personas, their needs, look at the positive and
negative impacts. This will help build empathy on outer ecosystems.
User journeys should include social and ecological needs and opportunities.
This will give us a deeper systemic view, cover other angles and re-shape the
project.
Mother Nature as a Persona: https://greentheweb.com/mother-nature-as-a-
persona-for-more-sustainability-in-user-research-incl-template/
Environment centred Design discussion: https://www.instagram.com/p/
CRjVVCCsVrW/
The social and Ecological Impact
Stakeholder Map, Personas and Journeys
Environment centred Design - Green The Web

22. cocoonexperience.com
22
Diversity.
Show a diverse spectrum of people in your UI Design. Integrate people
of various skin tones, heritages, genders (also non-binary), cultural
backgrounds, age groups, religion, body shapes, educational
backgrounds and with impairments. All humans matter.
Accessibility.
Ensure great readability, visual ease and distinction. Especially for
people with dyslexia, color blindness or visual impairments, just to name
a few. It comes with color and typo selection, text structures, options for
a dark mode, icons for error and info messages, and much more.
Means it’s for Everyone
Inclusive design
Inclusive Design - Unknown artist

23. cocoonexperience.com
Thank you.
23
Ricardo Rodrigues
Lead Designer
Cocoon Experience
ricardo.rodrigues@cocoonexperience.com
www.cocoonexperience.com