Case Study

Lithium

November 2016 - June 2018

Company & Brand Mission

Lithium Technologies helps top global brands connect with their customers through content & conversations. I worked on Lithium’s Online Community platform, trusted by hundreds of major brands to host their branded online communities. Originally developed in the 1990’s as the forum software driving major gaming communities, the Lithium Community platform had recently undergone a modernization effort to deliver a responsive front end.

My Role

As the lead designer for Lithium’s Community platform, I owned, designed and shipped features and experiences for branded communities designed to help community members engage with the brand and each other to get help and the information they need, focusing primarily on the support and commerce uses of branded communities.

Projects

Platform-level features for commerce

Problem

Customers

Lithium customers create vibrant communities around their products, but brands lacked the ability to create experiences that directly relate to their products.

Business

Community content excelled at drawing search traffic, but marketing budgets focused on sending traffic to the commerce site.

Technology

The Lithium Development API lacked the ability to query for community content related to specific products.

Approach

Enable community content and engagement to enrich product pages.

Enable brands to create seamless community experiences that directly relate to their products.

Enable community content to drive traffic to commerce pages and become attractive to marketing budgets.

Enable brands to retrieve and present product-related content on their commerce sites and product pages.

Product Q&A Widget

I joined the Commerce project team as they embarked on implementation of a Product Q&A Widget concept. I flushed out the details of the widget UI and interactions, adhering to the Lithium Community default skin’s visual design, added missing email notifications and worked with the engineering teams to oversee the final implementation.

Phase 1

For this initial phase of the Commerce project, the Product Q&A widget enabled customers to host Q&A-style discussions about products on the product pages of their commerce site. Questions about products could be delivered to specific appropriate locations in the brand’s existing community.

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.)

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.

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

So now Lithium customers could use a widget to create content and conversations about their products using the remote widget, but there were already many vibrant conversations happening in their existing communities. How could we enable brands and their community members to identify product related content in their communities?

While the initial Product Questions Widget was in beta, I began discovery work on features that would enable community members to identify specific products from the brand’s product catalog in their posts.

Phase 2

This feature set would complete the base set of features enabling brands to create seamless experiences around their products, both in their community as well as their product pages on their commerce site. I worked with a Product Manager and Product Marketing Manager using a customer Lighthouse program to understand customer needs and goals, producing and iterating on wireframes based on customer feedback.

Example Discovery Questions

  • What kinds of community experiences with their products did brands think most important?
  • What interaction models best supported the tradeoffs between flexibility, discoverability and usability?
  • How different were the needs of different types of 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?

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?

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?

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.

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.

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

Based on what we learned from customers, the Product Manager and I were able to agree on a minimal set of capabilities for the initial version of the feature. I designed an initial version of the Product Tagging experience and worked with 2 sprint teams to implement it. The visual design strictly followed the design of Lithium’s existing default skin to ease customer adoption into their branded communities.

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.

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.

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.

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.