In this presentation we'll discuss (sales)funnels. First off, what is a funnel, and how does the model work? Secondly, how can conversion (sales) be improved? By doing this we'll highlighting some of best practices from the user experience field (from covering visual design, interaction design to copywriting). We'll discuss the best practices and examples per 'step' within an archetypical funnel model, namely: 1) product and landing pages, 2) order and payment details, 3) summary and check, and 4) confirmation. In a more general sense, we'll discuss some interaction principles. Which patterns and conventions are appropriate in what scenario? We'll also touch upon some of the dark patterns (tricks to exploit the user) that can be found in funnels. The presentation will end with a check list for UX practitioners concerning copywriting that can be used to both improve the experience and increase sales. Read the full article on: http://www.sodastudio.nl/kennis-ideeen/copy-en-conversie-lunchpresentatie

1. Copy&conversion
Optimizing the customer experience
Or: putting the ‘fun’ in ‘funnel’

2. Inthispresentation
• The funnel model
• The funnel archetype
• Product and landing pages
• Order and payment details
• Summary and check
• Confirmation
• Applying the right interaction principles
• Dark patterns (don’t be evil)
• Check list

3. Whatfunnel?

4. Here’sone..

5. Here’sone..
Homepage /
landingpage
Product
page(s)
Product details
Buy
Generally. Each decision ‘mode’ is covered by
individual pages or information.
Tumbling down should be smooth and easy.

6. Whythismodel?

7. Visitors
Customers
The road to conversion..

8. People tend to drop out though. E.g if they walk
into technical problems, or can’t find information,
have any doubt … hence a funnel.
Can’t find right
product info
Unclear errors in
ordering form
Hidden costs at end of
ordering process

9. It’s up to UX teams (designers,
copywriters, developers) to broaden the
funnel and increase conversion.
Can’t find right
product info
Unclear errors in
ordering form
Hidden costs at end of
ordering process

10. Product&
landingpages
The funnel archetype

11. “Users don’t care about you, they care
about themselves and solutions to their
problems. Write copy accordingly.”
– Peep Laja
Proposition

12. Pinterest shows a series of
simple use cases which people
relate to.
It might also work for you!

13. Too bad though, this user
remains very vague. It doesn’t
feel that authentic..

14. Talking about vague: ‘Find
things that inspire you’? Like
what? What added value does
Pinterest have?

15. “Arrive in style”. Uber focusses
on how they complements
your lifestyle or you identity.

16. Skype lets you talk to the world.
It helps you connect to people
you care about, easily.

17. Dutch telecom company
Simyo clearly lists the most
important unique selling points
on the product selection page.

18. They also includes, amongst
others, a logo of their network
provider to boost trust.

19. They aren’t too humble about
accomplishments: won prizes
are showcased on a dedicated
page.

20. Also, Dutch insurance
company InShared presents
trust icons (like common
certificates and quality labels).

21. “One jar held ten cookies while the other
contained just two. Though the cookies and
jars were identical, participants valued the
ones in the near-empty jar more highly.
Scarcity had somehow affected their
perception of value.” – Nir Eyal
Scarcity

22. On Booking scarcity is all over
the place. There’s a sense of
urgency. (Up to the point that
it’s uncomfortable to look at.)

23. On eBay, the number of
viewers is shown, also driving
the sense of urgency.

24. On VakantieVeilingen,
winning an auction is key, the
actual product becomes
secondary. Winning at the last
second is the ‘rush’.

25. Pushing scarcity, and people’s “fear of missing
out” may seem nasty (especially when the
scarcity is artificially created by the site
owners)..
On the other hand, a case can be made for
showing availability, to give the customer a
fair chance to buy the product.
Ultimately, to manage a customer’s
expectations
Afterthoughts

26. But let’s move on..

27. When it’s actually sold out, give
the customer a chance to stay
up-to-date on new stock.
I.e CoolBlue offers the option to
be notified via SMS.
“Temporarily sold out”

28. Quantitative: How many customers have
bought your product?
Qualitative: What customers or businesses
use it? What’s their story?
Social proof

29. Apparently, large renowned
companies (with authority) are
already using Slack.
They can’t be wrong, right?

30. Additionally, Slack features the
love users have for the product..

31. .. Which links to this Twitter
page (‘wall of love’). The reviews
you see here are curated, but
they’re authentic!

32. Kickstarter is all about the
numbers.
You’d want to fund projects in
large amounts, jump the
bandwagon. And, in many
cases, support the ‘new player’
in the field to excel with their
product.

33. Making decision-making easier
Product options

34. Labels like “Most popular” make
choosing easy on Simyo.
Apparently, this option is
sufficient for most people.

35. In the funnel of health
insurance company Ziezo, the
price is updated according to
the user’s choices.
The total costs are always
shown, which makes it easier to
decide.

36. Thechoiceparadox
People want control. But in most cases
too much choice backfires; resulting in
people not choosing anything.

37. “Most people online are gorillas. When a
gorilla walks into an experiment, what they
say is ‘What do I do now? Where’s the
banana?’” – Seth Godin
Call-to-actions (CTA’s)

38. Differentiate
http://blog.codinghorror.com/the-god-login/
Be clear on labelling, provide sufficient
feedforward and differentiate multiple
CTA’s.

39. ‘Clickmagnets’
• Use words that trigger
• ‘Fast’, ‘easy’, ‘convenient’, ‘free’ et cetera
• (The offer has to be relevant in order to be effective
though.)

40. The3rdoption
Adding a trivial third option increases
conversion. (Supposedly, because user
feel in control.)
http://www.marketingfacts.nl/berichten/conversieknaller-de-extra-link-die-niemand-klikt-hobson1-effect

41. Order&
paymentdetails
The funnel archetype

42. The insurance company Zelf
gives feed-forward about what
information is needed to
complete an order.
This is recommended if certain
parts are uncommon or hard.
Also, when completing an order
takes longer than average, it
might also be useful to manage
the customer’s expectations. I.e
“This will take about 30
minutes”.

43. Booking uses this to their
advantage. It just takes 2
minutes.
.. Same trick here. You don’t
need to many details to
complete a booking.
Promotingconvenience

44. Stepindication
• Emphasize on ‘Where am I?’ and ‘What’s next?’
• Apply ‘just’ enough, clearly demarcated steps.
• Splitting input into steps (and making the user
submit more often) avoids errors
• Splitting up forms and information keeps your
pages more digestible
• Label the steps consistently

45. Threadless presents a small
and compact ordering form
with clear steps.

46. However, there’s no way to tell
what the payment options are.
The user might not be able to
pay, which is useful
information up front.

47. On the site of cable company
Tele2, labelling of steps is short
and sweet.
Stepindication

48. But what about
‘levering’ (delivery)? Are there
elaborate options? Might be
useful to communicate this
earlier in the process..
Stepindication

49. ‘Confirmation’? Do I need to
confirm my details here, or is
my order confirmed once I
enter this screen? (Ambiguous
labelling.)
Stepindication

50. Stepindication
On Booking, it’s clear what
expected of the user in each
step. (1 to 3 is all requires input.)

51. Stepindication
‘Geboekt’ (booked) is clearly
‘just’ a confirmation. Also fits
with the excitement after
having booked.

52. Minimize‘escapes’

53. Minimize‘escapes’
The Vodafone funnel uses
another header and footer
which contains a minimal
amount of outgoing links. The
focus is on making a purchase.

54. Minimize‘escapes’
They also have a nice heads-up
about what information is
needed to complete the order.

55. Defaults&shortcuts
To make going through forms lightning fast:
• Use smart defaults (i.e for a country dropdown), so
most users don’t have to fiddle with those inputs.
• Use shortcuts for entering information, i.e entering
postal code as a shortcut for city + street name. So
the number of input fields can be reduced.

56. Defaults&shortcuts
Vodafone offers the option to
re-use information which is
entered earlier. In this case for
delivery/billing address.

57. Sell!

58. Uporcross?
• Upselling:
“A sales technique whereby a seller induces the
customer to purchase more expensive items,
upgrades, or other add-ons [e.g] services or
products [or showing] other options.” – Wikipedia
• Cross-selling:
“[trying] to sell something else.” – Wikipedia

59. On Asos, the customer is
tempted to keep shopping so
that certain delivery options are
free (upsell).

60. On Coolblue, upsell/cross-sell is
done when adding a product to
your cart. Relevant upgrades
and extensions to that product
are shown.

61. In the KLM funnel, choosing
extras is a separate step in the
ordering process. The used
photography feels overly
‘stocky’ though..

62. Takingawaydoubt
• Answer questions that the customer might have on
relevant locations (FAQ’s are often clunky)
• Provide a telephone number, chats or other ways
for quick Q&A
• Make the user feel safe, highlight the SSL
certificate, possibly with the security provider
(Norton, MacAfee et cetera)

63. Coolblue always shows their
telephone number. (Moreover,
they are practically always
open.)

64. Accountmanagement
• Don’t force the user in creating an account, offer a
guest user option
• If an account needs to be created..
• Use e-mail als key identifier (not a username)
• Leave out password creation (i.e generate one
and send it via e-mail), otherwise, be clear about
your password criteria when choosing one

65. Passwordcreation
Dropbox shows when the password
you’ve entered is secure enough, which
avoids trial and error.

66. Summarizethe
order
The funnel archetype

67. Summarizetheorder
• Summarize clearly, make checking quick and easy
• Provide all possible information
• Summarize the terms & conditions so the user
knows what he agrees with
• Make the submit (order) button feel ‘definitive’

68. Health insurance company
Zilveren Kruis clearly lists all
entered information.

69. Confirmation
The funnel archetype

70. Confirmation
• Thank the customer
• If appropriate: celebrate
• Summarize the order once again
• Explain the after-payment process (what’s next?)
• Give solutions for all possible process errors (i.e
what if the confirmation e-mail was not received, or
when customer details are not okay)

71. Car rental service YellowBrick
tells what the next steps are.
What to expect.

72. However, the copywriting is
very formal.

73. Presents a link to ‘the site’. Is this
page not ‘the site’?

74. A link to the order summary is
hidden over here, and doesn’t
feel very clickable.

75. Interaction
principles

76. UIelements
Radio buttons
• Few options, mutually exclusive (i.e gender)
Check boxes
• Options that can be turned on/off independently
(i.e opt-in list for different types of newsletters)
Dropdowns
• 1 option, few options (up to about 15 options)
Toggles / Switches
• Either on or off
Option 1
Option 2
Option 3
Male
Female
Amsterdam

77. On Ziezo, the radio button
convention is used to further
communicate the component’s
affordance.

78. Tooltips
Guide the user with example input to prevent errors.
Even better: allow for multiple formats (i.e with and
without spaces)

79. Errormessages

80. “Error messages punish people for not
behaving like machines. […] It is time to design
and build machines that conform to our
requirements. Stop confronting us:
Collaborate with us.” – Don Norman
Error messages

81. Errormessages
• Explain what’s gone wrong
• Don’t ‘blame’ the user
• Provide solutions to the problem
• Avoid technical jargon
• Allow for different values: make the system more
forgiving if possible

82. Inlinevalidation
Inline validation means giving feedback
while the input field is active. This
makes your forms faster to go through,
and relieves some of the hassle.
On Bol suggestions are given
when common mistakes are
made when entering an e-mail
address.

83. Inlinevalidation
However, choose the moment for
feedback wisely. You don’t want to show
errors before the user has had the
chance to complete the input.
“This is no valid date of birth.”

84. Errormessages
Choose copy that’s human, and not too
harsh..

85. Sometimesclearand
shortcopyisbetter
prevue.it has tried a lighthearted (funny)
error. Which eventually didn’t fit the
context. (The user could be in a hurry
and stressed when using the product.)

86. Lightheartedly
In other cases, a lighthearted error is
appropriate. (Above: the error when
submitting a empty login form.)

87. In some cases, text can be left
out. In Wordpress the login box
shakes when submitting the
incorrect credentials.

88. DarkPatterns

89. A Dark Pattern is a type of user interface that
appears to have been carefully crafted to trick
users into doing things, such as buying
insurance with their purchase or signing up
for recurring bills.
Don’tbeevil
DarkPatterns.org

90. Don’tbeevil
• Provide sufficient information
• Avoid hidden costs, be transparent about price
• Don’t put something in the shopping cart without a
user’s consent, or check product options by default
• Avoid trick questions

91. On Hotels, the opt-in for
newsletter is phrased as a
double negative. “Check if you
do not want to receive..”.
Thus exploiting the user’s
mental model (the
convention).
Moreover, the text is pretty long
for something that’s fairly
simple.

92. On SeeTickets, the total price is
shown, but the check (by
default) makes it so that
additional costs can be added
further on in the funnel.

93. Inconclusion..

94. Checklist
• Use headings that are easily scannable
• Use bullet lists when appropriate. When using longer list, highlight the
important.
• Use one clear CTA on every page
• Label CTA’s with the right ‘weight’ (‘proceed’ or ‘buy’)
• Use natural language
• Use just enough copy, make it feel light
• Research the edge cases (i.e errors) and think about how to help the user in
those situations
• Don’t be evil

95. Let’smakeshopping
moreconvenient!
Photo: Hans Kemp Questions? E-mail me at sjoerd@sodastudio.nl
Good luck!