Updating The Main Search Experience
Overview
We undertook a comprehensive revamp of the search page, addressing underutilized sections and ensuring that the design aligned with our existing branding. Our primary objective was to enhance the user experience for those searching for items while maintaining brand consistency.
Before
After
-
The search page on our website displayed a subpar representation of our branding and had an inconsistent layout design that didn't align with the rest of the site. Moreover, there was unnecessary elements, which hindered users from successfully conducting searches on our platform both on desktop and mobile effectively.
-
Enhance the user experience on the Search page by ensuring it is user-friendly and intuitive, promoting ease of use and clarity. By updating the design, we can make it even easier for users to find what they need and improve their overall search experience.
-
Managed project design efforts with the 3rd party vendor.
Worked collaboratively with strategists to ensure the search experience aligned with the new direction. Together, we refined filters and eliminated unnecessary elements.
Collaborated closely with IT developers to enhance the search design, ensuring its usefulness and effectiveness.
Collaborate closely with the Analytics, Strategy, and Growth teams to establish aligned success metrics for validating the new design.
Oversaw and organized the UAT of search page.
Process & Contributions
Discovery
Data Analysis
I dug deep into both quantitative and qualitative data on the search page, thanks to FullStory and Adobe Analytics. This hands-on analysis not only helped me nail down key performance indicators (KPIs) as benchmarks for project success but also revealed valuable insights for shaping the design strategy of the search page.
Key Findings:
Users searched for a majority of specific product names.
The filter section on the current design was underutilized.
Filter area under input box was not utilized.
There were a significant number of clicks on the navigation while on the search page, which could mean users were not finding what they needed on the search page.
Key Performance Indicators (KPI)
01
The Conversion Rate of the search results will provide valuable insights into the effectiveness of the new design and use of categorization. It will help evaluate how well the design has enhanced users' ability to find information easily, thereby improving their overall experience.
02
The Abandonment Rate examines the number of users who search for an item but do not click on anything. By comparing the progress before and after the design, we can showcase how this new design has enhanced the user experience in terms of findability.
03
The Engagement Rate (CTR) of the highlight card one of VMwares’ business objectives apart of a customer journey on "learn, try or buy". Assessing this will determine if the new design effectively promotes engagement and guides users to relevant content.
Competitor and & Internal Analysis
I performed competitor analysis on seven distinct websites but narrowed down to these four sites to gather insights into their design elements and structures. Subsequently, I identified elements that align with our own, which have the potential to enhance the user experience.
Additionally I outlined current search experience on the VMWare site and its' Micro sites. Our goal is to maintain consistent design across all platforms while enhancing the user experience. By conducting a thorough analysis and implementing essential enhancements, to deliver an enhanced search experience that seamlessly aligns with our well-established branding.
Ideate
I led the design process for the search page, refining and finalizing the wireframes. Over the course of one month and five iterations, I oversaw the creation of the search page design and conducted comprehensive design reviews to ensure its quality.
I collaborated closely with our development team to verify the feasibility of the design and assess the capabilities of the multiple APIs involved in the search page. It was during the final stages of the design that we realized the need to divide it into two phases due to constraints in time and budget.
Scope/Constraints
Due to budget constraints, this project had to be delayed by 6 weeks in the development stage, resulting in an extended timeline.
The design had to be divided into two phases. The following items have been removed in the first phase:
The "highlight area" featured icons that focused on specific business areas such as Product, Download, Lab, Trial, and free product. This UI element was designed to enhance attention and increase click-through rates (CTR). However, since it was removed during the first phase, it may impact the original success metric we have defined.
A “smart” no search results - providing the user with related search items if there was no results.
The filter functionally was removed for two reasons. First the data showed on the previous design this area was never utilized, we wanted to evaluate it after the design was implemented without it and run an A/B test after if needed. Secondly after development evaluation with the Coveo team on API search investigation implementing it would have required more time than anticipated. Since the project was already pushed, we decided to remove it in the initial phase.
The timing of the search page launch coincided with a company acquisition, which posed many challenges.
Only launching the US version of the search page due to lack of resources in globalization.
Design
Phase 1: Desktop & Mobile Search Page
Phase 2: Desktop & Mobile Search Page
Accessibility - focus order of the search page.
Handoff & Develop
The development team is provided with a Design Specification to implement the search page effectively using Figma.
Incorporated and included accessibility specifications into the design to ensure inclusivity.
After finishing the development phase, I performed User Acceptance Testing (UAT) to ensure a top-notch implementation prior to the launch, to guarantee a flawless and seamless user experience.
Results
The search page is currently in the waiting period as we anticipate the final live date from the development team. Our plan is to assess the page at both the 2-week and 4-week marks after its implementation. I have already evaluated the page beforehand using various metrics on my dashboard, setting myself up for success in analyzing the improvements in the page's metrics.
-
A higher metric signifies improved discoverability of information, enhancing users' overall experience by enabling them to easily find what they need.
The Conversion Rate of the search results will provide valuable insights into the effectiveness of the new design and use of categorization. It will help evaluate how well the design has enhanced users' ability to find information easily, thereby improving their overall experience.
-
By simplifying the search page design and making it more intuitive, users are now able to quickly find what they need without abandoning their search. This has significantly improved their journey on our site.
The Abandonment Rate examines the number of users who search for an item but do not click on anything. By comparing the progress before and after the design, we can showcase how this new design has enhanced the user experience in terms of findability.
-
An increased engagement of the new design of the highlight card is effectively guiding users to relevant content and promoting engagement with our products.
The Engagement Rate (CTR) of the highlight card which is VMware Business Objective on the search page a part of leading our users to either on a customer journey of "learn try or buy" a project that is related to their search if it applies or is relevant to the search term. Looking at this will help assess if the new design of the highlight card is effectively guiding users to relevant content and promoting engagement with our products.