Campaign teasers

General#

  • retail Teasers also have a small badge to communicate the campaign period
  • don't include dates in the onlineshop section (exception yellow teaser may have an expire date)
  • maximum amount of characters for the title: 22 (amount is based on the smallest viewport XS → this results in a two-line title)

Component preview#

preview-xs

1 Campaign Image#

2 Offer date#

3 Title#

Assets / Campaign Images#

  • image ratio: 4 to 3
  • Important part of image should be in the image center
  • Image 2 and 4 are slightly cropped on LG – make sure to consider safe zone. Find psd template attached.

default#

Campaign teasers (online shop)with two linesCampaign teasers (Retail)
preview-xspreview-xspreview-xs

highlight (long term campaigns)#

highlightwith two lineswith expire date (optional)
preview-xspreview-xspreview-xs

Yellow Teaser#

  • the yellow special teaser is used for longterm campaigns, such as "X-Mas", "Black Friday", etc… → it's not meant to highlight certain regular campaigns
  • the yellow teaser only exists in yellow

Recommendations of Use – Do's and Dont's#

Here you find the most important Do's and Dont's of how to use/create campaign teasers.

The majority of our Lidl customers (60% and growing) visits our websites with their mobile devices. So it is strongly recommended to edit and manage all content to fit best on mobile devices. Mobile first is the message!

Responsive behavior of images#

DosDon'ts
example_01-xsexample_01-xs
  • 1 If you want to display signets or brand logos you should take care that this elements are big enough to ensure that it is also visible on small devices
  • 2 Take it simple while creating campaign images and don't overwhelm your Customers with too many elements or text.
  • 1 don't place text or elements (labels, badges, signets, etc.) on the image. Mostly they won’t be readable and more importantly accessible.
  • 2 Be aware that using elements from the print campaigns can cause problems in terms of accessibility/readability legal requirements for websites. We recommend to adjust these elements for the web
  • 3 due to legal requirements priceboxes are not allowed to be integrated into a teaser image.

Clear image communications#

DosDon'ts
example_01-xsexample_01-xs
  • 1 If your campaign teaser will link to a category/subcategory or campaign page, it is recommended that your teaser image is focusing on a generic group of products. The images should be kept more general in order to ensure the expectation of an promotion page. This can be achieved, for example, with more than one product shown or general topics.
  • 1 Avoid using zoomed-in or cropped images of products as they are often not properly recognized by users.
  • Campaign image & campaign title/descriptions#

    DosDon'ts
    example_01-xsexample_01-xs
    • 1 If your campaign teaser will link to a category/subcategory or campaign page, it is recommended that your teaser image is focusing on a generic group of products. The images should be kept more general in order to ensure the expectation of an promotion page. This can be achieved, for example, with more than one product shown or general topics.
    • 2 keep title short, clear and self-explanatory
    • make sure that title and image fit together. Example issue from user test: Users thought they could book a holiday in Greece. A better title would have been: Specialities from Greece
    • Onlineshop Tab: Don't use short keywords only (e.g. kitchen) – users will misinterpret these teasers as category
    • Store Tab: Compared to the onlineshop titles, in store context titles like Swimwear, Fruits & Vegetables are easier to understand
    • 1 When you want to promote a group of products such as "tools", it is confusing for many users when the campaign image only shows one single product
    • avoid missleading images (e.g. food on plate when plate is sold) to ensure that users won’t expect food offers.
    • 2 This misleading is mostly a combination of campaign image and campaign title/descriptions

    Accessability, WCAG#

    All elements of campaign teasers should fulfill the guidelines of the WCAG

    Source references#

    • baymard.com/blog/avoid-these-ecommerce-graphics
    • Evaluation of customer survey - Hero Teaser