Increasing company revenue by improving content discoverability on TalkShopLive marketplace through Search experience
Identified and resolved key usability challenges to create a seamless, user-friendly Search experience that enhances content discoverability and boosts user engagement without overwhelming the audience.
Role
UX and Visual designer
Team
Product managers, Engineers, Business executives, Customer growth and support teams
Tools
Figma, FigJam, Slack
Duration
Q2 2024
About the company
What is TalkShopLive?
TalkShopLive (TSL) is a social-selling and video commerce platform enabling users to sell products through live streaming. It serves celebrities, influencers, and brands like Walmart and BestBuy, offering seamless integration across social media.
Viewers can easily watch live shows and browse products on the platform, providing a smooth shopping experience directly within the TalkShopLive marketplace.
Identifying the problem
The problem was pretty obvious, however, it needed research backup
At the first glance itself, it was very clear that TSL Search was not keeping up with the basic usability standards which might lead to a loss of customers and business revenue.
However, it was necessary for to back up my assumptions with research data and current market trends, to put forward a case to the executives, to allocate enough resources and time to work on this project as it would be a major lift in terms of time and resources.
Research
Competiton, user feedback, and user journey data analysis
To put forward my case for a Search experience revamp, I worked asynchronously with customer growth team and customer support team to get business data on the user behavior and journeys specifically on the Search results page (Spoiler: It was alarming! 🚨🫨)
TalkShopLive marketplace feedback form had a few feedbacks and comments on the search experience which was consolidated.
Comparing TSL search with other competitors also revealed a huge gap between industry standard search and what TSL was offering.
Key user research highlights
Out of ~100 users who clicked on search, only 10 users clicked on a product, show or a channel.
-
According to user journey data from customer growth team, the bounce rate after users clicked on Search bar was ~50%
-
Out of the users that continued with a search query, ~80% of users did not continue further.
How is this detrimental to the business?
100 people visited TalkShopLive, out of which 50 clicked on Search while 50 dropped out of search. Out of the 50 people who went ahead with their search query, only 10 people clicked on a product, show, or a channel, let alone purchase something.
Why is this important?
According to a recent study, search conversion rates nearly double for onsite e-commerce users who successfully find what they are looking for, which means, ~90/100 people on TalkShopLive did not find what they were looking for!
Where did TalkShopLive lack?
-
Bounce rate from website increased when customer hit 'No Search results' page - because there was no where to go
-
No option of filter search results along with confusing scrolling patterns: Currently all TSL results were shown in one page without the ability to filter through anything. The inefficient horizontal and vertical scroll made it confusing in desktop and mobile.
-
Users never know what TalkShopLive has to offer, meaning they did not know what they could search for.
Problem solving step 1 - Let users know what TSL is
How do we show a user visiting the marketplace about the content that TalkShopLive has to offer?
To achieve this, I wanted to show the users upfront on what TalkShopLive has to offer and prioritize the content offering based on user intent while also generating business revenue:
1. Products
2. Shows
3. Channels
The feature was called Instant search - instantly shows what TSL is all about once user clicks on Search.
After looking at a wide range of e-commerce products and how their initial Search interactions work, I came up with the 1st iteration of Search bar - when active, interaction.
This shows a list of the content which is trending and may be of interest to the user. This Search wireframe was reviewed by the customer support and growth teams to gather feedback.
Wireframes - First iteration
One thing that stood out in the feedback was , only ~10% of customers visit channels and the conversion rate by clicking on a channel was not as much. Almost in every scenario the user and the business benefits from the user's clicking on Products or Shows.
However, a lot of times a user did not know that they can search for a query too (eg. Father's day gifts, Independence day cocktails, etc) and not just exact products/shows. We wanted to show this to the user.
Wireframes - Second iteration
Channels were given a Secondary priority and removed from Instant search trending results. Channels were replaced by Trending searches to guide users towards relevant search queries.
If the user clicks on a Trending search directly, a search result page for that would open up. If the user clicks on a Trending product, the relevant Product display page (PDP) would be shown and similarly clicking on a Trending show would lead to the video player for that particular show where the user can view the trailer of the upcoming show, live show or VOD along with associated products.
Problem solving step 2 - Recovering from errors
This solution focussed on recovering from a 'No search results' page
I introduced a concept called No empty search principle. This principle ensures that a user always receives relevant results when they perform a search, even when the query does not match any specific item or content.
This would help maintain user engagement and satisfaction in the live commerce environment where immediate relevant results are essential for a seamless, integrated shopping and media consumption.
Wireframes - Default search results
When a no search results page was supposed to appear, I replaced it with more interesting content they might not have discovered otherwise. This ensures that there is more probability of user staying on domain without bouncing off due to no relevance.
The trending products and show in the 'no search results' page will be replaced with recommended products and shows by leveraging user data to show personalized recommendations based on browsing history, previous purchases, or viewing habits.
With the Discovery Engine still in progress by the engineering team, a stop-gap UX solution was incorporated to minimize bounce rates.
Problem solving step 3 - Search bar typing interactions
Teaming up with developers to design and build a robust search experience with autocomplete and spellcheck features and interactions
-
Search queries will be to be autocompleted and reloaded with subsequent letters whenever possible after user types a minimum of 3 letters.
-
Search for a misspelled query with the closest matching term and auto correct the query
Wireframes for autocomplete and spell checks
Problem solving step 4 - Search Results page (Full search)
A robust search results page with content prioritization along with appropriate filters and sorting was created for improved content discoverability, increase engagement, and reduce customer dropoff
-
The three different types of content were made accessible using 'quick filters (products, shows, channels)' in the full search page when someone types a Search query on the search bar.
-
User has the ability to go to a single content type based on their preference.
-
Appropriate filters and sorting options for each relevant content would be available.
Wireframes for full search - All content results for search query
Wireframes for full search - Tabbed quick filters
Wireframes for Filters and sort
To decide upon the appropriate filters for each content type, a discussion with customer support and growth team was done during the final design stage. In the wireframing stage, the main focus was prioritizing the search flow and interactions, particularly for mobile given the small screen sizes and multiple interactions required.
A solution was finalized after multiple iterations and research on best industry practices that prioritizes filter selection in an intuitive manner and lets user know the current state of the screen clearly.
The final designs
Iterate, iterate, and finalize
Search being a very crucial experience for any e-commerce website along with a lot of technical challenges, I worked on getting the wireframes right as it is easier to iterate on them than actual UI designs. After multiple back and forth with customer growth and support teams, technical teams, and business teams, the wireframes passed initial quality and usability checks which meant the Search MVP was in a good shape to meet business, technical and user goals and now it was safe to work on the visual design of the search.
UI Design
Using the TSL Design System and wireframes the final designs were created
Final design -Instant Search
Final design - Full search
Final design - No search results found
The impact
Currently in progress and is expected to be shipped by the end of Q4 2024.
The Search feature will significantly enhance the user experience making it easier for the users to find products and content, ultimately driving sales and engagement.
These metrics will be used to measure success of the Search feature:
Increase search efficiency
-
Reduction in time taken to find products/content
-
Increase in the number of succesful searches
User engagement
-
Higher interaction rates with search results
-
Increased use of filters and sorting options
Sales and content consumption
-
Increase in product sales
-
Higher view counts for Products and Shows (Live and VODs)