Trends in User Experience and User Interface for 2017. Brought to you by CNJ digital agency. http://www.cnj.si

1. Digital UX trends
Mak Kordić, Head of business @ CNJ
www.cnj.si

2. About CNJ and me

3. Participate and win prizes!
Spoiler alert - For coffee lovers only

4. UX vs UI
User Experience - User Interface

5. PEOPLE
PRODUCT /
SERVICE
UI
point of
interaction
UX
overall user
experience

6. thumbnail
image
Action buttons
Tab bar
Clickable text
UI
=
WHAT

7. Why are we displaying user faces?
Why is this picture this big?
Why are we allowing likes?
Why 5 tabs? Why a house for home view?
Why is this text clickable?
UX
=
WHY

8. UI
=
WHAT
UX
=
WHY
A/B
testing
+
Analytics

9. OK, where does
Customer Experience
fit in?

10. CX UX
Customer experience
Customer service
Advertising
Brand reputation
Sales process
Pricing fairness
Product delivery
User experience
Usability
Interaction Design
Visual Design
Information Architecture
Content Strategy
User Research
By 2019 customer experience will precede price as
deciding factor in buying decisions

12. Let’s explore some trends

13. UX trends
- Micro animations
- Flat 2.0 design
- Optimized interstitial anxiety
- Card and Grid UI’s
- Innovative scrolling and parallax
- Personalization
- Self Service
- Focus on originality
- Omnichannel experience
- 360 Video, Livestreaming
- Mobile

14. Micro animations
• Better hardware and software
• UX becomes clearer
Micro-animations are small, preferably functional
animations that support the user by giving visual
feedback and displaying changes more clearly.
With micro-animations it’s possible to explain a
lot without using a word.
No animation With animation

15. Flat 2.0 design
• Evolution of Flat design
• Adding 3rd dimension
The problem of Flat design was:
• absence of all-important signifiers
(gradients, shadows, underlines, etc.);
• absence of familiar patterns
(blue, underlined text for links, etc.);
• absence of contextual indications
(CTA placement, actionable copy, etc.).
Flat Flat 2.0

16. Optimized Interstitial Anxiety
• Less stress for user
• Use to your advantage
Interstitial anxiety refers to the momentary state
of tension a user experiences between an action
(clicking a button) and a response (moving to
the next page)

17. Card and Grid UI’s
• Cross platform experience
• Intuitive usability
• Easy to browse
• Versatile — cards can be adapted
to almost any style, from minimalist
to elaborate

18. Innovative scrolling and parallax
• Great for storytelling
• Not great for cross platform

19. • 86% of customers say
personalization plays a role in their
purchasing decision
• Previous interactions, social media,
geolocation etc.
Personalization is simply creating a user experience
that is customized for each visitor's preferences and
past behaviors. For example, if you have previously
made purchases from an online store, you may be
presented with suggested items based on your
shopping history.
Personalization
http://tpone.danfoss.com

20. Self Service
• Empowering users, solving
problems on their own
• 70% of customers believe company
website should have a self service
option
• How to videos, FAQ, Knowledge
base

21. Focus on originality
• Production of unique content
• Using less Stock images, videos

22. Omnichannel experience
• Cross platform experience
• Content creation per channel
There’s the phone, email, instant chat,
social channels, smartphones and more.
Customers are connecting with
companies in more ways than ever.

23. 360 Video, Live streaming
• New technology for more
Immersive experience
• Youtube, Facebook live
Recording - streaming

24. Mobile is going to rule
The smartphone is getting smarter.
And for some, the least important part of the smartphone is the phone.
It is the device customers are using to look at websites, products, reviews and more.
This is an important step in their buying process.

25. 68% say they check their phone within 15
minutes of waking up in the morning.
30% are willing to admit that they actually
get “anxious” when they don’t have their
phone on them.
87% millennials always have their
smartphone at their side, day, and night.
We check our phones 150 times a day.
82% of smartphone users say they consult
their phones on purchases they’re about to
make in a store.
90% of smartphone users are not absolutely
certain of the specific brand they want to
buy when they begin looking for information
online.
Mobile facts
83% of B2B marketers said mobile apps
were important to content marketing. 83% of mobile users say that a seamless
experience across all devices is very
important.

26. What is important?

27. Mobile first approach

28. Bonus question - Adaptive vs Responsive design

29. Goat Story
Case study

30. Short story
• Story about coffee and goats - story easy to remember
• 25.000$ goal, the campaign brought in 458,071$ in 30 days
• 10.000+ Kickstarter backers
• Preorders in following months exceeded expectations
KICKSTARTER
CAMPAIGN
+
LANDING
PAGE
PRE ORDERS
ON LANDING
PAGE
FINAL
WEBSHOP
+
WEBSITE
Collecting data, taking users to
Kickstarter campaign page, A/B
testing.
Using collected data to prepare a
new landing page + boost pre
orders.
Developing a website with
integrated e-commerce and social.
Based on all data collected.

31. 2015 NETKO award of digital excellence
in category Products and brands
goat-story.com

32. How are they doing now?
• Great customer following (11k on Instagram, 17k on Facebook)
• Multiple retailers including Amazon, Firebox, ...
• 3 distribution centers (EU, USA, Asia)
• New Kickstarter product - Gina, just about to launch

33. Oh no, copies! :( No problem! 

34. UX
Storytelling
User experience
Social - website - ecommerce
Customer experience

35. Thank you!