Platform-level features for commerce

The initial concept vs the initial release of a remote Q&A widget hosted on product pages of the brand’s commerce site.

Community content on product pages increases SEO value of product page on commerce site.

Remote Q&A Widget

The initial concept vs the initial release of a remote Q&A widget hosted on product pages of the brand’s commerce site.

Community content on product pages increases SEO value of product page on commerce site.

Screenshot movie of initial implementation of the Q&A widget including truncation, pagination and loading states. (It still includes a few bugs, see if you can spot them.)

Commerce Widget Movie

Screenshot movie of initial implementation of the Q&A widget including truncation, pagination and loading states. (It still includes a few bugs, see if you can spot them.)

Customer questions feed directly into existing communities where product advocates answer questions quickly and in the environment they are familiar with. Utilize existing default theme elements to ease individual brand implementations.

Product Q&A in community

Customer questions feed directly into existing communities where product advocates answer questions quickly and in the environment they are familiar with. Utilize existing default theme elements to ease individual brand implementations.

The remote widget introduce the potential for community members to communicate with non-community members. A series of email notifications kept the two parties in sync and aware of each other’s context during their interaction.

2-person Interaction Flow

The remote widget introduce the potential for community members to communicate with non-community members. A series of email notifications kept the two parties in sync and aware of each other’s context during their interaction.

An example email template designed to make posters feel good about their contribution and interested in contributing further.

Engagement Email

An example email template designed to make posters feel good about their contribution and interested in contributing further.

What we learned

The Initial Release of the Product Q&A Widget was delivered to customers as part of a beta program and the initial beta customer saw a 900% increase in their community’s utilization rate. Lithium’s Services Team praised the UI interactions and implementation as some of the best that Lithium had ever delivered and the development team was proud of what they had built.

Think agnostically about elements of a discussion type. The Product Q&A widget narrowly targeted the experience of asking questions about products, but brands looked at the feature from a wide variety of perspectives and wanted to understand the structure of the discussion type to know how they could repurpose it for their own community. They interpreted the Product Q&A discussion type as one that has a single initial post associated with an object and followed by replies, and those replies have comments on them (rather than threaded replies). All discussion types were implemented using the same object models, and design awareness of that implementation could help yield more agnostic and flexible features for customers to build on as well as a more maintainable codebase.

Discovery: Identifying Products in Lithium Communities

Wireframe used to gather feedback from customers on the importance of having specific pieces of text associated with the conceptual link to a product in their catalog, illustrating how we could create associations without using an @mention interaction.

• What are the pros and cons of an @mention experience vs a linked association?
• Where should the link go?
• Do all brands need the same thing or does it depend on the purpose of the community?

Product tag separate

Wireframe used to gather feedback from customers on the importance of having specific pieces of text associated with the conceptual link to a product in their catalog, illustrating how we could create associations without using an @mention interaction.

• What are the pros and cons of an @mention experience vs a linked association?
• Where should the link go?
• Do all brands need the same thing or does it depend on the purpose of the community?

Wireframe of in-editor tagging experience returning results for multiple item types, Products and People, in the same result set. Used to gather customer input on the idea of using one character to mention multiple types of things.

Using a single mention character for many object types inflects the experience for discoverability, but having separate for each may inflect the experience for expert users that know what they want to mention.

• How important are the trade offs between discoverability and usability of the feature to brands?

Tag multiple object types

Wireframe of in-editor tagging experience returning results for multiple item types, Products and People, in the same result set. Used to gather customer input on the idea of using one character to mention multiple types of things.

Using a single mention character for many object types inflects the experience for discoverability, but having separate for each may inflect the experience for expert users that know what they want to mention.

• How important are the trade offs between discoverability and usability of the feature to brands?

Wireframe exposing the ability to hyperlink specific selections of text to products or other content.

• Do brands find this concept intrusive or useful?

Tag other people’s content

Wireframe exposing the ability to hyperlink specific selections of text to products or other content.

• Do brands find this concept intrusive or useful?

Gathering feedback on the concept of automatically recognizing products and allowing the user to edit the specific product information fields that appear in the tag to only show the color, if they desire.

Autodetect tagging

Gathering feedback on the concept of automatically recognizing products and allowing the user to edit the specific product information fields that appear in the tag to only show the color, if they desire.

A wireframe of an example community discussion with all of the products mentioned linked to their product page. Used to gather feedback from customers on the important features of displaying their products on community posts.

• How prominent should the link be? Does it need to stand out or blend in? How do you weigh the trade offs?
• Does it benefit from a mini product image? Product icon? Would that feature be important to you?

Example product community conversation

A wireframe of an example community discussion with all of the products mentioned linked to their product page. Used to gather feedback from customers on the important features of displaying their products on community posts.

• How prominent should the link be? Does it need to stand out or blend in? How do you weigh the trade offs?
• Does it benefit from a mini product image? Product icon? Would that feature be important to you?

Wireframe exploring the concept of asking authors to tag products in their post after they initially try to publish them.

Customer’s agreed it was more important to get the post than get the product mentioned in it properly connected with the product, so it wasn’t ideal to add an additional step to the post flow.

ask to tag after post

Wireframe exploring the concept of asking authors to tag products in their post after they initially try to publish them.

Customer’s agreed it was more important to get the post than get the product mentioned in it properly connected with the product, so it wasn’t ideal to add an additional step to the post flow.

Thinking about how product will be displayed on posts, I used these wireframes generate customer thinking and gather feedback on the concepts and elements that are important to them when integrating their products into community experiences.

Products on Forum Discussions

Thinking about how product will be displayed on posts, I used these wireframes generate customer thinking and gather feedback on the concepts and elements that are important to them when integrating their products into community experiences.

These wireframes illustrate initial concepts for splitting up the UI elements into components that we would provide to customers. Used to get feedback from internal Services team on how they might want to implement and customize the feature for individual brands.

Component Concept

These wireframes illustrate initial concepts for splitting up the UI elements into components that we would provide to customers. Used to get feedback from internal Services team on how they might want to implement and customize the feature for individual brands.

Where does the product link go? One option was a product page in community, so we wanted to create a simple page in community to aggregate community posts about a product. These wireframes explore different levels of implementation complexity for product pages in community and were used to gather internal engineering feedback on what would be feasible to include in our initial release given our timeframe.

Product Page Concepts

Where does the product link go? One option was a product page in community, so we wanted to create a simple page in community to aggregate community posts about a product. These wireframes explore different levels of implementation complexity for product pages in community and were used to gather internal engineering feedback on what would be feasible to include in our initial release given our timeframe.

What we learned

Customers need a configurable @mention trigger character. Different types of communities needed to optimize for different types of users, so Lithium benefited by providing brands with the flexibility to choose their own trigger character for each mention experience. The trigger character could be configured to be the same for multiple object types, or different depending on the needs of the brand and community. Because of the additional complexity this added, this requirement was postponed until after market validation of the initial feature’s viability.

A valid use case exists for adding product associations without changing the text content. Some brands intended to provide incentive for brand advocates to identify posts in the community that related to specific products and link them using this new functionality. However, they were not comfortable changing the original author’s content by introducing a link to their commerce site.

Product associations needed to be optionally associated or not associated with specific pieces of text. The feature needed to provide a default experience of creating product mentions and associations as one interaction, but allow brands to separate the conceptual product association from the actual product @mention linked text based on the existing permissions architecture.

Beta Design & Implementation: Product Tagging

End users could mention specific products directly in their post.

Mention text could, at the brand’s discretion, link to Product pages on their commerce site or aggregate pages of all community content related to the product. The aggregate community page could optionally include a link to the product’s store page.

The product association was decoupled from the product mention and controlled by permissions, allowing brands to how to decide who to expose this capability to depending on how they planned to utilize the feature.

Product Mention Field

End users could mention specific products directly in their post.

Mention text could, at the brand’s discretion, link to Product pages on their commerce site or aggregate pages of all community content related to the product. The aggregate community page could optionally include a link to the product’s store page.

The product association was decoupled from the product mention and controlled by permissions, allowing brands to how to decide who to expose this capability to depending on how they planned to utilize the feature.

I also produced a mobile version of the mention experience.

Mobile Mentions

I also produced a mobile version of the mention experience.

We created a customizable component that customers could use to show products on the posts that mention them. The component was designed to be flexible and allow for different orientations of product photos and combinations of product information.

Forum Topic Page

We created a customizable component that customers could use to show products on the posts that mention them. The component was designed to be flexible and allow for different orientations of product photos and combinations of product information.

We included a hover card in the initial set of components. The product information utilized the same layout and template as the product component for posts, simplifying implementation and easing customer adoption.

Product Hovercard

We included a hover card in the initial set of components. The product information utilized the same layout and template as the product component for posts, simplifying implementation and easing customer adoption.

We created a page aggregating all of the posts about a product that incorporated product information from the customer’s product catalog.

Product Posts Page

We created a page aggregating all of the posts about a product that incorporated product information from the customer’s product catalog.

To provide some product visibility on non-post pages in community, we also developed a component capable of displaying all products mentioned in a forum board, or any other collection of posts.

Category Page Component

To provide some product visibility on non-post pages in community, we also developed a component capable of displaying all products mentioned in a forum board, or any other collection of posts.

What we learned

Overlap with existing tags, labels, (custom tags, hi-labels, ?…) Lithium had a history of different navigation and information architecture options that all had different attributes; centrally managed vs user created, hierarchical vs flat, breadcrumbs enabled, permission-aware, etc. The Product Tagging feature was sometimes utilized as a new organization and navigation mechanism because of those attributes, it was centrally managed but the permissions architecture we implemented allowed finer control over who was allowed to add tags.

“Does it have to be products?” Be more agnostic. Of the initial brands that adopted the beta version of the feature, only a small portion of them used it as intended for “products”. The product-centric approach that we had taken developing what they interpreted as a new tagging mechanism sometimes hindered the flexibility of the feature in unanticipated, but avoidable, ways.

A more agnostic mention system. Brands said “We also want to @mention our Wordpress blog content and our FAQ pages hosted on other systems.” Could we easily support that? All we really needed in order to support an @mention was a few pieces of information; a link, a name, etc. Could we create an agnostic @mention anything feature allowing brands to provide an XML feed of anything they’d like to be mentionable in the community? Would that allow us to side-step the complexity of synchronizing with customer product catalogs?

In a support context, products may be required for new posts. When you have a problem with something you bought, knowing the specific product you’re having a problem with is essential to helping you. Some communities would want a post flow that focused on selecting a product as the first step.

Faceted search is needed to find products. Searching for products presented very different challenges that Lithium’s current text searching interface was not well adapted for.

Other Projects