Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5325

Implement design for Take Action Boxout A/B test

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Released
    • Icon: Should have Should have
    • 2.45.2
    • 3
    • Block: Take Action
    • Sprint #141, Sprint #142, Sprint #143, Sprint #148, Sprint #149, Sprint #150
    • pluto

      To implement the A/B test on the Take Action Cards in post pages (PLANET-5072) we should create the alternative design proposed by Magali (-----PLANET-4066-----) inside Google Optimize. 

      Alternative Design Specifications:

      There are two styles that need to be developed:

      1. Take Action Box Out Scroll

      For both Desktop and Mobile the box out should appear when the use has reached 50% of the main content block.

      For Desktop It should fade up and sit on the right hand side as the user scrolls (It does not move). It fades out just before the user reaches the end of the content block.

      For Mobile it slides up from the bottom of the page. It remains there (in a sticky state) until the end of the content block or if the user closes it using the 'Not Now' text button. On click it closes. It does not disappear on scroll up.

      2. Take Action Box Out at the bottom of the content area.

      This version sits at the end of the content piece. It acts as a block of content. It does not have any animation or 'Not Now' close buttons.

      There are no Tags.

      Will has included measurements, however, you can also get measurements from within Sketch.

      Related docs: recommended wireframes & animations

      Comments from Will:

      Animated version - tablet:

      • The image should have white margins around if we want to be consistent with the mobile version.
      • The text title can be slightly wider as we have more space.
      • Shouldn't the CTA button have the same right margin as per the rest of the blocks on the page?

      Static version - mobile:

      • The "want to do more" title should be above the block as per the
        desktop & tablet versions.

      Final mockups here

        1. mobile.gif
          mobile.gif
          8.84 MB
        2. scroll.gif
          scroll.gif
          18.97 MB

            mleray Maud Leray
            wmorrisj William Morris-Julien
            Julia Marubayashi Julia Marubayashi
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: