PrepInsta Search functionality

Introducing search functionality of blog based website improving content discoverability and user engagement

My role

My role

Product Designer

Product Designer

Timeline

Timeline

1.5 week

1.5 week

Status

Status

Live

Live

Impact Metric

Impact Metric

2%↑ Increase

2%↑ Increase

User Engagement

User Engagement

2%↑ Decrease

2%↑ Decrease

Bounce Rate

Bounce Rate

Why do we need search functionality?

Why do we need search functionality?

Lets’ start with the background of why PrepInsta website needed this feature



PrepInsta is a blog based tech placement exam preparation website which consists of study material for various tech placement exams, Exam platforms, Coding, Upskilling and Interview prep.



Due to PrepInsta’s strong SEO, we were getting great organic traffic—but most visitors landed on a single blog post and left soon after. Without a search option, users couldn't easily explore related topics or discover more content.



This meant we were missing out on deeper engagement and longer sessions, despite having tons of valuable material on the site.

Discovered Pain Points

Poor Discoverability

Users struggled to find

relevant blogs easily.

High Bounce Rate

Visitors left quickly when content wasn’t accessible.

Low Engagement

Users read one post and dropped off.

Cluttered Navigation

Browsing through categories

felt tedious.

SEO Dependence

Traffic relied heavily on Google, not the site itself.

No User Insights

User intent and content demand remained unknown.

Problem Statement

Problem Statement

Users face difficulty in finding relevant content on the PrepInsta website, leading to high bounce rates and poor engagement.

Solution

Solution

Implementing an intuitive search functionality to help users easily find content, improving navigation, reducing bounce rates, and boosting engagement.

Search bar UI seems like one of those design elements you can’t mess up. Stick a magnifying glass icon in the header, add a couple of input states, ensure a solid backend — and you’re done, right?

Researching and studying competitor’s

Researching and studying competitor’s

To design the most efficient and user friendly search functionality I conducted competitive analysis understanding how our competitors are tackling in hand problems.

Studied various search functionalities to understand common patterns and edge cases so that I am able to design search functionality which is highly functional and effective.

After studying n number of search functionalities used by our direct or indirect competitors these where the findings.

Brainstorming

Brainstorming

Since search plays such as huge role in making our website's user experience better we as a team of manager, product designers and stake holder did a brainstorming session and collected innovation ideas.

To improve content discovery and user experience , decided to add Trending pages and Popular searches on the search pop up.

Popular pages:

  • Currently due to tech constraints we were not able to dynamically identify and update popular search so we identified the most visited pages in past 6 months from google analytics and showed them on the search .

But In future we are aiming to make this feature dynamic as well, where pages will be identified by the code on basis of engagement and traffic.

Trending Pages:


Trending Pages : reflect real-time interest and activity, guiding users toward timely or widely discussed topics. This creates a sense of freshness and keeps the platform dynamic.

Challenges faced

Challenges faced

We had few technical limitations which had to be kept in mind while designing

After understanding what will be different states of search functionality now its time to define what essential content should the search functionality should have.

Final Designs

Final Designs

Website Design

Website Design

  • Empty search popup

  • Typing screen state

  • Loading screen state

  • Keyword searched state

  • No search result state

  • Empty search popup

  • Typing screen state

  • Loading screen state

  • Keyword searched state

  • No search result state

Mobile Design

Mobile Design

Paste your design here

Paste your design here

Paste your design here

Paste your design here

Paste your design here

Paste your design here

Future Scope

In future we will also incorporate videos courses which we will redirect to PrepInsta’s subscription based video courses named PrepInsta Prime.

We can also create a separate search result page where user will be able to filter out searches and search larger number of results.

If you read the whole case study and reached till here I am really thankful to you. Hope you have a great day ahead!

Thank You!!

Create a free website with Framer, the website builder loved by startups, designers and agencies.