top of page

Recap

We only had less than 30% revisitors via organic search so I guess it's not a big deal to keep changing design over a short amount of time. Personally, I always kept various revised designs just in case stakeholders change their minds within a short time, I would always be ready.

 

Contribution

Design review, Testing, UI - UX, Visual guidelines revamp

Team

1 UI Designer, 1 Product Manager, 1 Developer

 

Visit the latest design here ↗

phonemockup_1-min.jpg



​Audit review
 

Problem

After launching the first redesign, we received a few things that didn't work out due to the diverse testing results

We delivered the design for the article display first around February 2020. In Vietnam, Indonesia, Taiwan, Malaysia, the feedback was decent throughout the journey how a user finds us via organic search and increases the time on site overall, except Philippine.

 

Although, there was some mixed feedback from specific category's users that we received from our standard surveys weekly that we thought we could slightly make changes to improve the brand awareness and retention rate. 

 

Several were from frequent readers regarding navigation while inside the web and interaction points inside the editorial article page.

 

Testing

The design behavior pattern of recognizing CTA buttons or guidance was thin tested by Heat Mapping

 

Following the data team's reports after the launching for 60 days, resulting in that a large number of users did not recognize the call-to-action links and buttons in the existing design.  

 

hhg-2021-home-min_edited.jpg



design
 

hhg-21-01-min_edited.jpg


Revising Editorial Reading Display’s Header

Direct category being highlighted on the article editorial page

In reality, the categories' names are pretty long help increase either it takes a whole line, or (on the current live web now) it is not listed in full. It defeats the purpose for users to pay attention and visit the relevant category, and it's also not great for SEO.

Therefore, I decided the article's direct category to be highlighted in a vivid container instead of displaying a long full breadcrumb of all relevant categories. With the purpose that it draws more attention and awareness on which page and which category the article readers are reading belong to. It helps with increasing CTR and us know more about our audience’s health interests.

Bylines, Headline, Lead paragraph structure

Headline + Lead paragraph above the lead image instead of the current order of the headline > bylines (names) > publishing time ... > lead image > first paragraphs.

To better users' reading flow and get the article's leading opinions (from headline to the lead paragraph) without a large image-byline-time... interrupting in-between, espe
cially on smaller screen devices display.
 

Publishing time is removed

This is to avoid when the articles' published time is not recent. In reality, the competition of creating new content every day is so tight, and sometimes the editor’s team (as I remember correctly) would re-edit an article they wrote months ago and republish it.
 

Social network icons are back

I noticed new users still use this way to share/save an article before reading it. So they're here to give another option to share out. 


CTA buttons for Save, Share, Editorial Customize are designed to be more interactive

Adding the border makes the icon alone look more like a button to drive a clickable feeling for users. The expectation when users tap on Save or Aa button, the micro-interaction will make them feel happier to engage.

 

hhg-21-02-min_edited.jpg


Revising Editorial Reading Display’s Body

The caption of the photo is inside the photo container, instead of out of the photo like before

This looks cleaner, but mainly it is to prevent spacing mistakes made by the editors which happened pretty often. With the spacing too large, the caption will look like a single line from a paragraph, and we want to limit as much as possible the writing errors made by Editing freestyle. 

 

Key Takeaways highlighted before starting a long article

I followed one of the role model sites' suggestions to reveal the most important points on top of long health articles. It's to help users who are in a rush, for example, a young woman is looking at "popping pimple" advice. As if she's so ready to pop it already, she might not want to sit down and read a long article, while seeking actionable advice, and find out the article is not for her situation.
→ so we give users a quick review to prove articles' relevancy.

 

hhg-21-03-min_edited.jpg


Forming light visitors' journey with various content approaches

Make links easily identifiable & add related content video(s) in the middle of an article

It's helpful in increasing CTR, and page views (google playbook research). We already had a lot of in-links inside an article, it's just we didn't make it very identifiable.
 

Put mini-game, actionable requests in the middle of an article

To help increase time on site, and grow engagement.
 

Make tags more prominent at the end of an article

To help with CTR → therefore, we can know a user's deeper level of health interests in topics.
 

Reveal medical doctors, allow readers to visit and follow the doctor's profile, and the Back-to-Category button

To support CTR to the directly relevant category and the doctor’s profiles, also to improve human connection and trust between users and authors (doctors) and to the site

hhg-21-04-min_edited.jpg


A step forward with normalizing social commenting

Add related content links as a part of the article. Make the links and tags more prominent

To help with CTR and page views for related topics and authors. It's easy to apply changes, but the improvement is easy to see after a while.
 

Replace the Feedback section with a real-time Comment section

When I was still working there, I knew that the article's feedback area received a low engagement (almost 0.1%). I think it's pretty clear that our target audience didn't want to spend time giving feedback on a healthcare article of which they don't have solid knowledge (as if it's a drama news topic, they might). The most important thing was the Feedback function is to help us directly, it does not encourage the audiences’ actions to continue doing that because:

  • it didn't show if an audience's opinions were collected, examined, or did affect our edition team. 

  • as if the audience's opinions were collected, and did affect our editor team's decisions, it still did not have a way to notify our readers that their feedback was heard and well noticed.

However, our audiences did love speaking their mind when they sense or see a presence of existing human connection such as comments and likes, a sense of living community that drives them to do the same: to give an opinion.

→ improve time on site, lower bounce rate, especially increase sign-ups

hhg-21-home-min_edited.jpg


Better Navigation on Landing Pages (Category, Home)

Adding categories - submenu to the main navigation

This was originally suggested by Google playbook and I think it was a good idea but in our first release, we decided to reorganize our entire category tree all at once so we hid the category menu. 

The hamburger icon comes with the categories menu, it was easier to design an expanded menu especially when some of the categories are already there  → improved page views/depth.

 

Login/ register easily accessible 

→ improved sign-up rate, returning visitors.

Consider having Health Tool out on the main menu 

As we improved the health tool for real later (check the live version) so it's worth pulling the health tools onto the main menu to support the business intention - to set a way to make health tool apps in the future more familiar with users  

→ it helps with sign-up rate, CTR, and engagement.

 

hhg-21-listing-min_edited.jpg


Optimize the journey where readers wander around before viewing an article

Display comment number 

Based on psychological effects on how people tend to follow the crowd's behaviors, such as doing the same thing most people do. In this case, the number of comments displayed on an article in the list view did help the users scan the listing easier and therefore, being triggered to jump into the article that has more comments.
 

 

Display "save" text with icon bookmark instead of the icon alone 

When I worked on this UI button at first, we tried multiple icons to try to fit all the different market preferences in "Save an article" such as Heart, and Star, but Bookmark was the one we chose. Even though it was a silly choice because I was asked to share with our 8 market coworkers at the time to pick one, and they picked the bookmark icon, I tried to check on the responded interaction with real-time users to prove my point - never ask your coworkers to pick what UI is better.

The result after the first design was released was that in some countries such as the Philippines, Taiwan, India, and Myanmar, we received a very low interaction rate with that icon. This was because, in some countries, the users were used to seeing Star / Love icons as SAVE from leading e-commerce companies such as  Shopee, and Lazada, it proved that a small thing like an icon could be seen as a little confusing to a certain market. However, we could not casually pick different icons for every different market so we decided to put text next to it -> The simple SAVE text doesn't get revealed in all markets and platforms, so we only chose to display the text Save in some specific regions.
 

Replace bylines with Category links, only show byline when the article has the verified checkmark 

The small circle HCP profile picture was too small to notice what it is (I haven't even talked about if the profile pictures were of high quality and clear), while the verified checkmark is colorful enough for the human eye to easily notice what it stands for. 

The byline, the publishing time, and the lead paragraph all added together were too much for people to skim and scan while being on the list view and mobile device. Therefore, I chose to free the eyes by having more white space, leaving only the title for a better scanning experience on the list view. The colorful category tag addition was there to help improve CTR, and page views.
 

Display related category of an article on Listing 

→ improve CTR

Display icons based on the content type  

The content types were reinforced to be strictly tracked weekly before I left the company. 

→ it helps special content types (gallery articles, video) easier to stand out, and also gives users a chance to remember their favorite articles better with an extra addition of visuals on the titles.

 

hhg-21-listing-list-1-min_edited.jpg


List-view Article designed to optimize scannability and infinity-scrolling

Bigger thumbnail for List view listing 

Based on how editors choose images for each of their editions, I know that they mainly choose a wide horizontal image for the article's lead image, and don't center the image perfectly in the square. The square thumbnail for the List view was too tight to display a good quality vision. So I decided to change all the thumbnail display containers to Rectangle shapes with similar ratios for a better thumbnail display.
 

Easy scannable on List view listings 

To do that, I'd remove the lead paragraph display, leaving only titles and a bigger thumbnail on an article's display on the listing list view. → improve CTR and make it easier to scan with more white space.

 

hhg-21-listing-card-min_edited.jpg


Card-view Article display designed to be exceptional but appear only once

It's a business request: we often offered our clients to display their brands on our platform. Either it's a bright design category written for a specific brand or a place in Top Stories at the top of a landing page

To make the TOP STORIES section worth its stand and privilege to offer in order to make deals with clients, I designed it in a Card-view article. Unlike List-view article listing, a Card-view article is displayed with a larger thumbnail and appeared with a leading paragraph, and only appears once on landing pages.

To push for a better deal, we aimed to charge by hours or days packages for clients' articles to remain at the TOP STORIES section. When there is no partnered article call, the latest publish took place.

 

 

hhg-21-cat-01-min_edited.jpg


Getting more visual and streamlined on Category pages

Large (hero) image of the related category, with clear category name When we use the illustration, it's hard to call a hero image "attractive", but if we can use real human images now - with a better photo selection, we can make the ATF of a category impressive with the hero image. We can also use that to ensure the category name can be as prominent as it needs to be → to improve time on site, bounce rate. 

Highlight the top story related to the category on top of the page → to improve CTR and bounce rate.  

Prominent and flexible choice of subscription  → help with sign-ups and subscription rates.

 

Tags with visual display  → improve CTR, page views

 

 

 

hhg-21-cat-02-min_edited.jpg

Selective and related health tools to the category to display → improve CTR, page views, and depth for the tools.

 

Doctor-of-the-day(week, month, year) and her or his own content creation  → improve CTR, and page views for the doctor that got the highlighted spot. → it also helps if the company negotiates better deals with the paid HCPs when they become our writers or partners because the highlighted spot for doctors is to help their reputation and followers while improving our metrics.


Highlight sub-categories with the following group of articles  → to improve time on site.

 

hhg-21-signup-min_edited.jpg

 

Replacing illustration style where engagement is highly demanded with sensible human photos

Our COO at the time had a strong opinion on How Asians loved cartoons, manga - anime style so they must prefer illustrations over realistic photos, which I disagreed with because:

  • The people who are into anime and cartoons simply are not as focused as our target audience. 

  • More likely our audiences prefer real human photos since Asians now use social media way too much and respond well with real-looking photos rather than a cartoonish girl stretching in her yoga pants.

  • The illustration helped reinforce our visual guideline's consistency but it didn't help with the CTR, due to the user insights report, it said when it comes to healthcare, Vietnamese and Indonesians like looking at professional real humans/doctors, then colorful illustrations.

I went to the Data team and asked them to do some AB testing on realistic photos and our illustration photos. We saw more engagement on the realistic photos, but I had already moved on to my different projects at the time so I just left it to the product manager of the web to decide.

 


 

 

Conclusion


​We launched piece by piece of the new design alongside whatever the investors and clients requested at the time. The live version became inconsistent and I decided to step down as the lead designer and became more of a project design advisor/consultant when the Data team needed me to guide new designers into our old way of research, and eventually move on with the new projects for our client's teams. 

bottom of page