Social-Feed-Overhaul-Specs

Social Feed Overhaul Specs

JIRA: https://powrtrak.atlassian.net/browse/PM-7359

Figma

Juwan Bepo last updated on September 19, 2019

alt_text

New “Hover” drilldown and display

Summary:

In this overhaul, we are introducing:

Feed Title (input)
Redesigned Social Sharing Buttons
Posts per Row (radio button)
Cleaned up Caption and Footer drilldowns
Account profile pictures
Hover drilldown with:
- Caption on hover
- Likes and comments on hover
- Customizable overlays

✅. Scenario: Previously created apps should have new overhaul settings

Given a user created a Social Feed before the overhaul,

When the user loads the Social Feed editor after the overhaul,

Then the user should have all of the new overhaul features in the editor

And the Social Sharing media buttons on existing Feeds should change to new design

And the rest of their Feed should not change in appearance unless they have edited their Feed

Content tab

✅. Scenario: New Feed Title input in the Content tab

https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A575

Given a user loads the Social Feed editor,

When the user opens the Content tab,

Then the first setting should be a new “Feed Title” input

And the placeholder text should be “Follow us at @gettyphotography”

And if no text is inserted in the Feed Title input, then a Feed Title should NOT appear above the gallery

✅. Scenario: Feed Title default font

Given a user opens the Content tab,

When the user adds text to the Feed Title input,

Then the text should appear above the gallery

And default font should be “Pathway Gothic One” at 32px

And the default font color should be #5C6166

✅. Scenario: Update description text for Social Sharing buttons toggle

Given a user opens the Content tab,

Then the description for the “Add Social Sharing Buttons” toggle should be, “Allow visitors to share your posts on social media”

Design tab

✅. Scenario: New drilldown in the Design tab

Given a user opens the Design tab,

Then the user should see a new “Feed Title” and “Hover” drilldown

And each new drilldown should have a “NEW!” tag on it

https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A613

Layout&Size drilldown

https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A752

✅. Scenario: New Post Size radio buttons

Given a user opens the Design tab

When the user clicks into the Layout & Size drilldown,

Then they should see new “Post Size” radio buttons below Image Cropping

And “Post Width” should be selected by default

✅. Scenario: Post Size > Post Width should retain current behavior

Given a user opens the Layout & Size drilldown,

When the default “Post Width” radio button is selected,

Then a Post Width slider should be visible directly below the Post Size radio buttons

And a user should be able to select the size, in pixels, of each of their posts (current behavior)

And the Posts per Row slider should not be visible

✅. Scenario: Post Size > Posts per Row (Desktop) e Given a user opens the Layout & Size drilldown,

When the Posts per Row radio button is selected,

Then a “Posts per Row (Desktop)” slider should appear directly below the Post Size radio buttons

And a user should be able to set the number of posts displayed per row on desktop (max # = 8)

And the Post Width slider should not be visible

✅. Scenario: MOBILE devices should ignore Posts per Row (Desktop) behavior

Given a user selects the Post Size > Posts per Row radio button,

When the user sets a number for “Post per Row (Desktop)”

Then mobile devices should ignore this setting and continue to fit to screen as usual

New Feed title drilldown

https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A744

✅. Scenario: New Feed Title drilldown in the Design tab

Given a user opens the Design tab,

Then a new “Feed Title” drilldown should appear directly below the Layout & Size drilldown

And when a user opens the “Feed Title” drilldown,

Then they should be able to change the “Feed Title” color, font, and size

New Caption drilldown

https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A621

✅. Scenario: Rename “Post Content” Design drilldown to “Caption”

Given a user opens the Design tab,

Then the “Post Content Design” drilldown should be renamed “Caption”

And when the user opens the Caption drilldown

Then the “Display Caption” toggle should be OFF by default

And all other settings in the drilldown should NOT be visible

✅. Scenario: Remove ~~Character Limit and ~~Special Effects features in the Caption drilldown

Given a user opens the Caption drilldown,

When the user turns ON the “Display Caption” drilldown,

Then the ~~“Character Limit” slider and ~~“Special Effects” radio buttons should no longer be available in the drilldown

✅. Scenario: The Date should appear below the Caption

Given the “Display Caption” toggle is turned ON,

Then the date a post was created should appear directly below the Caption

And the date should be the same font and color as the Caption

And the date should always be 10px

✅. Scenario: Date Format

Given the “Display Caption” toggle is turned ON,

When the “Date Format” radio button is the default, “American”

Then the date should appear as “Month DD, YYYY” (i.e. September 19, 2019)

And when the Date Format is “European”

Then the date should appear as “DD Month, YYYY” (i.e. 19 September, 2019)

✅. Scenario: Alignment and Background Color settings should apply to both Caption and Date

Given the “Display Caption” toggle is turn ON,

Then the “Alignment” radio button should simultaneously align both the Caption and the Date

(e.g. Alignment > “Center” should center-align both the Caption and the Date)

And the Background Color should apply to both the Caption and the Date

Footer drilldown

https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A689

✅. Scenario: Rename Post Footer drilldown to Footer

Given a user opens the Design tab,

Then the “Post Footer” drilldown should be renamed “Footer”

And when the user opens the Footer drilldown

Then the “Display Footer” toggle should be OFF by default

And all other settings in the drilldown should NOT be visible

✅. Scenario: Rename Post Footer font style and remove the ability to change its size

Given a user opens the Footer drilldown,

When the user turns ON the “Display Footer” toggle,

Then the “Post Footer Font Style” should be renamed to “Account Name”

And the settings should be adjusted to allow the user to change the color and font ONLY

And the Account Name should always be 10px with a font-weight of Medium

✅. Scenario: Thumbnail should display profile picture

Given a user opens the Footer drilldown,

When Display Footer is ON

Then the thumbnail image in the footer should display the profile picture associated with the account

And that profile pic should be round https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A712

✅. Scenario: When “Add Social Sharing Buttons” is enabled, then icons should slide in to the left

Given a user enabled “Add Social Sharing Buttons” in the Content tab,

Then the social sharing icon should appear on the bottom right of the post

And all social media icons should slide in to the left (from the right) when the social sharing icon is hovered on desktop \ And all icons should continue to be displayed as long as the user hovers over the container containing the social sharing icon and all social media icons

And when the user hovers outside of the container of icons, then the social media icons should slide back to the right and no longer be visible

✅. Scenario: Social Sharing buttons enabled when Display Footer is OFF

Given a user enables “Add Social Sharing Buttons” in the Content tab,

When Display Footer is OFF

Then the social sharing icon should appear on the bottom right of the post

And padding of $space-xs on the top and right of the icon

And the social media icons should have a fill color of #59616b

✅. Scenario: Social Sharing buttons when Display Footer is ON

Given a user enables “Add Social Sharing Buttons” in the Content tab,

When Display Footer is ON

Then the social sharing icon should appear on the right of the Footer

And padding of $space-xs on the top and right of the icon

And the social media icons should have a fill color identical to the “Account Name” font color

Hover drilldown

https://www.figma.com/file/jQw0Ypc75gcNOGb6CdvmaL/Social-Feed-Overhaul?node-id=168%3A501

✅. Scenario: Both toggles disabled in the Hover drilldown