Vera Bradley Search Experience
Implemented in October 2020
Overview
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.
While focusing on user needs, we set to enhance the search experience. We designed a new visual interface and updated various interactions.
Objective
Enhance the Vera Bradley search experience while focusing on user needs and pain points.
Core Team Members
• Product Manager
• Senior UX Designer
• User Interaction Designer (that was me!)
• Developer
My Role
• Research and Discovery
• UX/UI/IX Design
• Low Fidelity Wireframes
• High-Fidelity Prototypes
• Quality Assurance Testing
Phase 1: Discovery & Research
Research
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.
Ready to dig deeper, I researched UX guidelines. What  do users expect in a search field? Where do they tend to look, click, or tap? Are there any underlying issues? To find these answers, I used various sources but kept my main focus on two in particular: Baymard Institute and Nielsen Norman Group.
Pain Points
Once we had gathered user feedback and felt confident in the research findings, we were able to dig deeper into 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 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 Senior UX Designer and myself
Visual representation of the problem areas and pain points of the previous experience (mobile only)
Video showcasing the usability issues of the previous design
Phase 2: 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 develops to align on feasibility.
Mockups
With the path narrowed, I created mockups of two options. While remaining flexible, we received input from the Product Owner and decided on the final design/experience.
Mockups of 2 Final Options
The Solution
To bring the designs to life, I prototyped the final solution in Adobe XD (shown below). Again, I kept my focused 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.
Visual representation of the solution (mobile only)

A recording of the final prototyped design (for mobile)

A recording of the final prototyped design (for desktop)

Phase 3: Develop & Implement
Live Implementation
From a dev environment, through QA testing, and on to production—the developer brought the new design to life. We worked very closely during this process to ensure alignment and work through any adjustments. The experience is live on verabradley.com—feel free to check it out!
Altogether, this project took about 1 month to complete.
Results
Within one month of implementation, Vera Bradley's search experience customer satisfaction scores increased by more than 33%.