Tips & Tricks: Swipe Right on New Recommendation Templates

Date Sent: July 14th, 2021

Hi there,

Displaying optimal product recommendations to site visitors can significantly boost revenue, CTR, conversions, and more, but exposing users to items in a widget is just one part of the equation. User engagement with site Recommendations provides a complete picture of the impact your widgets are having on users. Further enable user engagement with your widgets by leveraging our new interactive out-of-the-box (OOTB) Recommendation templates. Inspired by popular UX designs used by social media apps, the two newest templates will help you provide a more immersive product discovery experience for site visitors. Our use case examples will give you ideas for serving these interactive widgets to mobile users on your site (note: the examples are specific to Mobile web experiences, however both templates may be used for Desktop and/or Tablet experiences, too).

#1: Recommendations as Stories Template

Inspired by the well-known "Stories" UX used by several popular social media platforms like Instagram and Snapchat, the new Recommendations as Stories OOTB template recommends products in an animated, Stories-style pattern when users click or tap on a widget. The template consists of multiple widgets that are served as individual Story "highlights," with variables that enable you to specify a different title, Strategy, and number of item results for each.

Campaign Setup Overview

Create a new Recommendation campaign or add an Experience to an existing campaign. Target the Experience to users on mobile devices. Then, create a new Variation and select the Recommendations as Stories template.

• Define the color theme of the Story template using the first four variables. Apply colors that align with the theme of your site and/or your brand's logo.
• Use theAnimation Durationvariable to set the number of seconds that an item result will be shown in the Story when a user views it. You can also specify the Product Name and Price Font Size variable to adjust the font size of those details for the item results:

Pro Tip: Use the same hex color code for the Circle Color and Progress Bar Background Color variables for design consistency.

• For the variables groups Widget 1-7, specify the details of each widget for the Story using the Title, Strategy, and Number of Items variables. Use a different Strategy for each Widget and define a title that indicates the kinds of item results that the Strategy will show to users.
• Define the variables for Button Text, Button Background Color, and the text for the Instructions to View a PDP of a recommended product:

Once you're finished designing the Variation, the end-user experience will look similar to this:

#2: Tinder for Product Recommendations

Similar to the swipe right-or-left UX of the popular dating app, Tinder, our new Tinder for Products OOTB template prompts users to choose from a set of widgets and then swipe to either be recommended a different item result or to view the details of an item that catches their eye.

Campaign Setup Overview

Create a new Recommendation campaign or add an Experience to an existing one and target the Experience to users on mobile devices. Then, create a new Variation and select the Tinder for Products template.

• Use the Teaser variables group to specify the Button Title and Subtitle text, as well as the text and background colors, of the message bar that users will be prompted with at the top of the screen. Users that tap, or click, this message will be served with a widget selection screen and may engage with recommended products from there:

• Provide the message that users will be shown on the widget selection screen by defining the Choose Strategy Screen Title variable.
• Similar to the Stories template, use the Strategy 1-4variables groups to specify the Title, Strategy, and the Number of Itemsthat users will be served with when engaging with a given widget.
• In the Swiping Screen variables group, specify the colors and text for the Skip Button and View Product Button. Users will tap the View Product Button to match with an item and view its product page:

Mobile users that are exposed to the Variation will encounter an engaging, interactive UX for product discovery that will look similar to this:

Until next time,
Ashley

Ashley Berman
Sr. Customer Education Manager