BestReviews Product Page and UI Kit
overview
BestReviews simplifies consumers purchasing decisions by narrowing down product categories into a “top 5”. As our product categories expand and our traffic increases, there is a need for a more scalable UI kit as well as more engaging product pages.
Example pages:
Best Food Processors
Best Sewing Machines
Best Kitchen Knife Sets
*This project was designed in 2018 and may not reflect the current design.
CLIENT
BestReviews
WHEN
2018
MY ROLE
I was the Lead Designer on this project and was in charge of all design and prototyping, and design reviews with developers. I worked alongside our project managers for user-testing and A/B testing.
TOOLS USED
Sketch
Principle
01–Getting Started
The Problem
When a user landed on a review page, they either clicked through to one of our vendors or abandoned the page. Very few users were scrolling down the page and immersing themselves in our content.
The Opportunity
To create a product page that can scale across thousands of categories while giving the user the confidence to purchase the right product by helping them understand the product and category in its entirety.
“Our mission is to simplify the consumer’s purchasing decisions.”
02–Research and Findings
We observed users through HotJar to see where they were interacting with our content and how long they stay. Majority of users were staying above the fold, only interested in the top 5 products in the matrix. They usually spent a few minutes then either abandon or click on a product to go to our partners such as Amazon or Walmart.
user research
After talking with users and observing users through HotJar, we discovered that they didn’t spend much time scrolling down our product pages. One of the reasons was because a module that was right below the product matrix looked like a “footer”, so users didn’t know there was other information below it. Other users said they didn’t realize there was valuable content below the fold. Some felt overwhelmed with information, and some abandoned the page fairly quickly because they didn’t know why they should trust us, or how we were unbiased with our choices.
analysis of old design
The header image hides behind layers of filters and text, giving the users a hard time what is happening in the photo/video. The “Check Price” buttons were sitting below the fold and labeled with big, bulky banners. Throughout the product page were inconsistent spacing and visual hierarchy, and large, bulky modules, creating a disjointed user experience.
the goals
Cleaner Layout
There are a lot of different types of content on our product pages; the product matrix with CTA’s, product-specific content, evergreen content, and different modules with informative content. Creating a consistent visual hierarchy that makes it easy to scan will make it easier for patients to find the information they are looking for and engage with the content.
Create Trust
Using photography and videography that shows our teams using and testing the products to create trust. Incorporating tips and tricks and other advice from experts in the field will give credibility. Adding a trust statement above the fold and into the product matrix will help users quickly understand how we test products.
Engaging Content
Breaking up the text-heavy content with videos, photography, expert tips, quotes, and tips and tricks will allow users to scan more easily and give them a chance to see our products in action. Incorporating more video into our product pages with content such as how-to’s and un-boxing experiences could keep users interested.
Scalable UI
There is a lot of evergreen content mixed with very product-specific content. Since our product categories have scaled to thousands in the recent year, we need a way to quickly be able to swap out product-specific content when it becomes outdated, out of stock, or when new models are released.
03–The Solution
Below are the final designs for the UI kit and Product Pages. The UI kit now has
UI Kit
I created this UI kit to follow when designing assets for the site. These assets scale well across all parts of the UX process, from the Homepage to the Product pages across Desktop, Tablet, and Mobile devices.
new product page design
The new design gives way to an unobstructed header image or video, clearly labeled title, smaller banners, “Check Price” buttons above the fold, and a space for a “Trust Statement”. We wanted a way for users to understand the BestReviews testing process and how our reviews are unbiased. This space can also be utilized for different content for future A/B tests. Below the fold sits a cleaner, deep review with smaller modules and less interruptions between paragraphs of text. This new design, with much more consistent spacing, visual hierarchy, and new and improved modules, allows these pages to scale across thousands of product categories consistently.
section breakdown
