E-COMMERCE | RETAIL
Product Page
Company
Vera Bradley
Year
2018
Role
UX/UI Research and Design
-
Redesign of Vera Bradley’s e-commerce product page template. Worked internally with a team of developers, digital merchandisers and another researcher.
-
Improve speed
The product page template was the slowest loading page on the whole site and the most influential.
Enhance merchandising capabilities
The old design wouldn’t allow for SKU content targeting which was a big thing VB always wanted to do with promotions and messaging around philanthropic causes.
Improve mobile experience
With a visiting rate of almost 70% on mobile devices, we knew that this specific experience had a ton of user issues.
-
After all was said and done, it took about a full year to be entirely launched.
Research
Old mobile designs screenshot
Current Design Evaluation
User and Business Frustrations
The previous design wouldn’t allow for SKU or Style based targeting without the use of third-party intervention. For example, we couldn’t target specific shipping arrival dates per SKU.
Regardless of device, users were having a difficult time finding the information they wanted: pattern name, price and availability .
Requirements Gathering
While not technically functioning as an official “Product Team”, our UX team did gather requirements together from various business stakeholders including but not limited to Digital Merchandising, Marketing, Backend Technology and Creative.
Technical Limitations
Most of the limitations were for the Developers to tackle with the teams who were going to be using the template once it launched (think tagging systems). I primarily collaborated with the Marketing and Creative teams to design different solutions for product content.
User Research
Our initial research included results via a mix of surveys via UserTesting, Survey Monkey, in person interviews and guidelines via Baymard Institute. Information was also gathered from analysts from calls, emails and texts coming into the Customer Service Center as well as from on-site surveys.
User Insights
Patterns are what make Vera Bradley so unique and we found that users were struggling finding the information they wanted. Users couldn’t see the name of the pattern, the price or what the availability status was until they clicked it. (some users heavily shopped patterns that were on sale) They found it frustrating that once selecting a pattern they had to scroll back to the top to see what that pattern looked like.
The initial screen load left out vital information and actions. On load, the screen only displayed the product images and in most cases user-generated content. Users had to scroll to see the product name, what the pattern was, the price and the Add to Bag button.
Content was disorganized and cluttered. Product videos were hard to find, some call to action buttons were unclear to their meaning and shipping options weren’t grouped together clearly.
Ideation
Due to time constraints,
lo-fi wireframes weren’t explored much. I jumped into high-fi wireframes for testing purposes.
User Tests
A total of 10 different tests strictly for mobile included those for pattern selection, features, accordions, product recommendations and full design.
We ran two tests for pattern selection. First test was to have users view patterns on the main product page screen or move to a new screen. 65% of users chose viewing the patterns on a different screen so they could see larger images of the patterns, view pricing and see useful stock information.
The second test was comparing patterns on products or pattern swatches only. Surprisingly, it was a close call between them, but the swatches did win.
“It’s better than a tiny little square like most pattern selections are.”
-UserTesting User
What we moved forward with
For the final design, we chose to use the separate screen experience along with the large pattern swatches. We incorporated pattern availability statuses (out of stock, preview only, etc) as well as displayed pattern name and price along side each swatch. We found that the launch dates weren’t necessary and removed that information.
Pattern Selection Tests
We ran a few user tests regarding layout and imagery. The mockups shown to the right (or below if you’re viewing this on your mobile device) are the ones we used testing an exposed gallery of images or a gallery with thumbnails. 80% of users we tested chose the gallery with thumbnails.
What we moved forward with
For the final design, we used the carousel gallery. We found that users loved having captions that clearly called out different features of the product, which is something that the old design didn’t have. Strangely, some users felt that the images in the exposed gallery were larger (they weren’t) but ultimately, on their mobile devices they didn’t want to have to scroll to get to the other details about the product.
Content Layout / Imagery Tests
Final MVP Designs
Live from 2018 through 2020
