H1 | Portfolio

Search & Filter

Improving the organization and hierarchy of the filters on our search page

ROLE: Product Designer

TIMELINE: Oct 2024 - Dec 2024

COMPANY: H1

Hero filter panel - sub sections (1).png

PROBLEM

Users of the H1 platform are Medical Science Liaisons (MSLs) searching for Health Care Professionals (HCPs) in their designated field and territory to prescribe their drugs and stay up to date with what the HCPs are working on.

Historically, H1’s filters were very hard to find and were hindering that search experience. This was a deterrent to using our product because users were spending too much time trying to find HCPs in their target, causing distrust in our product.

BACKGROUND

HYPOTHESIS

If we reorganize the filter sets and improve the information architecture, users will be able to find what they are looking for more easily and yield more accurate search results. If the results are more accurate based on the filters applied, it will reduce the time scrolling through pages of results.

BUSINESS OPPORTUNITY

By reducing the search time for MSL users and utilizing a modern updated design system, we can expect to see improved trust and increased usage in our product.

RESPONSIBILITIES

For this project, we spent an entire quarter doing the discovery process and another quarter designing and testing our ideas. I worked with a team of a PM, Engineers, and fellow designers on my team to bounce ideas off of.

CURRENT PROCESS

To understand what could be improved, I took audit of the pain points in our current search and filter experience.

Some filters were along the top, others were behind the “View all filters” button. Having two locations was making it confusing for users to find.

There was a long list of applied filter pills pushing down the search results to the very bottom of the screen.

The location of the sort was small and hard to find

It was overwhelming and complicated for non-power users by having the long list of collapsible sections in the “View All Filters”

RESEARCH

COMPETITIVE ANALYSIS

I conducted a competitive analysis of sites that use filters well to see what’s working and what’s not. I looked at these sites with a lens of what could work well for our product specifically and our user base.

Types of Sites:

E-commerce sites
Financial sites
Travel sites

CUSTOMER FEEDBACK

Another method used to collect information on the problem was taking a look at all our customer feedback submitted on the search and filter issues. This helped me prioritize what the main pain points were that users were facing in our product.

UX RECOMMENDATIONS

After collecting research from competitors and sifting through feedback from our customers, I had a collection of ideas beyond what was feasible to implement right away. So I mocked up my recommendations in phases going from the smallest lift to the largest lift to help us prioritize what to build. I brought these 5 options to our stakeholders to facilitate a conversation and ultimately decide what should be done within the quarter as MVP, and what could be a future addition.

OPTION 1

OPTION 2

OPTION 3
(our pick)

OPTION 4

OPTION 5

SCOPE FOR MVP

SCOPE FOR V2

Move filter panel and all filters to the left
Reorganize filters to match the tabs of information on the HCP profile page
Add in new filters we were missing that customers had been asking for

Redesign the top level navigation bar
Suggest filters in the UI based on search terms MSLs used
Create a full discover experience modeled off of Netflix to kick off the search process

CONCEPT

SKETCHES

I started my design process by sketching out our MVP ideas with pencil and paper before heading to Figma.

WIREFRAMES

Since we were in the middle of updating our design system for the product, I had to create all new components for the filter panel. I started off by creating wireframes to map out how all the components could fit together.

DESIGN

HIGH FIDELITY MOCKUPS

Throughout the design process I had weekly calls with engineers, PMs, and our main internal stakeholders to make sure everyone was in the loop at all times. In addition to the scope we outlined at the beginning of the project, there were some additional problems that popped up we had to solve for once we dove into designs. Some design decisions I made during this phase were:

Added in a search bar in the filter panel so users could search for what they are looking for directly

Introduced many new components into our design system such as the filter sections and subsections

Updated top section of search results to:
- Make the sort and action button easier to find
- Clean up long list of filter chips that were taking up so much space

Added in quick access section for most used filters

VALIDATION

USER TESTING

When I had a first version of designs completed, I wanted to conduct user testing to validate that the flows worked for our clients. I worked with our customer support team to schedule interviews with users as I built out a complete clickable prototype to test with.

The feedback was very positive overall and only had to iterate on a few minor things coming out of the sessions such as naming conventions and added sort options.

MOBILE

Since H1 also could be used on mobile, I took what we had for web and translated it into designs that would work for a smaller screen size. The majority of our users did use desktop with mobile being a secondary access point, which is why I decided to design for web first.

Mobile Filters open_About HCP_Location (3).png

DESIGN SYSTEM

I had previously created the H1 design system in my role, however I did introduce a few new components during this project as needed, such as all the components included in the filter panel. I had to work within the system guidelines to make sure everything looked visually cohesive.

Various filter panel states:

KEY LEARNINGS

PRIORITIZATION

We could not fit everything we wanted to do in the alotted timeframe, so we had to prioritize would would bring the most impact to the business.

BALANCING OPINIONS

There were a lot of stakeholders involved and often times had different opinions. I patiently took in all their feedback and determined wht the best solution would be in a way that made them feel heard and involved.

OUTCOME

DELIVERABLES

Created a workflow to search and filter on different criteria, making it easier for medical professionals to find what they are looking for.

METRICS

Metrics were set up to track the performance of the search and filter experience. In the first month we saw:

164 users started using the search bar within the filter panel
Users clicked on the quick access section more that the rest of the filters which gave us validation we chose the right filters for quick access
A general uptick in usage of all filters

SUMMARY

Previously, our search and filter experience was very disjointed and unorganized, causing distrust in our product.

By reworking the information architecture, introducing a cleaner UI and updating the design system we created a more intuitive experience allowing users to find what they are looking for in less time.