Talk presented by Seth Viebrock, CEO of Origin Eight. Topics: heat maps, user session replays, Drupal, analytics, SEO, SEM, conversion rate optimization (CRO), eCommerce. More info at https://www.origineight.net/dio

1. Optimizing Drupal for Digital Marketing
Seth Viebrock – CEO & Founder
Origin Eight
Optimize Your Digital Impact
@origineight | @sethviebrock
sethv@origineight.net
www.origineight.net

2. About Us
2
Our team is:
• Friendly
• Highly technical
• Responsive
• A sponsor of this
DrupalCamp
What we do:
• Support and redesign
elegant websites
• Optimize websites for growth
and high-impact digital
marketing

3. BRIAN MICHAELIS
Chief Technical Officer
SETH VIEBROCK
Founder & CEO
JUSTIN JOHNSON
Director of
Design & UX
LAURA PALMEN
Director of Operations
3
Leadership Team
PETER SOHAL
Director of Interactive &
Community Outreach

4. Some of Our Clients
4

5. This Presentation as an Exercise in Optimization
5
What are some valuable activities that I’m
trying to persuade you, the “users” viewing
this presentation, to do?
To care.
To learn & understand.
To think about Origin Eight when you think of digital
optimization & growth.

6. This Presentation as an Exercise in Optimization
6
When you as a “user” perform any of these valuable activities, in
Marketing and optimization terms, we call this a conversion.
Analogous concepts for the web:
Filling out a contact form.
Registering as a user.
Purchasing a product.
Donating.
Enrolling as a student.
Visiting the About page.
Opening an email.
Following on social media.
Clicking on any old CTA of value.

7. 7
How do I get you to care?
Make my value proposition clear, right away.
Establish a most-wanted action.
Get you off the homepage and down the sales funnel.
This Presentation as an Exercise in Optimization

8. 8
How do I get you to learn & understand?
Do my best to think about your user experience.
(Please pretend that my slides exhibit persuasive design)
Optimize!
It’s not just about you at this one conference (although you
are lovely), it’s also about future conferences.
This is my MVP. I didn’t wait to attain perfection before launch.
It’s not as pretty as it could be. I launched early, and I’m
learning and gathering data as a result.
Do this presentation multiple times at other conferences,
making it better each time with user feedback and any other
data I can gather.
This Presentation as an Exercise in Optimization

9. 9
How do I get you to think about Origin Eight when
you think of digital optimization and growth?
…
This Presentation as an Exercise in Optimization

10. 10
Whenever you see our blue O8 logo, do NOT think about that big blue rooster at the
Minneapolis Walker Sculpture Garden. And when you do see that big blue rooster,
DO NOT think about Origin Eight.
Photo credit: https://www.mprnews.org/story/2017/06/08/meet-the-artist-behind-the-big-blue-rooster-walker-sculpture-garden
The Walker’s Recent Artistic Landscape Optimization Project

11. 11
Optimization: The Big Picture

12. Big Picture
12
“Stop copying your competitors — they may not know what the f***
they are doing either.”- Peep Laja
Stop guessing. Start testing.
Experience does count.
It helps you do better research. It does NOT let you know which
solution will work.
i.e. replacing the battery may fix your car problem, and it’s a decent
hypothesis (based on previous experience) as to why your car died,
but a good mechanic has to test his hypothesis – it could be the
alternator instead.
We aren’t optimizing conversions – just decrease your prices and
conversions will go up. We are essentially optimizing profits and market
engagement.

13. Big Picture
13

14. 14
A good (bad) example.

15. Example: ProjectJuice.com
15
This website simply has to be losing tons of money.
There is clearly no testing going on.
D7 Drupal Commerce site.
A solo developer built and maintained it.
Someone on their marketing team came to us because they
thought the best solution was to move to WordPress because of
“the user experience”, “WordPress is easy to use” and
“WooCommerce seems nice.”
LSKDJFLSKDJG@#L@GLK@L#KHL@HLGKH!!!!!GLKL!
SLDKJGLKDSJG! <— (My feelings of frustration. I will show you
why.)

16. Example: ProjectJuice.com
16
Main CTA “SHOP JUICES” goes to the same place as “Juices” in main nav.
Next slide shows where it takes you.

17. 17

18. 18

19. Example: ProjectJuice.com
19
Too much text. Just let me buy yer damn juice!
Useless landing photo / hero image. They already had beautiful, functional pictures of
juices sitting below all that text. I didn’t know that, though, because of my browser size.
Strange “add to cart” UX. I was feeling thirsty and in a hurry, so I clicked on “ADD TO
CART.” It didn’t do anything. I get that it says “Custom” but I wanted juice and I wanted it
now, I didn’t read (like most users), and then my experienced turned into “this site is
broken; I don’t trust it.”
Then I had to read detailed instructions on How To Go About eCommerce On This
Particular Site.
Then I had to scroll down to see some red text explaining why I couldn’t click Add To Cart.
Of course “Please select at least 6 juices” in the add-to-cart form wasn’t red – it barely
stood out.
Am I crazy, or are other users experiencing this, too?
The best way is to test, but thankfully we have some AI tools to help us out in the
absence of user data.
feng-gui.com

20. 20

21. Example: ProjectJuice.com
21
Nobody focuses on that text in the critical first seconds of
landing on that page!
How to interpret:
- Red circles come first, yellow second, then green.
- Fixations are ordered numerically.
- Saccades (fast eye movements) are indicated by the lines
between circles.
Out of 30 visual fixations in the first 7.5 seconds, “WHAT
ARE WELLNESS SHOTS” is seen at 28th out of 30
saccades.
So much visual attention is spent on that big useless juice
hero image.

22. 22

23. Example: ProjectJuice.com
23
Next is an opacity map of the same page.
“The Opacity map report tones down information that is not
attractive and visually displays what your viewers may perceive
during the first few seconds of visual inspection.
The most transparent areas are those that attract more attention.
Use the Opacity report to identify which areas are being perceived
and which are being ignored.” — http://feng-gui.com/products

24. 24

25. Example: ProjectJuice.com
25
I finally figured out how to add some juices to my cart!

26. 26
But that’s not all…

27. Example: ProjectJuice.com
27
I am SO FREAKING thirsty at this point.
Then…
( Drumroll please )

28. 28

29. Example: ProjectJuice.com
29
AHHHHHHHHHHHHH!!!!!!

30. Example: ProjectJuice.com
30
1 in 4 abandon online purchases due to forced registration.
1
“Greedy marketer syndrome.” You’re not going to lock in the user and
create any kind of repeat business by doing this.
The $300 Million Button analogy:
Popular usability case study from a major e-commerce site. They had a
very simple form with two fields, two buttons, and one “forgot password”
link.
They optimized their website (by doing testing) and found out they were
losing about $300 M a year from this one form.
Their research stated:
We were wrong about the first-time shoppers. They did mind
registering. They resented having to register when they encountered
the page. As one shopper told us, “I’m not here to enter into a
relationship. I just want to buy something.”
1. https://econsultancy.com/blog/7730-why-do-consumers-abandon-online-purchases
2. https://articles.uie.com/three_hund_million_button/

31. Bad (Good) Example: ProjectJuice.com
31
Of course you can always reach local maxima in your
optimization work, at which point a redesign does make
sense.
But, don’t do a redesign without at least taking a good,
long, hard look at your data in all of its forms.
Don’t spend all your time, money and resources on a
redesign when there are huge fixes with a low level of
effort that can be done right now.
1. https://econsultancy.com/blog/7730-why-do-consumers-abandon-online-purchases
2. https://articles.uie.com/three_hund_million_button/

32. Bad (Good) Example: ProjectJuice.com
32
Telling the optimization story is
still quite difficult in this day & age.
Especially to people who don’t understand.
You can only do your best, after which you say….

33. Bad (Good) Example: ProjectJuice.com
33
Good luck on your WordPress redesign.

34. Example: ProjectJuice.com
34
In an ideal world…

35. 35
In an ideal world, they would allow us in to seek
additional data through:
Hotjar recordings – watching user session recordings of mouse
movements and journeys leading to this page, where I can confirm
usability issues, hesitation, and on-page interaction behaviors.
Crazy Egg heat maps – see how certain users are interacting
with the page, in term of scrolling and clicking.
I wouldn’t waste time on user testing, surveys, maybe even
analytics for this particular experience unless the previous steps
indicated it was warranted.
As it stands, I’m sufficiently confident that in one single test we
can get a significant lift in conversions.
Example: ProjectJuice.com

36. 36
Then, I would test my data by:
Creating a better UX for the landing page, based on my
research.
Create a better check-out flow, based on my research.
Run A/B tests on the landing page and check-out
variants using Google Optimize or a similar tool,
confirming my hypotheses with tests & data.
Example: ProjectJuice.com

37. 37
THEN we would talk about that WordPress
redesign after their bank account balance
started rising.

38. Bad (Good) Example: ProjectJuice.com
38
Some concepts from what we call “Digital Impact
Optimization” vs that WordPress Redesign:

39. Optimization Research
39
So, clearly research is an important part of the
optimization process, but how do we do it?
We have principles and learning that guide our research:
People
Psychology
Persuasion
Analytics
Tools for gathering data and testing
Conversion Design
Conversion Copywriting

40. 40
How do we do the research?
AKA how do we do the right amount of
research?

41. First, we figure out what kind of data we need
The sources of data can be overwhelming.
So, prioritize data gathering – so much data available:
Analytics
Easy to get lost in a sea of data. Requires training and experience.
User session replays / mouse tracking
With HotJar, Lucky Orange, etc.
You don’t need to follow every single user journey. Prioritize what you
observe.
Heat maps
Many different kinds
Click, scroll, motion-based, segmented
The PPC campaigns sending traffic to the site - is there a “scent” that is
maintained between ad and landing page?
41

42. 42
What does it look like?

43. What does DIO look like?
43
Watching videos of site visitor mouse movement & clicks with Hotjar
See https://www.youtube.com/watch?v=zKaxj-UOreI

44. What does DIO look like?
44

45. What does DIO look like?
45
Observing heat, click & scroll maps for different device types.

46. What does DIO look like?
46
Observing heat, click & scroll maps for different device types.

47. What does DIO look like?
47
Optimizing and testing individual page components or entire
page variants with Google Optimize 360 (or similar)

48. Digital Impact Optimization:
Website support on overdrive
www.origineight.net/DIO
48

49. Digital Impact Optimization
49
We work in tandem with your marketing team on six iterative & prioritized
activities that drive business growth:
1. Grow organic traffic
through SEO, content and keyword development
2. Optimize conversion rates
through incremental data/analytics-driven improvements in user experience and
design
3. Optimize paid traffic
from remarketing, retargeting and PPC that converts, both on the ad and the landing
page
4. Improve lead generation & marketing automation
5. Strengthen, maintain and future-proof website’s technical foundation
6. Implement wish lists and handle support requests

50. Digital Impact Optimization
50
If you are looking at a website redesign
• We will learn as much as we can from your current data and
analytics so that the new site is as optimized as possible.
• Sometimes it’s better to start fresh if you have not been continually
optimizing all along.
• We do encourage and build our sites for continuous Digital Impact
Optimization post-launch, otherwise assumptions go unchecked
and business growth can stall.
If you want to keep your existing site
• We will work with it to optimize it as much as we can to grow your
business.

51. 51
Continuous Optimization is Key to Growth, and Avoiding Another Redesign