top of page

 

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.

The final design gained more signups firstly and satisfaction from Editor in Chief from other countries and stakeholders but I still felt it did not ensure user retention

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. 

Contribution

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

Team

1 UI Designer, 2 Product Managers, 2 Developers, 2 Business Analysts

Visit Part 1, Research for more understandings ↗

phone mockup_2-min.jpg



ideation
 

Design Pattern Review

​Based on The Design Pattern 

 

I got the Google playbook and based on the Google research structure, I tried to do the same with other competitor sites that shared the same behavior design pattern with our site expectations. With the visual comparison, it was easier to communicate this way with stakeholders to propose changes.
 

 

 

And I also created "The Best Practice Book of Health News Sites" following the structure of the Google research playbook to share with the rest of my team on Google Sheet.



design
 

hhg-article 1-min.jpg

.

Article Reading Display

 

Breadcrumb helps with SEO and makes it easier for users to navigate to categories → leading them to related category pages.

Bold and large title: that's to enhance brand identity with the primary color, also it's a better display for quick scanning with lazy readers.

Highlighted the medical reviewer and the author names in the ATF area: help to give credit to the editors, but I put the medical reviewer name before the author name → that our existing users did not care about who wrote the articles, but they care as if it's approved, or verified by a doctor that comes with a good title, reputation, professions. 

The main image in the ATF area: in our data reports, the articles that have attractive images at first had higher CTR and were more likely to get users to scroll down. 

Time Published: this is mostly to track the latest updates for the editors. For the users, it's to confirm the updated version of the article → to let users know this is not a sleeping site (when an article is made way too long ago).

Aa - font size customize: at the time our editors were allowed to freely adjust font size on WordPress, so sometimes the users complained articles' typography was unreadable. It's also a small test for us to see if the editors' casual writing behaviors were that big of an issue. → it gives readers the power to customize their reading experience to fit them best. 

Save button: We expect users to save the article to check on their content interest, also, we want them to log in because they need an account to save an article → increase sign-up.

hhg-article 2-min.jpg

 

Tags at the end of the article: this is for Editors to keep track of their writings and published articles. 

Feedback after reading the article: we needed to see how users responded to articles and gather insights about them. 

Save button (again): chances are if they missed the save button at the top of the article, this is where they should see it and action → increase sign-up. 

Social network share buttons: we only left 2 options for social media with the large options of the social sharing buttons rather than the share icon to ensure users won't miss that.

hhg-article 3-min.jpg

Floating bar when scrolling in the article: to remind users to share or save the article, customize reading display view → to increasing sharing, saving action.

Interacting content - Video: as our findings, video content has helped with CTR and time-on-site, we put it in the Recommendation section after an article.

hhg-category 1-min.jpg

.

Category

Besides infinity scroll applied for all the article listings like on Zingnews, I followed the illustration style across the entire web style guide, along with different content types sections such as Infographic, Doctor (expert), Health tools, Quiz, Game (Minigame).

hhg-category 2-min.jpg

 

The overdone work for all the sections was to get users to wander on the category page to increase the time-on-site, and with the MORE-TO-FOLLOW section which is more categories, topics to follow was to get users to interact anywhere so we could see where their interests lie, also to increase and test out CTR on other topics vs. articles.

hhg-2020-covid-min.jpg

.

Covid-19 Category

Covid-19 category got the best responses from all over markets' users.

"Cases around you" with the Maps: to show where positive cases and Isolation zones are within 2km from the person who views the page → to get them to sign up or to get their location, so we have more information about them. That's why the Sign-up form is right below the maps.

hhg-covid cat 2-min.jpg

The overall theme of this category is dark, I wanted to make it serious to raise awareness for people at the time (last year).MythBusted section that was done to have a similar look with Google search with hopes to trigger users to stay in this area, and engage, theoretically. The 3 fixed articles about Covid-19: are for people who are new to the pandemic to quickly learn before reading more articles and panic.

 

 

hhg-signup-min.jpg

.

Sign-ups, and Illustration

Onboarding sign-ups and illustration style: We wanted to make sure the style across regions stays consistent, so after receiving a final request on illustration, Ling - the UI Designer in my team made the illustrations for onboarding popups and the visual guidelines, it will appear whenever users engage with the Save button on article reading pages.

 

 

hhg-2020-home-min_edited.jpg

.

Homepage

 

Homepage redesign was not on my priority list for this site, because the users barely visited our site via direct search, or bookmark our site. Knowing we had not made a great reputation in the telehealth industry.

hhg-home-min.jpg

 

However, it came to a point where all other prioritized parts were completed, we decided to apply all illustration styles on the homepage as well for other countries to follow strictly.

As you can see, we created over 100 illustrations for categories and introduction content.
 

 

hhg-covid home-min.jpg

 

We also have a version of the COVID-19 UPDATES on the homepage to increase CTR on the Covid-19 Category page.

 

to be continued

 

What I've learned after the time working on this 

  • Casual user interviews were more beneficial and relaxing for both the users and myself.

    In these conversations, I spoke with many real users for the first time. We talked about cultural and health belief differences between Asia and the West. This helped me with my design decisions and made me better able to debate with Western directors.

  • Working with the Data team helped me become more data-driven.

    Initially, as the sole designer, I worked closely with the Data team to learn how to be more data-driven for better designs, since the project manager had limited experience in UX.

  • I was amazed by some of the users' feedback.

    Talking to potential users showed me unexpected technology behaviors. These insights helped me realize that my old designs and assumptions, as well as changes requested by the board, would not serve end-users best interests.

bottom of page