Overview
Originally coming from an idea at Belong's hackathon, Site Search is a functional on our site that allows users to perform a keyword search to able find what they are looking, and allow an increase in self serve support.
Problem
Due to the lack of a search functionality users struggled to not only navigate the site but also had a hard time finding information. People had to search for our help pages which was that great either and in the end resulted in our call volume being increased.
Solution
Implement a global search function that will allow users to to do the following 3 features
Allow a user to perform a keyword search
Allow usage from any page
Allow users to view more than results on a page
Deliverables
I was able to design search feature that focused on the core functionality of allow a user to perform a keyword search and get a result.
Impact
Within 5 days of usage Belong saw increase of users of searching how to how update account details and over 2000 searches for eSIM which is a valuable data for Belong.
Process
The process for Site Search was broken into the usual way of a design project, however, due to a restructure I got assigned the work after a period of time as it got paused.
Searching for the research
Disclaimer: As shown in the Site Search Process above, all the user testing and research was done before I was assigned to delivering site search. For the sake of understanding this project we will still talk about the findings from the research.
Despite the idea of Site Search spawning from an already existing customer pain point there was a lot of research that still needed to be undertaken. For site search the following research was done; competitor analysis, and user testing.
There was analysis of 13 search examples (9 in telco & 3 other industries). At the time of research, it was determined that across the competitors none of them had exceptional user experience, and especially the direct competitors had poor search systems that caused site navigation ineffective.
What did user expect
After some basic wireframes were created - user testing was perform with 5 participants to understand their expectations of search. All users understood where they expected a search functionality to exist, and reacted positively to features like 'most popular terms'.
Design
Since the user research and testing and initial design was done, when I was assigned to this project. My job was to refine the concepts, and solve any unanswered questions. After looking at the work and engaging with stakeholders, we made the decision to strip back the initial designs as they too many unnecessary features for search. We stripped the design down to have core functionality of a global search and that was;
Allow a user to perform a keyword search
Allow usage from any page
Allow users to view more than results on a page
See below of some of the designs that we initially designed that included live/reactive search and categories on search.
Accessibility considerations
From a design point of view, we had to incorporate 2 main elements for accessibility and they were a new 'red' for error state in search filed, and the other was having a 'heading' for new results rather than just showing for more results. We also opt out of pagination, and infinite scroll as having a button saying 'load more results' was more accessible.
Delivery
Outcome & next steps
I was able to design search feature that focused on the core functionality of allow a user to perform a keyword search and get a result.