Shreyas Sunil | SpotSearch

Role

UX Designer

Heuristic evaluation
Ideation
Stakeholder Interviews
UI design
Usability testing

Collaboration

University team
Marketing team
Development team

Clients

Washington State University
Kent State University

Timeline

Mar 2021 - Aug 2021

Tools

Adobe XD
Hotjar
Google analytics
Miro

"How often do we find ourselves on websites, struggling to search the right information we need?"

Context

SpotSearch was designed to transform the search experience with its AI-powered results

SpotSearch scans into websites, documents, video transcripts, contacts, and social media to provide search results under each category.

View product site

Our target Users

Helping university students get the right information

Industry: EdTech (integrated to university websites)

Interest: They primarily sought information on programs, admissions procedures, financial aid, campus life, faculty and staff directories, library resources, news and events, alumni services, graduation information, and research opportunities.

Behavioral Trait: They expect search results within seconds, reflecting their preference for quick and efficient access to information.

"And here's how I improved the experience"

Enhancing SpotSearch Video Search feature

Enhancing SpotSearch

Video Search
feature

Directory search dashboard

The existing layout had multiple result categories in a vertical scroll, and each result can be hovered over for more information.

Vertical scroll for result categories.

the Problem

The analytics revealed that the result categories at the bottom of the scroll are not discovered by most users, contributing to a high bounce rate.

How might we make the results at the bottom of the scroll more discoverable and enhance the user experience?

Exploration one

Introducing a dropdown for result categories

Drawbacks

- Hides categories when one of the dropdown is viewed
- Involves long scroll when multiple categories are opened

Exploration Two

The next idea was to use horizontal tabs

Advantages

- Does not involve scroll
- Shows all the result categories upfront
- Does not overwhelm the users with too many results on the left

But...it's never this easy, is it?

Technical constraint

I had to maintain the fixed dimensions of the search engine on client websites, and adding the new tab section would increase the length

Search engine

When compared to the existing interface, the horizontal tabs were in the place of history section, so if I can find a way to incorporate the history, our problem would be solved.

Existing

New idea

And yes, I did find a way!

Final Design

Having the search history appear on click of the search bar, and incorporating the horizontal tabs for result categories.

After experimenting and testing, horizontal tabs are placed at the top, enabling users to select their desired result category effortlessly. Each tab displays a list of results corresponding to that specific search category, revealing results from the desired search type.

Does it end there for a designer? I don't think so...

Development

Implementation on client websites by collaborating with the dev

Outcome

17% increase in traffic and subscription based revenue

- Decrease in bounce rate
- Improved the discoverability of results

Video Search feature

What is VideoSearch?

results within video transcripts

When a particular search is made, the video search engine goes through every transcript of videos on the website and looks for the word. If present in a particular video, it shows that in the search results, with the exact timestamp of the word or the query asked.

View product site

Initial Exploration

Technical constraint

Adding this new feature posed a significant challenge since both - the video player and its transcript needs to be incorporated within the existing results layout on the right, causing low readability of video transcript

Exploration two: Collapsible section

The idea of collapsible results section emerged after analyzing user actions: once a result is selected, the focus shifts to the transcript, and the results list becomes unnecessary.

But there were a few challenges that came along:

Technical feasibility

This was overcome by discussing with the dev team to understand if the functionality was possible to implement.

Initial overview

The video gets hidden behind the results section

The order of the video and its transcript were reversed, and this made sense interms of readability from left to right

Solution: Final Design

Making the results section collapsible once the video starts playing

After several iterations, an optimal practical solution emerged. The results list is made collapsible once the video starts playing, creating space for both the video and its transcript. This approach made sense, as users do not require access to all three sections of data at once.

Outcome

Following the product demo, two clients subscribed to the video search feature, thus adding to the subscription revenue.

Directory search dashboard

What is Directory Search?

search results with the faculty/staff details of the university

When a particular search is made, the search engine goes through every faculty/staff details present within the updated directory of the university, and displays results in a card format.

How does the feature work and how can the universities update the directory?

With the introduction of the new 'Directory Search' feature, our focus shifted to enabling client administrators to efficiently manage and update a database containing information on lecturers, professors, and staff within their respective universities.

the Challenge

Difficulty to map the exact fields of the uploaded file, with the directory card details

Solution: Final Design

Adding a file upload feature with mapping the columns functionality

To ensure students could access accurate information about their lecturers and professors, a centralized repository for storing and regularly updating data was necessary. This goal was achieved by implementing an upload feature within the SpotSearch Dashboard, allowing clients to upload documents and Excel files or sync data from specific links to a dedicated database. The information could then be seamlessly displayed in a dedicated tab within the results section.

The results section was transformed into a card-based layout, coupled with intuitive filters at the top, facilitating meaningful navigation, even when dealing with a substantial volume of results.