Skip to main content

Slider Overhaul Specs

JIRA

Figma

Juwan Bepo last updated on November 19, 2019

alt_text

Introducing a Multiple Slides layout to Slider plugins

Summary:​

In this overhaul, we will be introducing a new Template tab with 7 new templates in Slider plugins and a Layout drilldown with a new option that displays multiple slides at once. We will improve the Banner element and make the Caption font settings in the Design tab apply to all elements, including Banner. Finally, we will tweak the thumbnail display, overlay, and Caption placement options.

[Implement in the end] Template tab:

**Create new template tab AFTER Multiple Slides layout is created by engineers

✅Scenario: New Template tab

Given a user creates a new Slider plugin

When the settings panel loads for the first time

Then it should display a new Template tab

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=16%3A14​

✅Scenario: .svg files used for Slider, Carousel, and Hero templates

Given a user creates a new Slider plugin

When the user opens the Template tab

Then the icons for the Slider, Carousel, and Hero templates should be .svg files from Font Awesome 5

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=16%3A14​

Content tab

[

] Scenario: Rearrange icons in the Add Element modal

Given a user opens the Content tab

When the user clicks the Add Element modal

Then the icons should be ordered from the top left to the bottom right:

  1. Image
  2. Video
  3. Testimonial
  4. Banner
  5. Document
  6. Event

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=185%3A0​

[ ] Scenario: New Testimonial icon in the Add Element modal

https://powr.s3-us-west-1.amazonaws.com/radioImages/testimonialRadio.png

Given a user opens the Add Element modal

When the user selects the new Testimonial icon

Then the modal should close automatically and open the drilldown for a new Testimonial element

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=185%3A0​

Options tab

✅Scenario: Move Show Thumbnails to the Design tab

Given a user opens the “Slideshow Options” drilldown

When the user scrolls to the bottom of the drilldown

Then they should no longer see the “Show Thumbnails” toggle and “Thumbnail Size” slider

And these settings should now be in the Layout drilldown in the Design tab

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=30%3A2​

Testimonial element (look at Banner element)

[ ] Scenario: New Testimonial Element

Given a user opens the Add Element modal

When the user selects the new Testimonial element

Then the Testimonial element drilldown should load in the editor with the following settings:

  1. Image Upload
  2. “Caption” input
  3. “Reviewer Details” in Slate
  4. “Background Color” color selector
  5. “Star Rating” toggle
  6. “Number of Stars” slider (display only when “Star Rating” toggle is enabled)

[ ] Scenario: Image in the Testimonial element

Given a user opens the new Testimonial drilldown

When the user selects the Add Image button and successfully uploads an image

Then the user should be able to crop the image in view

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=142%3A80​

[ ] Scenario: New Thumbnail display option for Testimonial element

Given a user opens the new Testimonial drilldown

When the user selects “Thumbnail”

Then the uploaded image should appear as a thumbnail above all content in the Testimonial

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=142%3A204​

[ ] Scenario: New Left Image and Right Image display option

Given a user opens the new Testimonial drilldown

When the user selects “Left Image”

Then the uploaded image should appear on the left-hand side of the testimonial

And the width of the image should be 30% of the entire slide

And this features should be Free for all users

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=142%3A80​

[ ] Scenario: New Caption input

Given a user opens the Testimonial drilldown

When the user adds text to the “Caption” input

Then the text should appear at the top of the Testimonial’s content

And users should control the Caption color, font, and size in the Text drilldown in the Design tab

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=142%3A80​

[ ] Scenario: New Details input with Slate

Given a user opens the Testimonial drilldown

When the user adds text to the “Details” input

Then the text should appear below the Caption

And the user should be able to format the text in Slate

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=142%3A80​

[ ] Scenario: New Star Ratings toggle - Starter feature

Given a user opens the Testimonial drilldown

When the user enables the “Star Ratings” toggle

Then a “Number of Stars” slider should appear directly below the toggle with a default of 5 stars

And the minimum should be 1 and the maximum should be 10

And the slider should increase incrementally by 0.5 up to the maximum (e.g. 3.5, 9.5)

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=142%3A80​

[ ] Scenario: Star Ratings with half numbers

Given a user enables the “Star Ratings” toggle

When the user adds a number and a half (e.g. 3.5)

Then the last star should display the left half of the star

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=211%3A0​

Design tab

✅Scenario: New Layout drilldown

Given a user opens the the Design tab

Then a new “Layout” drilldown should appear above the “Caption” drilldown

And the user should be able to select between two Slider layouts

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=21%3A8​

✅Scenario: Single Slide selected in the Layout drilldown

Given a user opens the Layout drilldown

When the user selects “Single Slide” as their Slider Layout

Then the “Show Thumbnails” toggle should appear

And the “Thumbnail Width” slider should appear if the toggle is enabled

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=30%3A14​

✅Scenario: Multiple Slides selected in the Layout drilldown

Given a user opens the Layout drilldown

When the user selects “Multiple Slides” as their Slider Layout

Then the “Images on Display (Desktop)” slider should appear

And 3 images should be displayed on the slider by default

And the images should all be the same size

And the user should not be able to show thumbnails

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=22%3A74​

✅Scenario: Images on Display (Desktop) slider minimum and maximum

Given the “Images on Display (Desktop)” slider is visible

When the user increases the number of the slider

Then the number of images displayed in the appView should increase to that number

And the minimum number on the slider should be 2 (images)

And the maximum number on the slider should be 8 (images)

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=22%3A74​

✅Scenario: Remove Slideshow Button drilldown from Design tab

Given a user opens the Design tab

Then the user should no longer see the “Slideshow Button” drilldown

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=21%3A8​

✅Scenario: Move settings from Slideshow Button drilldown to Layout drilldown

Given a user opens the Layout drilldown

Then the settings from the Slideshow Button drilldown should now be at the bottom of the “Layout” drilldown

And “Color” should be renamed to “Arrow Color”

And “Size” should be renamed to “Arrow Size”

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=30%3A14​

✅Scenario: Rename Caption drilldown

Given a user opens the Design tab

Then the “Caption” drilldown should be renamed to “Text”

And the settings should be reordered:

  1. Caption
  2. Text Align
  3. Caption Positioning
  4. Show Text on Mouse Hover
  5. Hover Color

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=22%3A190​

❌Scenario: Caption selector should apply to Image, Video, and Testimonial Caption inputs

Given a user opens the Text drilldown in the Design tab

When the user updates the Caption font selector

Then the Caption text in Testimonial, Image, and Video elements should all update

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=22%3A190​

❌Scenario: Update Caption Positioning radio button

Given a user opens the Text drilldown in the Design tab

Then the Caption Positioning radio buttons should be updated to: Top, Middle, and Bottom

And when “Middle” is selected

Then the text should appear in the middle of all Image and Video elements

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=28%3A2​

✅Scenario: New Show Text on Mouse Hover toggle

Given a user opens the Text drilldown

When “Show Text on Mouse Hover” is enabled

Then Captions should only appear on images and videos when the user hovers over the image or video

And the “Hover Color” selector should appear below the toggle

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=28%3A2​

And when the toggle is disabled

Then Captions should appear at all times

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=127%3A68​

❌Scenario: Default Caption Font Color and Background Color in the Text drilldown

Given a user creates a new Slider

When the user navigates to the Text drilldown

Then the default Caption Font Color should be #000000

And the default Background Color should be #FFFFFF

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=219%3A0​

Scenario: Background Color selector should appear when Text on Mouse Hover toggle is off

Given a user opens the Text drilldown

When the user turns the “Show Text on Mouse Hover” toggle OFF

Then the “Background Color” selector should appear below the toggle

And when Caption Positioning is “Top” or “Bottom”

Then the designated Background Color should appear behind the Caption

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=219%3A0​

✅Scenario: New Testimonial drilldown in the Design tab

Given a user adds a Testimonial element to their Slider

When the user opens the Design tab

Then the “Testimonial” drilldown should be visible directly below the “Text” drilldown

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=21%3A8​

✅Scenario: Features in the Testimonial drilldown in Design tab

Given a user opens the Testimonial drilldown

Then the following features should be available:

  1. “Reviewer Details” color/font/size selector
  2. “Star Rating Color” selector
  3. “Display Quotes” toggle

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=148%3A12​

✅Scenario: Reviewer Details color/font/size selector behavior in Design > Testimonial drilldown

Given a user opens the Testimonial drilldown in the Design tab

When the user changes the “Reviewer Details” color, font, and size

Then the text in the “Reviewer Details” Slate input in any Testimonial elements should adjust to the user’s designated color, font, and size

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=148%3A12​

❌Scenario: Star Rating Color selector behavior in Design > Testimonial drilldown

Given a user has “Star Ratings” enabled in a Testimonial element

When the user changes the “Star Rating Color” selector in the Testimonial drilldown

Then the color of the stars should change to the user’s designated color

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=148%3A12​

❓Scenario: Display Quotes toggle behavior in Design > Testimonial drilldown

Given a user has a Testimonial element in their Slider

When the user enables the “Display Quotes” toggle in the Testimonial drilldown

Then a “Quotes Color” selector should appear below the toggle with a default color of #FFFFFF

And two pairs of quotes should be visible in the Testimonial element

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=148%3A12​

appView

❌Scenario: Overlay should appear on the entire image

Given a user has an Image element in their Slider

And “Caption Positioning” is set to “Middle”

When the user enables the “Show Text on Mouse Hover” toggle

Then the overlay should appear over the entire image

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=28%3A2​

❌Scenario: Thumbnails should all be the same size

Given a user enables the “Show Thumbnails” toggle in the Layout drilldown

When the user adjusts the “Thumbnail Size” slider

Then the thumbnails in the appView should all be adjusted to the same identical size

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=30%3A14​

❌Scenario: Middle-align all content in the Testimonial slide

Given a user adds a Testimonial element to their Slider

When the user adds any content (i.e. Caption, Reviewer Details, Stars, Thumbnail Images)

Then the content should all be middle-aligned vertically

https://www.figma.com/file/0fDZzPhYElOL5GVobT9L57/Slider-Overhaul?node-id=142%3A204​

Existing Users

❌✅Scenario: Existing users should be able to use the new Testimonial element

Given an existing user loads their Slider app

When the user selects the Add Element modal

Then the new Testimonial element should appear in the modal

And existing users should be able to create Testimonial elements

Mobile

Scenario: Multiple Slides layout appears as single slide on mobile

Given a user selects Multiple Slides in the Layout drilldown

When a user views the Slider on a mobile device

Then each slide should appear one at a time (i.e. Single Slide layout)

Don’t forget about

  1. Signed in/out users
  2. Existing/new apps
  3. Mobile version - how will it look>

Main scenarios:

  1. Template tab new - list all new templates
  2. Template tab - build each new template -> default one
  3. Content tab - adding new elements - new testimonial element
  4. Content tab - testimonial element drilldown - list all available controls
  5. Content tab - testimonial element drilldown - defaults
  6. ✓ Content tab - testimonial element drilldown - list all available controls
  7. Content tab - testimonial element drilldown - layouts behavior+thumbnail
  8. Content tab - testimonial element drilldown - image cropping
  9. Content tab - testimonial element drilldown - caption and reviewer details
  10. Content tab - testimonial element drilldown - star ratings& number of stars control
  11. Options tab - transitions drilldown - kill transitions
  12. Options tab - slideshow options drilldown - no show thumbnails
  13. Design tab - new drilldowns (Layout and Testimonial) + renamed ones (Caption -> text) + removed one (Slideshow button)
  14. Design tab - layout drilldown - new controls (arrows)
  15. Design tab - layout drilldown - describe “Multiple Slides” slider layout
  16. Design tab - layout drilldown - “Multiple Slides” slider layout - images on Display slider & its behaviour
  17. Design tab - text drilldown - new order + new controls ( caption display -> on hover + hover color)
  18. Design tab - text drilldown - hover behaviour
  19. Design tab - text drilldown - caption positioning change (Overlay -> Middle) - how it looks
  20. Design tab - testimonial drilldown - controls list
  21. Text limits or fit text?
  22. ✓ Design tab - testimonial drilldown - reviewer details
  23. ✓ Design tab - testimonial drilldown - star rating color
  24. ✓ Design tab - testimonial drilldown - display quotes behaviour

Additional specs after the review:

Scenario: Testimonial element and all elements on it (star rating, quotes) should scale for thumbnails and multiple images layout

Scenario: Maximum number of slides in Multiple Slides Layout is 3 when there is at least one testimonial element

Scenario: Testimonial element disappears from elements list if user has more than 3 slides chosen in Multiple Slides Layout mode

Scenario: Testimonial element in multislider ignores aspect ratio settings in order to fit content

Jan 24, ‘20

PM approval notes:

  1. ✅Let’s change the default template (users see it when open the standalone for the first time) to Hero template.
  2. Image cropper for testimonial thumbnail (only this layout) is not working https://www.loom.com/share/77218806acd8487ca938a5ce782b07b8
  3. Can we make “reviewer details box” smaller in height? Like the line to the right of the box. Almost twice

alt_text

  1. Shouldn't all testimonial images in multiple slide layout be the same size?

alt_text

  1. If I select multiple image layout with more than 3 images, testimonial element disappears from elements list. But when i go back and change images on display number to 2 or 3, i still can’t see testimonial element. https://www.loom.com/share/1269773435954ca584ed627e783230f4

    We can push it with this bug.It is some edge case, so it’s up to you if you want to fix it now or later (create a ticket for next sprint).

27 Jan review notes:

  1. Stars are too close to reviewers info

alt_text

  1. Attach stars to the bottom edge of the slider in multiple image layout mode

alt_text

  1. Arrows positioning in multi slide mode is not in the center of the slide