top of page


Web Redesign, Improving The Search UX

Recap

Hellodoctor is an online health information resource exclusively for local Asians who face raging diseases and communities' diversions yet the living standards are still pretty unbalanced across the regions.

This article gathers differences between V2.0 and V2.1 on Search design in a short time.

Achievement

The overall redesign increased our website subscribers by 115%. On the article page, we increased our time-on-site to 3 minutes as opposed to 1 it was before. Our return rate went up to 60% from the 35% it was before. Our bounce rate went down to 63% from the 86% it was before. On some specific high-traffic pages, we gained hundreds of marketing leads. 

Team

1 Product Manager, 1 Developer

Visit Part 1, Research for more understandings ↗

 

phone_mockup_2-min.jpg

 

 

 

 

Problem

I checked the current performance stage of our site search on GA to get an initial idea of where I should focus on the problem space

 

For a long time, our editor teams were struggling to “find" new content topics to produce, but editors are not our audience. With the world moving faster, if we don't know the audiences' healthcare matters from time to time, we might just become another voice in the crowd, sharing the same information as others have done, and remain behind. 

 

To get those data, one of the solutions was to get audiences to use our site search instead of the organic search only.

Screen Shot 2020-06-16 at 5.01.45 PM.png



I applied a hypothesis structure based on the required metrics

 

When we have these factors together improved: 

  • Fast search loading speed (Technical)

  • The availability of diverse and accurate information (Editor)

  • Relevant Result Search (Technical)

 

Then we will improve these metrics:

  • Increment in total % of visits that use site search, total sessions with search, average search depth, time after search, results pageviews/search.

  • Decrement in % search exits, % search refinements.

 

If we take out search loading speed, data resources, accurate relevance, and availability of content, and only leave one factor: design, these will be the potential outcomes:

  • Increment in total % of visits that use site search.

  • Increment in total sessions with search.

  • Decrement in % search exits.

 

 

 

 

Design Behavior Pattern

My search improvement solutions were most selected from the best practices by Google Playbook for News and Content sites

 

I decided to optimize the Search feature, because our Google Analytics (GA) specialist shared with me that our traffic comes from Google search 92%, including some paid ads. 

 

At that time, our Google rankings got worse due to a lot of issues (such as redirect link), and we thought if users could find a way to search for what they need to know more after coming from Google search, that would complete their journey. Based on the behavior flow, users tended to pass on the Homepage after reading the article they found from Google search, that's when the Search feature should work decently for our users to stay longer on our site. Also, having users search on our site is a great solution to get to know their content interests. 

 

About the search flow, I completely followed the Google Chromes browser searching responses. I was thinking that a search feature designed to feel familiar with something people use every day would reduce the chances people return to Google search.

Screen Shot 2021-09-18 at 7.18.00 PM.png



Final Design
 

hhg-20-search-01-min.jpg

 

Top searched topics were treated differently on both Search Suggestion and Result Search 

Valid Search Terms were displayed highlighted on the Result Search, and Search Suggestions. 

 

hhg-20-search-02-min.jpg

 

We highlighted the matching terms differently between Suggestion and Result Search

We showed an order of article - tool - category as if the Search Term belongs to both a category, a tool, or an article. Of course, a page view of an article is prioritized before a category concerning a user's health affairs.

 

hhg-20-search-03-min.jpg

 

Result Search was always prepared to display 

Despite the Search Terms' presence, yet the results remained relevant.

hhg-20-search-04-min.jpg

Encouraging before users start typing something

Recent users' search queries were present with less than 10 queries so the information doesn't become overwhelming. For mobile devices, it's better to show 3–5 queries, and Covid-19 and top searched topics are on default.

hhg-20-search-05-min.jpg

 

Specific Search Terms were designed to be more direct on Search Suggestions

When a Search Term is a specific health term (drug, disease, herb, procedures…) or a tool, the design was to display a short definition of the health term right on the Search Suggestion.

hhg-20-search-06-min.jpg

 

Specific Search Terms also were displayed as more prominent and actionable for tools

We also gave the card-view container for the pinned article related to the Search Term. As the Search Term appears to be a health tool, I had the look with a CTA to drive for more visits and actions for the tools' pages.

hhg-20-search-07-min.jpg

 

Sponsorship and partnership were pinned at the top

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

hhg-2021-search-min_edited.jpg

 

Unexpected design review that led to a new proposal for Search 2.1, before launching version 2.0

 

After a while shortly after I designed the search and the team was already in the development phase, the graphic designers promoted the new brand guidelines, therefore, the new Search I completed went through an update of the new look applying. While going through the UI, I also found a few UX bits that could be fixed to increase the users’ comfort.

hhg-21-search-01-min.jpg

 

​One-column layout only

The first thing to notice, I realized I tended to design multiple columns layouts, so I revised all to only one-column layout for easier and faster on repeated column design in a long run.

hhg-21-search-02-min.jpg

 

Highlighting the Search Terms in Search Suggestion, and divided them into sections

During the search exercise, the Search Suggestion was designed to appear in sections based on content type: Stories, Videos, Topics (Category), Infographic, Tags, Keywords... and all of the Search Terms were highlighted in brand color not just in bold as the previous design. As the same as how it's highlighted in Result Search pages. 

hhg-21-search-03-min.jpg

 

Search Filter

This was to prepare and encourage users to the Search filter. We wanted to develop the Search to its finest to gain the most audiences' health interests as much as possible.

hhg-21-search-04-min.jpg

 

Search terms that include health tools or medication topics are designed to be more responsive on both Search Suggestion and Result Search

All health tools and basic introduction/initial articles of a medication term are displayed with a lead paragraph as the version 2.0 got, and a CTA button. You can tell I tended to revise design based on its content, which wasn't important to users as much as to editors. So I learned to make them simpler and more consistent in UI. 

hhg-21-search-05-min.jpg

 

The top matching result was presented in brand color and card-view layout

To prompt users toward trying tools or reading the first articles of the prescription they're looking for, the matching results were designed to become more striking visually. With a CTA for the tool and more related tags for medication articles, we strived to increase pageview/depth.

hhg-21-search-06-min.jpg

 

COVID-19 remained at the top of the search results and the default search suggestion

To prompt users toward trying tools or reading the first articles of the prescription they're looking for, the matching results were designed to become more striking visually. With a CTA for the tool and more related tags for medication articles, we strived to increase pageview/depth.

bottom of page