Date of Project:
March - July 2018
Role: User Researcher
Methods Used: Benchmarking & Best Practices research, Usability testing, Preference testing
Deliverables:
Research Report and Presentation for Leadership
About The Project
Vera Bradley’s website had undergone a re-platform and redesign in 2016 but the redesign resulted in new usability issues, particularly with the Product Detail Page.
Customer feedback surveys, social media, and Customer Service reps were regularly reporting issues with this new PDP. The most common usability issues surrounded product information (details, description, dimensions), pattern swatches, and product images/image gallery.
The Problem
Product Info
The PDP placed important product information including description, details, and dimensions, into horizontal tabs, located below the image gallery. I uncovered that this tabbed design was frequently being overlooked by users, resulting in negative feedback via surveys and a high volume of calls to Customer Service asking why basic product information like dimensions and care tips were missing from the website.
Additionally, important product information such as product name, price, availability & ratings was not available on one screen. The user had to scroll back and forth to view that information.
Pattern Swatches
Vera Bradley is famously known for their variety of vibrant and colorful patterns. This also creates a unique problem of how to best display all the patterns (which can range from 1-15 per product/ style). With the current mobile design, all pattern swatches were located far below the fold, making it impossible for mobile users to switch patterns and view the changes easily, without scrolling.
Product Images/ Gallery
Users were often negatively commenting on product images not showing enough detail about the bags. We wanted to test different image sizes, including captions showing the unique solutions Vera Bradley products provide and different gallery orientations (horizontal, carousel, or vertical) to see if these updates would ease our user’s troubles.
Site Speed
With the new platform, image size- slowed down page-load times.
Goals
Gain understanding of how users think of our products and where they would look for certain items.
Demonstrate that how the products are categorized internally, does not always reflect how the user thinks they should be categorized.
Learn how current and potential users would organize and categorize new Homegoods products (bedding, wine glasses, plates, pillows, etc.) prior to adding them to the website, to increase findability.
Conduct Information Architecture testing on Vera Bradley’s current Navigation and propose a new Navigation, if necessary.
My Role
As the UX Researcher, I conducted benchmarking research on Product Detail Page best practices, competitive analysis & comparison with other industries. I also analyzed Voice of Customer data from multiple sources including Customer Service Representatives, Feedback surveys, and social media accounts. From this research, I formed design recommendations and sent them to the UX Designer.
From here I ran a series of preference and usability tests on the new designs.
Methodology
Over the course of three months, I conducted 20 user tests (10 desktop, 10 mobile) with 180 participants who provided over 38 hours of session videos.
2 Baseline Usability tests
Desktop and mobile
To evaluate the current page experience and identify other usability issues
18 Preference tests for:
Product Information: Details & Description - layout and styling
Pattern Selection Tool
Displaying lower on the same page or in a page takeover
Showing the pattern on the product or in a larger digital swatch
Product Images
Image size
Image captions
Image Gallery
Product Recommendations
Sizing
Sample: Female, ages 18-70, in the United States, previous customers and non-customers.
Findings
Product Info
The Baymard Institute’s Guidelines for Product Detail Pages warns against displaying information in horizontal tabs
To address this guideline, which was validated by feedback given by testers and Customer Service alike, we chose to break out product information and details. This info was displayed below the image gallery, in a combination of text blocks and bullet points for easy scanning.
We found that breaking this information out of the tabs and displaying it all at once increased findability for the users, and reduced negative survey feedback and calls to Customer Service.
“Buy Section”
This refers to the section surrounding the Add to Cart button on the Product Page.
We made basic product info more visible by updating font styles for Product Name, Pattern Name, and price.
Based on Baymard’s Guideline #836, we incorporated shipping information such as estimated shipping date based on the shipping method and featured shipping promotions that the user applies for.
Pattern Swatches
The changes we tested resulted in:
Enlarged pattern/ color swatches
On Desktop: Moving swatches into a collapsible scroll box in order to show a high number of patterns in more detail above the fold
Included pattern name, price, and special information (ex: in preview or sold out)
On Mobile: Moving the pattern selection button to the top of the page, directly below the product image. The button swipes to another screen which shows large, detailed swatches with the same information as on the desktop (name, price, and special information).
Product Images
3 different gallery options were tested (horizontal, vertical, and carousel).
Almost an even split between preferences for the horizontal and vertical gallery options.
The larger images were said to help show testers more detail about the products they were viewing (score!).
Testers found the image captions helpful in learning more about the product than from images alone.
Comparison of the Current and Updated Designs
Outcome/ Impact
Reduction in calls to Customer Service, increase in CSAT scores (reported via ForeSee), and improved site performance and page speed.