Building a Data-Driven Product Catalogue

Structuring and Summarizing Dense Information

Beauty enthusiasts do a lot of research online for specific products. This process can be riddled with pain points as they research across multiple websites, check videos, lookup images, read reviews and follow questions on blogs. Mira’s product page (and catalogue) strives to help people simplify the research process by compiling all the information scattered across the web into one accessible place. The goal of Mira's product pages and catalogue was to help a beauty user understand if a given product is good for them by providing a comprehensive overview of any given makeup or skincare product.

Mira’s product pages are just one destination within a larger and more complex user journey. This brief covers:

ROLE

UI/UX co-designer

DURATION

September 2017 - May 2020

Team

2 designers
1 product manager

Responsibilities

Design Research
User Interviewing
UI/UX Design
Information Architecture
Datavis design
Prototyping & Testing

Context

Mira is a centralized, democratic beauty platform and product catalogue that helps people find the right products for them. Through AI and ML, Mira structures fragmented information online and translates it into a common language that people can easily understand. Read more about Mira here.

The Problem

There are so many variables to consider during the product evaluation process. Not only does the research process vary from person to person, the different aspects of a product to consider can vary from product to product. Additionally, there are a multitude of journeys to consider depending on the intent and need. Coming to a decision on a product(s) can look different for each person and our challenge was to accommodate most, if not all of the different ways that people prefer to research for all types of intents and needs whether through blogs, videos, online stores, publications and so on.

One example that illustrates the nature of this painpoint is something we call "attack of the tabs" where a single product search can start with a blog post that links to a slew of tabs being opened for ingredient fact checking, review validating, in-action video browsing. By the end of the whole process, you may or may not have formed an opinion about which products to purchase.

Exploration: How we tested the very first version of our product catalogue webapp with a group of 20 Alpha users using Facebook groups and Fullstory.

Our research first started out with dozens of generative user interviews asking people about their product exploration and research patterns. We found that there are primarily four different content types that people prefer to access when evaluating a product-- images, videos, reviews and ingredients. Every person's method of evaluation and preferred content type can vary greatly and be wildly complex depending on who/what they trust and how they build a case for or against a product. One of the more interesting permutations of this process is represented in our Youtube video skin type and skin tone filters. Evaluating how a product performs virtually can be tough so people turn to the next best thing-- which is watching someone else who shares their skin type and skin tone apply or review the product on Youtube. So, we built a skin tone and skin type features into the videos tab (see image below). It's worthwhile to note that beauty users will often rely on multiple content types and sources so it's important to cover the entire landscape of information available online.

With our testing platform running and ready to go, we started to research with a group of 20 Alpha users that would use Mira consistently over the course of 2 weeks. The group was hosted on Facebook and there were or “quests” set up every few days that would aim to test various aspects of the app such as recommendations, product pages, search. By the end of the two weeks, we invited a couple of the most active member within the group to our physical office to do a final, comprehensive 1v1 user interview to get feedback on the process as well as a more generative round of research that explored what future iterations. Through the last round of interviews, we concluded that while all forms of content that we provided were valuable, the form factor of the information was one of the key areas of improvement. While all forms of content that we provided were valuable, Mira’s value cannot truly be realized if people can’t effectively navigate through that information.

We coordinated all of our testing via a Facebook group
Very first Proof-of-Concept versions of Mira in its Alpha phase
An attribute tag search results page
A product page with our first version of a review overview
The video tab found videos online that mentioned the product. You could also search via skin tone as well!
We also listed products' ingredients, scraped from cosDNA
And images as well; found from blogs online (they were linked to the original creators as well)

Giulia + team moderating our alpha group via Facebook

Learnings: how we continued to improve our catalogue by improving our data form factor (or data visualizations) through our Beta iOS app.

Old title - Further Testing and Improving Data Form Factor with Beta
In this next round of iterations, our “All Reviews” section was one of the largest focal points for improving data form factor. This section of content easily recieved the most amount of attention (time spent) and scrutiny. It was important to people that “all reviews” was easily searchable via sentiment (positive and negative reviews) and facet (longlasting, matte, etc). By the time our Alpha research sessions concluded, we had a pretty complex system to evaluate and sift through reviews.

From the product page itself we organized review via “Top Reviews”, “Pros”, and “Cons”. Underneath was a system of tabs and cards that highlighted key excerpts of the reviews. Below that was a graph that sought to illustrate the “intensity” of that facet (i.e. smoothness) in comparison to all other similar products that also mentioned that facet. No wonder people were overwhelmed looking at our product page-- what was supposed to be a simplification of data became an over-complication because there were so many visualizations left for the viewer to process and digest.

Review cards at Beta launch

This was a classic case of less is more. After many more rounds of testing, we learned that if the reader can’t gain a sense of what the overview is saying in a matter of a few seconds, we’ve not really provided an overview. So, we went back to the drawing board and started to iterate upon the "review overview" concept. There were many layers of information to consider from the UI of the cards themselves, the data form factor, as well as the language. We found that

We tested UI form factor (the cards themselves), the data form factor (bar graphs, pictograms, percentiles, number of reviews, etc), as well as the language (facet vs concern).
Final iteration of the review overview card

Final version of Review Overview cards

Solutions: an overview of the “finalized” version of a product page & takeaways (although nothing is ever really final)

Our final iterations allowed people to get good sense of the pros and cons of any given product from a cursory view due to the color signals and the visually comparable bar graphs. It's interesting to note that the final versions of our data visualizations didn't actually communicate the power and complexity of Mira's utility. At first we thought that our more complex datasets (such as z scores) would be helpful for people to understand and while some power users really loved detailed stats, most people just wanted  a gut feeling. They wanted to know, quickly, if the product was "good" or "bad" and gain a sense for how good and how bad.

This module became a cornerstone feature of Mira’s product page and even made its way into our marketing material because it is the most concise representation of our value proposition.

Aside from our Review Overview, we continued to iterate upon key features that would best showcase the primary 4 content types. Some of these features include the product swatch gallery, the ingredients graph, the skin compatibility review filter, youtube video filters, and even community mentioned posts.

At the top of our product pages our product swatch gallery that pulled from blogs and images over the internet (credited of course) 
We also pulled quotes from reviews that supported facet analysis as well as skin compatibility
Our ingredients graph detailed the ingredient contents of the products and how harmful they were to the skin (pulled from CosDNA, a credible ingredient database for cosmetics) 
We also continued to improve our filters by skin tone, skin type, and types of videos like hauls, discussion, product application and so on.
Product pages also tailed with Mira's community posts that mentioned or asked about the particular product

Product images

At the top of our product pages our product swatch gallery that pulled from blogs and images over the internet.


Score card

At-a-glance view of the most stand-out product facets, whether a strength or weakness of the product (i.e. buildability, smoothness, blendability).

Product Comparison

Choosing between products? Use the product comparison feature to compare it's facets side-by-side.

Facet Review Cards

Review cards provide an in-depth look at the top mentioned qualities of the product. The bar at the top of each card represents "how good" that facet is relative to similar products. This product, for example, seems to be very longlasting!*

Supporting excerpts from our extensive review catalogue help users get a sense of what people are saying. They can click through to see all relevant reviews and do their own research.

*These ratings are based on our data system's analysis of millions of reviews, videos, and consumer behavior data points.


Skin Compatibility

Skin compatibility is determined by sentiment analysis of the reviews. Click to read reviews that further detail how products interact with your skin type.

Ingredients Analysis

Pulling from cosDNA (online dataset of products and their ingredients considered as a source of truth), we break down the product's ingredient makeup as hazardous, acne-inducing and safe in comparison with other similar products.

Product Videos

Videos from all over the web that mention the product. Each clip starts right when the product is mentioned. Browse through videos by skin tone or shade.

Community Posts

Product page trails with UGC content from Mira's community that have mentioned the product.

Wrapping it up

There is so much complexity and variety in how people search for-- well, anything! At first, we wanted to provide people with the most accurate and comprehensive pieces of information that Mira could offer. We hoped that we could provide Mira's users with unique information that they wouldn't be able to find elsewhere. As we continued to iterate upon our product pages we realized that it's more important to prioritize brevity and clarity over accuracy and information density by crafting a clear story.