Explore

PRD: Vendor Cards

Fringe Product Requirements Doc

Clark Melchert

**For the sake of completeness, I am inventing information I do not have.

Problem Alignment

The Problem

As our Vendor list grows, we’ll be presenting customers with an increasing number of benefit options. With an expansive catalog, one of the primary business interests is making benefit selection simple and functional. We want users to feel comfortable navigating the marketplace, and easily allow them to discover and allocate their credits to benefits.

High-level Approach

Card-on-Carousel presentation is a common user interface for wide-selection. The most recognizable visual relative would be the UI for finding a movie on Netflix.

⁠

On the top of the Fringe Marketplace, there is a featured benefit, a single card blown up in the hero section. This can cycle periodically through a small selection (14) of other featured benefits, and can also be navigated by forward/back arrows.

Beneath the featured hero card, there are Category Carousels, where themes like “Recommended,” “New to Fringe,” “Wellbeing,” and “For the Family” present rows of benefit cards. Each carousel is navigable via a ‘forward’ button overlaid on a half-shown, faded card on the right edge of the screen. Upon advancing to the next set of cards, a ‘backward’ button appears in the same style on the left.

The Vendor Card is a key building block in this architecture. Each card needs to uniformly meet the following requirements for readability and to encourage users to select benefits to redeem.

Goals & Success

**Adopting this stylistic presentation should result in users seeing 100% more vendor offerings in a single site visit. Product users should be more inclined to peruse various offerings in different themes due to the structural familiarity of Card-on-Carousel information organization.

**By increasing the vendor offering exposure, this change should result in a 50% increase in average credit spend on a users first or second visit, and a 25% increase in lifetime spend. The increased exposure to offerings in a friendly and low-friction way should encourage users to explore the marketplace for 15-25% longer than our current marketplace arrangement.

⁠

Solution Alignment

Key Features

The Vendor Card

The Vendor Card has 3 versions: in-carousel, hover-expanded, and half-page expanded. These 3 versions are for discovery, curiosity, and interest. The card is dynamic to reflect the intentions of the user, progressively showing more relevant information.

⁠

Screen Shot 2021-10-08 at 6.59.37 AM.png

⁠

The first, in-carousel, is a quick view of the benefit, showing the name, marketing image and some copy, starting price and star rating (if available), and tags. At this point in the interaction, the user is not hitting the card with their cursor, and is either scrolling the whole page or the Category Carousel. Copy is intentionally trimmed to three lines (~128 char. max), to maintain visual consistency and attract a cursor hover. Nothing is clickable in this position, as a cursor hover changes the form of the card to present new information.

⁠

Screen Shot 2021-10-08 at 6.59.48 AM.png

⁠

The second, hover-expanded, shows more information after a user shows interest. The card expands to cover the edges of the neighboring cards, and some of the margins above and below. The hover-expanded card becomes clickable, with forward/back arrows to move through marketing images. At the top, the card now shows an “Add to Cart” dropdown menu, which displays a scrollable sub-card that shows 4.5 product options at various price points (unlike most of the site, this doesn’t auto-rescale on changing window size). On that subcard, there is also a static “View Details” button at the bottom that opens the half-page expanded view, and a closing “X” at the top right. When hover-expanded, the card’s tags also become clickable, redirecting the user to a search of the tag term when clicked. The rest of the card expands the card to half-page when clicked.

⁠

Screen Shot 2021-10-08 at 7.00.07 AM.png

⁠

The half-page expanded view is the most robust. In addition to all the information from the smaller cards, it adds an outlink to the vendor site beside the starting price and star rating, in-card, expandable pricing/product options, and an ‘About’ section with more information about the vendor. Most significant on this view is the product options. The expandable list sorts product options from lowest to highest price, and can be expanded/collapsed by a central grey button beneath the last option that reads “Show More” or “Show Less.” With a click, an option can be added to the user’s cart, and is replaced with links to “View Cart” or “Remove from Cart.” This selected option is a darker purple and displays an add-to-cart animation that creates a shopping cart badge. The add-to-cart interaction is the same in the previous hover-expanded subcard. The closing “X” for this view is in the upper left, but scrolls with the page.

Note: Product options that have been added to cart remain the darkened purple with the cart badge until either removed from the cart or the cart is checked out. There is no quantity indicator shown on the in-card product option.

Key Flows

The flow of user interaction with a Vendor Card is recorded in a Miro board called

The PRD: Vendor Cards⁠

. The link to view that board is

HERE!⁠

⁠

Screen Shot 2021-10-08 at 9.45.23 AM.png

⁠

Data Syncing

The above Miro board references several values that will be referenced in the Vendor Cards. These values, mostly strings, will need to be synced to our backend databases to keep updates consistent across the platform. Notable values include:

Marketing images (indicating 1st, which will display on card during scroll)

Vendor Name

Vendor Copy

Vendor Tags

Starting Price (displayed on card)

Vendor Star Rating (**needs to be synced to review system)

Product Option Names

Product Option Prices

The other significant syncing reference for Vendor Cards is syncing Product Option selections with the Cart. When a Product Option is selected in the card, its status is constant until it’s removed from the Cart or purchased. The User’s Cart should be saved between sessions, and the product option should reference the Cart’s status when displaying either the product name and price or the “View Cart” button and cart emblem.

Open Issues & Key Decisions

Visual/UI issues to address:

Non-scaling of hover-expanded “Add to Cart” dropdown subcard

Scrolling closing “X” for half-page expanded view

Product Option order quantity not syncing between Cart and Vendor Cards

Key Decisions:

Are we going to stay with the finite Category Carousel, requiring users to back up to find cards they’ve seen? or will we move to looping Carousel?

Are we going to link out to reviews on Vender Card star ratings? or display how many reviews calculate a rating?

⁠

Launch Readiness

**Key Milestones

**Relevant dates for rolling out the features based on these requirements

Date

Milestone

Audience

Description

Mon, Nov 1

Pre-beta

Internal employees only

Testing internally

Mon, Nov 15

Beta 👥

Early cohort of 100 customers

Getting user feedback

Mon, Dec 13

Launch! 🚀

Gradual ramp over the day to 100% of all users

It's the big day!

There are no rows in this table

⁠

**Launch Checklist

**This would be customized to the working processes and teams at Fringe, but I don’t know them.

Area

Question

Answer

Instructions if "Yes” (or unsure)

Support

Will new learning material be needed (or updates to existing documentation)? Help Center articles? Images/GIFs? YouTube videos? Plugin documentation?

Talk to the Product Education team.

Will this feature require new support processes, like saved replies, new tags to track feature changes, or training the support team on new products/changes?

Talk to the Support team.

Growth & Data

Have you implemented sufficient tracking in order to measure success, risks and impact on user behavior for the new feature?

Involve your data counterpart to make sure feature is well instrumented.

Could this impact Growth numbers? (E.g., impact to NUX, UI changes to CTAs.)

Let the Growth team know. Consider running this as an A/B if you haven’t already.

Are we turning this feature on for everyone immediately (versus a gradual rollout)

Defend in this section why you’re opting for an instant ramp to 100%.

Marketing

Are we running a Beta for this?

Talk to the PMM team.

Do we need an onboarding experience?

Talk to the PMM team.

Enterprise

Will this be available only in certain tiers (Pro or Org)?

Make sure the Enterprise team is in the loop and have good reasoning for your packaging decisions. In addition, if this is to be included in sales enablement material, talk to your PMM.

Is this a new action that should be included in the Activity Logs?

Talk to the Enterprise team.

Platform

Are you introducing new functionality that we’d want to add to our Web or Plugin APIs?

The general expectation is that the feature team builds these capabilities into these APIs. Talk to the Platform team if you have questions.

Could this break any existing integrations (e.g., with Zeplin, JIRA)?

Talk to the Platform team.

Will this introduce new work on mobile or mobile web?

Talk to the Prototyping team.

Security & Privacy

Are you introducing new data models, or exposing new API end points? Or are you changing anything to do with Authentication, Sign in, or Sign up? Is data flowing to a new vendor or outside of Figma prod ?

Talk with the Security team.

Are we collecting any data that we did not already, or are we using any data in a manner that we did not already use it in?

Talk with the Legal team.

⁠