Skip to main content

Popup Overhaul III Specs

Popup Overhaul III Specs

JIRA:

Figma

Juwan Bepo last updated on December 27, 2019

alt_text

New Header position in Popup

Summary:​

Popup Overhaul III will introduce the following new features: 1) a Header position, 2) primary and secondary inline buttons, 3) displaying Popup after a certain percentage of the page has been scrolled, and 4) start and end date scheduling

Scenario: Users with old Popup apps should also see all of the new Popup features

Given a user has an existing Popup

When the user loads the editor for that Popup

Then the user should be able to use all of the new Popup features

Scenario: Popup editor appView should change immediately to Header Positioning selection

Given a user clicks the Layout drilldown,

When the user clicks “Header”,

Then the appView in /standalone should change to a header popup immediately

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=1%3A5​

Scenario: Email inputs should appear on the right of text in the Background image layout

Given a user has a Background Image Layout

When the user clicks “Header” positioning,

Then the email input should appear to the right of Header and Description text

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=1%3A21​

Scenario: Header positioning with Left Image layout at 25%

Given a user selects the “Header” position

When the user also selects the Left Image layout and sets the image width to 25%

Then the email input should be half of its default width

And the email input should appear to the right of the Headline and Paragraph text

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=64%3A0​

Scenario: Header positioning with Left Image layout at 50%

Given a user selects the “Header” position

When the user selects the Left Image layout and sets the image width to 50%

Then the email input should be half of its default width

And the email input should appear below the headline and description text

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=64%3A113​

Scenario: Text in Header position should work with alignment options in Text drilldown

Given a user selects the “Header” position

When the user selects a text alignment option in Design > Text

Then the Headline and Paragraph text should reflect the new alignment option

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=4%3A110​

Scenario: Lengthy captions should increase the height of the Header position

Given a user selects the “Header” position

When the user adds a lot of text to their Popup

Then the height of the Header should increase to accommodate all of the text

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=4%3A93​

Inline Buttons​

Scenario: New Inline Button element

Given a user opens the Content tab

When the user clicks the Add Element Button

Then they should see a new “Inline Buttons” element directly to the right of the Button element

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=24%3A3​

Scenario: Inline Button settings

Given a user selects “Inline Buttons” in the Add Element modal

When the Inline Buttons drilldown opens in the settings panel

Then there should be new primary and secondary button settings in the drilldown

And the primary button settings should apply to the left button

And the secondary button settings should apply to the right button

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=25%3A7​

Scenario: New primary and secondary button design settings in Design > Button drilldown

Given a user adds “Inline Buttons” to their popup

When the user goes to the Design tab > Button drilldown

Then there should be new design settings for the primary and secondary button

And if a user does not have Inline Buttons in their popup

Then the Button drilldown should revert to the existing Button settings, without secondary button settings

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=83%3A1​

Scenario: Inline Buttons should appear below text in the Header position

Given a user adds “Inline Buttons” to their popup

When the user selects the “Header” positioning

Then the Inline Buttons should appear below the Header and Description text

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=165%3A0​

Scrolling Trigger​

Scenario: New “After Scrolling” (we have it in sctrigger

Given a user opens the Popup Display Options drilldown

When the user selects After Scrolling

Then a slider should appear below the options

And allow the user to display the Popup after the page has been scrolled: 25%, 50%, 75% or 100% of the page

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=10%3A3​

Scheduling​

✅Scenario: New Scheduling settings in the Controls tab

Given a user opens the Controls tab

When the user selects the Popup Display Options drilldown

Then the user should see the new “Schedule Display” settings

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=9%3A1​

✅Scenario: Display date range when Schedule Display is ON

Given a user opens the Popup Display Options drilldown

When the user turns the “Schedule Display” toggle ON

Then the user should see the start and end date inputs

And the Popup should only display on a live website during this date range,in user’s timezone

✅Scenario: Clicks on start and end date inputs should display calendar with the current date highlighted and time inputs set to 00:00 of that day

Given a user turns the “Schedule Display” toggle ON

When the user clicks on the start date input

Then a calendar should appear with the current date preselected and 00:00 of that day chosen

And when the user selects the end date input

Then a calendar should appear with the current month, current date and 23:59 of that day

And the user should only be able to select the time only after the start time

And to select the same day/day after the start day.

✅Scenario: Schedule Display should work with other display options

Given a user turns “Schedule Display” > ON

When the user selects a trigger option for “When should the popup appears on your website”

Then the Popup should appear on a website by that trigger ONLY if it falls within the date range

(i.e. if a user creates a trigger with a 10 second delay, the Popup should appear after 10 seconds on a website if it falls within the “Schedule Display” start and end dates)​

✅Scenario: Hide date ranges when Schedule Display is OFF

Given a user opens the Popup Display Options drilldown

When the user turns “Schedule Display” settings OFF

Then the start and end date inputs should be hidden in the settings panel

https://www.figma.com/file/b4I2w8eNbzfzHf8MoCq3k5/Popup-New-Features?node-id=167%3A0​

Review note:

  • Right side of the calendar is white
  • Can we place the time picker to the right from the calendar? Or somewhere else. It looks not nice now

alt_text

Main scenarios:

  1. ✓ New apps vs old apps
  2. Mobile views of new features
  3. Layout drilldown: new positioning option - header bar - default layout
  4. Header bar+background
  5. Header bar+left image
  6. Header bar+right image
  7. ✓ Header bar+adding elements (like email input)
  8. ✓ Popup display options drilldown: new control - scheduling (defaults?)
  9. ✓ Scheduling - dates click
  10. ✓ Scheduling - behavior
  11. Triggers: new control - after scrolling - slider
  12. After scrolling trigger behavior
  13. Add element modal: new element - inline buttons
  14. Inline buttons and popup size change interaction
  15. ✓ Inline buttons in header bar
  16. Inline button design settings