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:
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.
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.
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.
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.
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
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.
At-a-glance view of the most stand-out product facets, whether a strength or weakness of the product (i.e. buildability, smoothness, blendability).
Choosing between products? Use the product comparison feature to compare it's facets side-by-side.
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 is determined by sentiment analysis of the reviews. Click to read reviews that further detail how products interact with your skin type.
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.
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.
Product page trails with UGC content from Mira's community that have mentioned the product.
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.