Vera Bradley Search Experience
Implemented in October 2020
The objective of this project was to enhance the Vera Bradley search experience while focusing on user needs and pain points. 
My Role
Discovery and Research
UX Design and Strategy
UAT/QA Testing
Collaborate and Present
Deliverables
Empathy Map
Lo-Fi Wireframes
Hi-Fi Prototypes
Core Team Members
Product Manager/Owner
Senior UX Designer
User Interaction Designer (me)
1 Developer
Cross-Functional Partners
Customer Service
Digital Merchandising
Creative
Problem
In August 2020, Vera Bradley launched a new website. However, the website search experience fell short of user expectations and lead to a decrease in customer satisfaction scores.
Results
Within one month of implementation, Vera Bradley's search experience customer satisfaction scores increased by more than 33%.
Discovery & Research
Discovery
In August 2020, Vera Bradley launched a new website. However, the website search experience fell short of user expectations and lead to a decrease in customer satisfaction scores.
At the beginning of the project, we focused on understanding our own user feedback. We listened to the direct feedback of our users, empathized with their needs, and we discussed the findings. Most of these findings came from our customer service team.
We didn’t have the resources to run usability studies, so I researched UX guidelines based on the information available. I used various sources but kept my main focus on two in particular: Baymard Institute and Nielsen Norman Group. What do users expect in a search field? Where do they tend to look, click, or tap? Are there any underlying issues?
Pain Points
Once we had gathered user feedback and felt confident in the research findings, we were able to outline the problem areas of the previous design.
•  Users struggled to locate search
•  Users wanted to clear the search field but that functionality did not exist
•  Users were confused on how to exit search versus go back to the main menu (mobile only)
•  Suggested terms were difficult to scan due to a lack of hierarchy
•  Accessible functionality lacked keyboard navigation in suggested terms
•  Poor clickable area (mobile and desktop) and no hover indication within suggested terms (desktop)
•  Different input field styling (technical debt and design inconsistency)
•  Search suggestion functionality did not exist on the search results page
•  Search activated on hover, causing unexpected actions and accidental closing (desktop only)
•  Overlapping text at certain screen sizes (desktop only)

Empathy map created by the Sr. Ux Designer and myself

Video showcasing the usability issues of the previous design

Strategize & Design
Wireframes
While aligning with the research findings, I created potential solutions in the form of low-fidelity wireframes. I presented the wireframes to Senior UX Designer and we talked through pros and cons of each option. We also worked closely with developers to align on feasibility.
Mockups
With the path narrowed, I created mockups of two options (shown below). While remaining flexible, I presented these to the core team members and received input from the Product Owner and Developers. We determined the final experience based on feasibility, accessibility, and brand consistency.
Final Prototype
As we moved forward with option 2, I prototyped the final solution in Adobe XD to bring the designs to life. Again, I kept my focus on the initial research findings and user pain points. The solution included the following:
•  Created a visible search field located within the site-wide header
•  Added a "search" button to the right of the search field
•  Type-ahead is now activated on click, rather than hover
•  Increased the visual hierarchy within the suggested terms
•  Added hover-effects & keyboard navigation functionality to the suggested terms
•  Bolded suggested terms
•  Separated the search experience from the navigation menu (mobile)
•  Added "cancel" in the suggested terms for users to exit search (mobile)
•  Added an "x" button that clears the search field
Experience the Adobe XD mobile prototype or view the images and videos below.

A recording of the final prototyped design in Adobe XD (mobile only)

A recording of the final prototyped design in Adobe XD (desktop only)

Implement
Build, Test, & Deploy
I worked closely with core team members to create ACs. We collaborated with the developer to ensure alignment and provide clarity as needed. Once in our test environment, we (the Senior UX Designer and myself) did UAT and QA testing. I also presented and demonstrated the design with the entire digital team in our Sprint Review.
The experience was implemented on verabradley.com—feel free to check it out!
Within one month of implementation, Vera Bradley's search experience customer satisfaction scores increased by more than 33%.
↑Back to Top