DIGITAL PRODUCT MARKETING

PRODUCT MARKETING CARDS

In collaboration with cross-discipline stakeholders and cross-functional teams, I oversaw the entire lifecycle of designing, developing, and implementing the UI/UX for the Digital Product Marketing Cards module, and actively participated in crafting the marketing card prototype.

OBJECTIVE

1. Create Marketing Cards that we can use to communicate the following but not limited to:

   • Highlight a specific product - best seller/new, etc. across You May Also Like (YMAL)

   • Bundles

   • Subscribe & Save (S+S)

   • Nurish products, promos, marketing, etc.

   • Collection Assortment lineup

2. Add to the following pages/sections:

   • Product collections

   • Product subcollections

   • Product categories

   • YMAL

   • Other People Are Buying

   • Shopping Cart Preview Callout

   • Search Results

3. It will be free form vs the standard product card, product title, price, etc. It should allow for CTA such as Learn More.

4. We would like the Marketing Cards to play video/gif (will be utilized sparingly with consideration to site speed impact).

5. We would need to tag this so we can see how many people interact with it.

6. The design elements should keep things clean on the cards.

REQUIREMENTS

1.     Essentially, the Marketing Cards are like an 'ad banner' with the same framework and basic functionality as the Product Card (e.g. card size, link to a PDP page) as well as similar placement capabilities throughout the site such as:

• Carousels: Best Sellers, New Products, YMAL/Other People Are Buying

• Category and Collection pages within product assortment module

• Search Results page

• Cart: Cart summary page, Cart Modals (Item Added and Your Cart)

2.     Not included in the Marketing Cards: product card flag, product image, product name, price, reviews, Buy Now CTA. Any incidental product information will be included in the text box or image.

3.     CMS capabilities for Marketing Cards to include:

• Upload and change out image

• Upload and change out copy in the text box

• Move and size the text box

• Edit the CTA or link copy

• Specify landing page

• Upload and change out video link (use same functionality as PDP thumbnail video, i.e. launches video player in a pop up modal, not within the Card)

TIMELINE

1. This may likely consume 3 Sprints from start to finish, especially since these cards touch nearly every page on our site, involves Algolia functionality and will require all-hands-on-deck testing (dev, QA team, UAT).

2. Time also needs to be factored in for the biz team to upload final images and text, and configure Algolia settings.

FUNCTIONAL REQUIREMENTS

1. Display Marketing Cards in selected pages 

2. Upload full bleed image

3. Understand required image specs

4. Enter an optional CTA

5. Toggle CTA type (Button/Text)

6. Enter optional text

7. Toggle semi-transparent text background

8. Toggle light/dark text color

9. Toggle card status (active/inactive)

10. Define hyperlink location

11. Displays well on both mobile, desktop, and tablet devices

NON-FUNCTIONAL REQUIREMENTS:

Utilize existing site styles for links and buttons

ASSUMPTIONS

1. All text other than the optional CTA and optional text is part of the image

§  Note that embedding text in images is not best practice for SEO or accessibility.

§  To mitigate the SEO and accessibility effects of embedding text in the image, the card should include alt text on the image. The business will provide the alt text when authoring the card.

2. No text styling (e.g. font size, font weight) beyond the color (for text links) and existing link/button styles are required for the CTA

3. No text styling (e.g. font size, font weight, alignment, etc) beyond the font color toggle (light/dark) are required for card text

4. Given a card with a CTA, hyperlink text, neither, or both, the entire card shall link to one URL (i.e. one card = one link, no one card will have different links for the CTA and hyperlink text)

USER STORIES

Business User

1. 1. 1. 1. 1. 1. As a business user, when I navigate to a collection's metafields values in Accentuate Custom Fields (ACF), then I am able to create a marketing card with the following attributes:

• Status Toggle

• Creative Image

• Card Background Color

• Card CTA Label

• Card URL

1. 1. 1. 1. 1. 2. The card URL may be 2 fields: External URL and "Internal" URL where the external URL references a page outside of the Shopify store and the "Internal" URL (or just link) references a page/product within the Shopify store.

§   When both values are present, the "Internal" URL shall take precedence

1. 1. 1. 1. 1. 3. Card CTA Style Toggle (Button/Text)

               4. Card Text

               5. Card Text Color Toggle (Dark/Light)

               6. Card Text Background Toggle

               7. GTM ID

§  This will be the same as the Card Title

1. 1. 1. 1. 1. 8. Alt text

§  This will be the same as the Card Title

Creative

As a content creator, when I create a new marketing card image, I understand the required image specs to ensure that the card displays properly on both mobile and desktop screens including:

• Min height

• Min width

• Required bleed (i.e. area around the image edges that may get cut off as the image resizes) 

Shopper

As a shopper, when I click a marketing card, my browser shall navigate to the URL defined by the business user 

Developer

As a developer, I shall be able to use an html attribute on the anchor tag to uniquely identify the Marketing Cards.

REQUIRED CHANGES:

Define the following information

Provide the following specs such that the creative images can display well as full bleed images on both mobile and desktop devices:

• Minimum Height

• Minimum Width

• Minimum Bleed Top

• Minimum Bleed Left/Right

• Minimum Bleed Bottom

In the field definition in Accentuate Custom Fields (ACF)

• Add instructions to the Creative Image with required dimensions and padding

§  Example: "Minimum Height: Xpx, Minimum Width: Xpx, Minimum Bleed Top: Xpx, Minimum Bleed Left/Right: Xpx, Minimum Bleed Bottom: Xpx"

§  X should be the values identified under "Define the following information" above.

• Relabel "Card Title" as "Card Title/Alt Text (100 character limit) - not visible"

• Relabel "Card Subtitle" as "Card Text"

• Add a boolean/checkbox "Card Hyperlink Text Background"

• Add a dropdown/radio "Card CTA Style" where the available values are "Button" or "Text"

In the marketing card template

• Make the image a full bleed image (i.e. no padding between the image and the card border)

• Wrap the entire marketing card content (image and text) in an <a> tag that points to the URL

§  Use either the external URL or "internal" URL

§  If both values are present, use the "internal" URL as the href attribute

§  If neither value is present, use "#" as the href attribute, or do not use an <a> tag (i.e. if no URL is present, there should be no navigation when the shopper clicks the card)

• Add the Card Title as alt text on the image

• Add the Card Title as a data-gtm-marketing-card-id attribute on the <a> tag

• Add a semi-transparent background to the card text

§  The background should be conditionally rendered based on the Card Hyperlink Text Background value configured in ACF

§  The background should match the styling of text background on spotlight cards in the header of pages like the home page

• Style card text

§  Apply light or dark color (#343438 or #FFFFFF) depending on the Card Text Color Toggle (Dark/Light) value from ACF

§  Apply light color if the card text background is enabled (overrides Card Text Color (Dark/Light) value

• Add conditional CTA styles

§  When the Card CTA Style Toggle (Button/Text) is set to "Button", display the CTA as a button

§  When the Card CTA Style Toggle (Button/Text) is set to "Text", display the CTA as a text link with animated mouseover background (i.e. the same styles used in the spotlights)

• Place card text and CTA within the same element such that the optional semi-transparent background applies to both of them

ACCEPTANCE CRITERIA

1. Dev is able to supply creative and the business with the following image specs such that creative images display well on both mobile and desktop screens:

•  Minimum Height

•  Minimum Width

• Minimum Bleed Top

• Minimum Bleed Left/Right

• Minimum Bleed Bottom

• Minimum Content Display Height = Minimum Height - (Minimum Bleed Top + Minimum Bleed Bottom)

• Minimum Content Display Width = Minimum Width - (Minimum Bleed Left + Minimum Bleed Right)

9.  Creative images that meet the minimum height/width specs display as full bleed images (i.e. no padding between the image and the card border) on both mobile and desktop screens

10.  Business users are able to define optional card text

11.  Card text that exceeds 2 lines must be truncated and followed by an ellipsis

12.  The truncation must not rely on JS (i.e. implement the "Standard" approach or the "Pure CSS Overflow" approach)

13.  Business users are able to define optional CTA text

14.  Business users are able to configure the CTA display type by choosing between Button or Text

15.  CTA styles match the button/text styles in the spotlight/hero tiles in the homepage header 

16.  Business users are able to toggle a semitransparent background for the text/CTA

§  When the background is disabled, the text elements must have no background, i.e. the background color or full bleed image will display (depending on the provided image size)

17.  Business users are able to supply a link either by providing the full URL for an external page or by selecting a value that represents a page in Shopify from a dropdown

18.  The entire card is a hyperlink

19.  The hyperlink <a> tag includes a data-gtm-marketing-card-id attribute that is populated by the card title

20.  The image includes an alt attribute that is populated by the card title

21.  When the text background is enabled, the text and CTA both have the background

22.  The marketing card height/width matches the standard product card height/width

Full Bleed Image (Graphic Sample) Test