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