Bazaarvoice Product Catalog

As the UX designer, I led discovery research, designed workflows, utilized analytics and direct customer feedback, and delivered a solution our company had lacked for roughly 15 years.

The problem

Bazaarvoice handles collection, display, and syndication of consumer-generated content (CGC) — ratings, reviews, questions and answers, photos, videos, and social media posts — for many of the biggest and most respected and well-known brands and retailers across the globe. Short of it being on Amazon, the review you read on a product likely was gathered, delivered, or somehow otherwise passed through the Bazaarvoice network. Maintaining a complete and accurate product catalog is critical to the success of a client’s user-generated content program.

For such a complex system, the only way clients had to define the details of products for which they wanted CGC was uploading an XML file (known as a product feed) periodically. For nearly 15 years, there was no other way to manage a product catalog. Need to change a Product name? Update that XML file and have it uploaded via SFTP. This became extremely complex when a client might have their Bazaarvoice account managed by a marketing or product development team, but the technical aspects were managed by a different part of the company, or even a contracted agency. One client informed us that updating a UPC number on a product involved getting on the website development roadmap, numerous JIRA tickets, and over a month's time.

We wanted to change months into minutes.

Involved people

• User Experience Designer
• Product Manager
• Technical Writer
  
• Engineering team
• UX Research team
• Design Systems team

Discovery

Bazaarvoice had recently introduced an upgrade to the automation of keeping product catalogs up-to-date. Called Dynamic Catalog Collection (DCC), it allowed clients to add a code snippet to each product page that would pass the details for said product to their Bazaarvoice product catalog. It was much easier to build and update, but many legacy clients would only make such a change during some future redesign of their respective e-commerce sites, if at all. The new system had limitations, including defining aspects such as product category structure, GTIN identifiers, and other custom aspects usually defined in the product feed. Over the years, we had heard the pleas for an easier way to edit a product catalog. For reasons beyond my pay-grade, projects to create a catalog management tool had come up and been shelved.

We were given the green light to create a tool to report on a client's product catalog "health" — that is, surface any issues, errors, or bad practices in their product feeds or DCC implementations — so we did discovery research with Bazaarvoice clients and internal customers from our technical client services team. During journey mapping sessions and client outreach calls, participants shrugged at the health tool concept, but when we mentioned a full catalog management app as another path, their cheers and pleas to prioritize it first were clear. The support from the executive in charge of Bazaarvoice's client services organization was so strong we proposed swapping the priority and tackling catalog management first. This took changing our product group's entire roadmap for the year, but our leaders recognized the need when presented the findings from our discussions.

An example product feed clients needed to edit to update their catalog before Product Catalog Management.

User researcher starting off a client discovery call during our initial discovery sessions.

Design and User Testing

With official backing, and the specific needs and painpoints raised from our sessions with clients and internal customers, we laid out a roadmap to tackle the basic CRUD (create, read, update, delete… a shorthand for data management) in first read-only, then fully editable versions, with pilot programs to gather client feedback when using real data they had never been able to access before. A few additional tools for importing data via a spreadsheet file, and surfacing additional metadata were slated for next steps.

We started with innumerable white-boarding sessions and hand sketches, uncovering technical aspects of the underlying product catalog platform that would add complexities and unexpected design constraints. I built out user flows to account for intended interaction and decision points, working with our PM and engineering leads to ensure we didn't miss potential issues. Our early wireframes and concepts were frequently vetted with our engineering partners, who proposed technical changes that could help us, or places of compromise that might ensure a more robust option.

When our UI became more fully formed, we worked with our Design Systems team to ensure we were using correct patterns and components, and the project led to the creation and codification of several new components, for the benefit of all product development teams across the company.

Our wonderfully responsive engineering partners helped us with a functional prototype, using real data. We used this prototype to run small usability tests internally, with our partners in client services returning to provide insights on potential points of confusion or complexity.

With an updated design implemented and our first (read-only) pilot ready, we unleashed more internal users and our first set of external clients. Extremely positive feedback flowed back, and the desire from clients for the full editable version was strong. Leadership encouraged us to push forward quickly.

Whiteboarding sessions allowed the product manager and me to express ideas visually and collaboratively design aspects of the product.

Early sketches helped me organize my thoughts and share ideas without commiting to visuals that might cause others to assume design concepts were fully baked.

Hiccups and analytics

We rolled out a version of the app with create and edit functionality for pilot testing with a small set of clients. This version had been rushed to production before the new Design System components for forms were ready, instead utilizing older patterns and components already available. Small pilots are immensely useful, as in this case, clients reported many interaction issues. We collected this feedback from internal customers and external pilot clients and examined sample sessions from an analytics tool, SessionStack. On further study, most were tied to the older patterns, but others exposed unexpected use cases.

Examples included:

• All users had issues with adding/editing catalog attributes that were made up of multiple values, like UPCs and model numbers. Most of the confusion was caused by the older design pattern that was implemented.
• Many users felt the tool looked incomplete or somewhat broken, due to bugs in the older components that were used, as the new ones were not yet available.

We worked closely with the Design System team to select the correct new design patterns and components to use to bring Catalog Management into alignment with newer design standards that were now available. We used a simpler Add/Remove input pattern from the design system to solve the issues with adding and editing attributes with multiple values (GTIN and other identifiers, Product Families, Custom Attributes).

With these updates and an overall styling refresh brought with the new design system additions, we made the Product Catalog available to our core set of internal users and pilot clients. The response was immediate and enthusiastic.

A user performs a usability test of the live pilot via Lookback.

A two-up of the early coded pilot version with old components vs the improved version using new components and user insights.

Delivery

The Product Catalog app was rolled out to general availability after a go-to-market process to help our marketing and client services partners a head-start on the release.

“In my often not-so-humble opinion, this is one of the biggest innovations we have released in recent years and further strengthens our position as market leader.”
– Lucas Tieleman, VP of Product

“I’ve said before that business moves at the speed of trust, and the Product Catalog Application gives customers the power to control their catalogs without relying on [Bazaarvoice client services employees]. This gives them a sense of control and ownership of what is rightfully theirs. A perfect example of increase trust with our customers.” 
– Keith Nealon, Bazaarvoice CEO

“I expect incredible improvement to [network promoter score,] decreased support escalations, and so many other tangible benefits. I know the same sentiment is held by all of Client Success, but I’ve already received several very excited [messages from the] team around this.”
– A leader the client services organization

The entire company was excited, but more importantly, our clients finally had an easy to use tool to manage their catalog.

“We love being able to quickly troubleshoot issues with the tool. [The product catalog app] has decreased the number of issues escalated to Bazaarvoice’s technical support and decreased time to resolution for many issues.”
– A member of Walmart's Labs team

After launch, we had over 1,000 regular client users in a matter of a week or two, the fastest uptake of a new feature at Bazaarvoice.

Examples