Vera Bradley Partnership
Webpage Redesign
​
Improved discoverability and paths of Vera Bradley partnership webpages featuring collaboration products
Project Overview
As a high-fashion brand, Vera Bradley is partnering with more and more cross-industry brands to deliver collaboration products. At the same time, Vera Bradley's online website needs to address the impact of partnerships and meet customer needs. My 11-week intern project at Vera Bradley was geared toward new partnership webpages that can reflect the business priority subtlety, enhance paths of shopping information, and can be reused for future partnerships.
My role:
UX design
UX research
Visual design
​
Mentor:
Yoko Fryer
Length:
May - Aug 2019
Collaborations:
Senior UX designer
Web developers
Copywriters
Deliverables:
High-fi web mock-ups
Content system
Research results
​
A glance at final redesigned pages
Design Problem - Why the old webpage was limited？
The old partnership page on verabradley.com formats all collaborations from past to present as a list. Each collaboration has a picture, a title plus a paragraph of the introduction.
Also, different collaborations have different business importance that determines how much support/promotion it receives. This layout wasn’t able to reflect the tiers of business importance. So, the first step problem statement can be summarized as:
How might we improve the information discoverability of the partnership webpage and amplify the business impacts brought by collaborations?
User Research Insights
Comparative Analysis
When conducting benchmarking with other competitors and brands in terms of how they present "collaboration content", 9 out of 14 brands have both aggregated collaboration page and single collaboration pages, though the content varies a lot.
Baseline Usability Testing
When putting the old webpage into usability testings (see full testing results), to understand how efficient the information is perceived and users' impressions of the brand, the following customer frustrations were discovered:
1. Customers got confused about which collabs are still active and available to purchase.
2. Some key information is missing such as why choosing to collaborate with a specific partner, where to shop collaborations etc.
3. Customers love to see the charitable collaboration but wondered what impacts it has made.
What I learned from research insights
The benchmarking of collaborations on E-commerce websites features a combination of the main collaboration page and single collaboration pages so that customers can get more information before being directed to the product purchase page. The Vera Bradley main collaboration page now only bears a basic function of displaying all collaborations, however, content and layout scalability needs more explorations to attract customers' interests and improve their impressions of Vera Bradley.
Redesign Ideations
New User Flow and Content Strategy
First I started to refine the user flow of accessing collaboration info and placing a purchase. Single collaboration pages were increased for collaborations that have high tiers of business importance, with reference from benchmarking findings.
To fix the missing information discovered from usability testings, I also identified must-have and good-to-have content with sketches of different layout options
Reorganization of the information path of current/past collabs
To tackle the problem that it's not visually clear which collaboration is still available to purchase, I proposed two solutions as the picture below to visually distinguish the current and past collaborations and put them into an A/B testing.
The testing result shows that 6 of 8 users think it's important to see all collaborations on one page(Solution A) because they love to learn a history pathway of collaborations while 2 of 8 are neutral/indifferent to either solution.
New layouts of the charitable collaboration
In baseline usability testings, the position and impacts of charitable collaboration (New Hope Girl) were not very standing out. To reveal the philanthropic impacts, I explored different attention-calling layouts.
More UI improvements after user testings
For some layouts, I tweaked the UI design with user feedback and geared towards consistent, clean, balanced visual presentation, for example aligning the usage of eyebrows to only highlight one place per information group, adjusting the spacing, etc.
Design Solutions
1. Main collaboration page
Compared with the previous partnership webpage, redesigned main collaboration page features clear distinguishment of current/past collaborations, adds more content in various layout to attract customers' attention, meanwhile the charitable collaboration is more popped out with impacts statistics displayed.
2. Single collaboration page
For collaborations that have a higher level of business importance, a single collaboration page is designed for customers who want to learn more information behind the product.
On the left is an example of Vera Bradley + Crocs collaboration.
3. More work: reusable content system
Realizing each collaboration has its own unique story and content, there is no template for all. To solve this challenge and make the redesign reusable, I sorted out the content cartridges that can be pulled up into new webpages based on each collaboration's story.
Mockup details
Main collab page (click here to see mobile web version)
Single collab page (click here to see mobile web version)
Design Impacts
Improved information paths & discoverability
Usability testing results show that with redesigned webpages, customers can easily navigate or find the information they want the most such as availabilities, where to buy, reasons to collaborate, etc. They also love the new web layouts which feature a fun and fashion vibe.
More positive brand image promoted
When asked about whether there was any new impression(s) about Vera Bradley after viewing the collaboration webpages, 7 out of 8 customers gave strong positive descriptions of their impressions, specifically, 6 out of 8 customers were super impressed with the charitable impacts of New hope girl collaboration.
Content cartridges adopted in new webpages
For the 2020 collaboration with New hope girls, the single collaboration page adopted content and cartridges developed in the content system, such as quotes from CEO and employees, frames of pictures in patterns, how many proceeds go to the NGO, etc.
Takeaways
1. Reflecting customer needs and business concerns in Design
An Important learning I gained from this internship is that a good UX designer should be the voice of their customers and also be good at communicating company business goals.
2. Mobile first 📱
Statistics show that a great number of customers view VeraBradley.com from their phones, so responsive design was a significant part of my internship as well. Never will I ever forget "mobile-first" after this internship anymore!
3. Friendship & Team Spirit
I'd like to give special thanks to my mentor Yoko, my buddies in the UX team who have always been so patient and supportive to me. It’s a blessing for me to spend such a wonderful summer in VB as a UX designer and harvested such great memories!
